refactor the Admin Password Input field and add a new boolean field for it

web/components/admin/TextField.tsx

@@ -31,6 +31,7 @@ export type TextFieldProps = {
   useTrim?: boolean;
   useTrimLead?: boolean;
   value?: string | number;
+  isAdminPwdField?: boolean;
   onBlur?: FieldUpdaterFunc;
   onChange?: FieldUpdaterFunc;
 };
@@ -53,6 +54,7 @@ export const TextField: FC<TextFieldProps> = ({
   type,
   useTrim,
   value,
+  isAdminPwdField,
 }) => {
   const [hasPwdChanged, setHasPwdChanged] = useState(false);
   const [showPwdButton, setShowPwdButton] = useState(false);
@@ -63,7 +65,7 @@ export const TextField: FC<TextFieldProps> = ({
     if (onChange) {
       const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
       setShowPwdButton(true);
-      if (fieldName === 'adminPassword' && regex.test(val)) {
+      if (isAdminPwdField && regex.test(val)) {
         setHasPwdChanged(true);
       } else {
         setHasPwdChanged(false);
@@ -144,7 +146,7 @@ export const TextField: FC<TextFieldProps> = ({
         </div>
       ) : null}
 
-      {type !== TEXTFIELD_TYPE_PASSWORD ? (
+      {!isAdminPwdField ? (
         <div className="input-side">
           <div className="input-group">
             <Field
@@ -247,6 +249,7 @@ TextField.defaultProps = {
   pattern: '',
   useTrim: false,
   useTrimLead: false,
+  isAdminPwdField: false,
 
   onSubmit: () => {},
   onBlur: () => {},

web/components/admin/TextFieldWithSubmit.tsx

@@ -24,6 +24,7 @@ export type TextFieldWithSubmitProps = TextFieldProps & {
   apiPath: string;
   configPath?: string;
   initialValue?: string;
+  isAdminPwdField?: boolean;
 };
 
 export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
@@ -38,13 +39,13 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
 
   const [hasChanged, setHasChanged] = useState(false);
 
-  const [isPwdInput, setPwdInputField] = useState(false);
   const serverStatusData = useContext(ServerStatusContext);
   const { setFieldInConfigState } = serverStatusData || {};
 
   let resetTimer = null;
 
-  const { fieldName, required, tip, status, value, onChange, onSubmit } = textFieldProps;
+  const { fieldName, required, tip, status, value, isAdminPwdField, onChange, onSubmit } =
+    textFieldProps;
 
   // Clear out any validation states and messaging
   const resetStates = () => {
@@ -67,13 +68,6 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
     }
   }, [value]);
 
-  useEffect(() => {
-    if (fieldName === 'adminPassword') {
-      setPwdInputField(true);
-    }
-    setPwdInputField(false);
-  }, [fieldName]);
-
   // if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
   const handleChange = ({ fieldName: changedFieldName, value: changedValue }: UpdateArgs) => {
     if (onChange) {
@@ -144,7 +138,7 @@ export const TextFieldWithSubmit: FC<TextFieldWithSubmitProps> = ({
           <div className="field-tip">{tip}</div>
           <FormStatusIndicator status={status || submitStatus} />
           <div className="update-button-container">
-            {isPwdInput && (
+            {!isAdminPwdField && (
               <Button
                 type="primary"
                 size="small"

web/utils/config-constants.tsx

@@ -122,6 +122,7 @@ export const TEXTFIELD_PROPS_ADMIN_PASSWORD = {
   label: 'Admin Password',
   tip: 'Save this password somewhere safe, you will need it to login to the admin dashboard!',
   required: true,
+  isAdminPwdField: true,
 };
 export const TEXTFIELD_PROPS_FFMPEG = {
   apiPath: API_FFMPEG,
@@ -131,6 +132,7 @@ export const TEXTFIELD_PROPS_FFMPEG = {
   label: 'FFmpeg Path',
   tip: 'Absolute file path of the FFMPEG application on your server',
   required: true,
+  isAdminPwdField: false,
 };
 export const TEXTFIELD_PROPS_WEB_PORT = {
   apiPath: API_WEB_PORT,
@@ -140,6 +142,7 @@ export const TEXTFIELD_PROPS_WEB_PORT = {
   label: 'Owncast port',
   tip: 'What port is your Owncast web server listening? Default is 8080',
   required: true,
+  isAdminPwdField: false,
 };
 export const TEXTFIELD_PROPS_RTMP_PORT = {
   apiPath: API_RTMP_PORT,
@@ -149,6 +152,7 @@ export const TEXTFIELD_PROPS_RTMP_PORT = {
   label: 'RTMP port',
   tip: 'What port should accept inbound broadcasts? Default is 1935',
   required: true,
+  isAdminPwdField: false,
 };
 export const TEXTFIELD_PROPS_INSTANCE_URL = {
   apiPath: API_INSTANCE_URL,