[feat] Show password button & fix requirements

AdminPanel/client/src/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,56 @@
+import {useState} from 'react';
+import styles from './PasswordInput.module.scss';
+
+function PasswordInput({label, value, onChange, placeholder = '', error = null, description = null, width, isValid = true, ...props}) {
+  const [showPassword, setShowPassword] = useState(false);
+  const inputStyle = width ? {width} : {};
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className={styles.inputGroup}>
+      {label && <label className={styles.label}>{label}</label>}
+      {description && <p className={styles.description}>{description}</p>}
+      <div className={styles.inputContainer}>
+        <input
+          className={`${styles.input} ${error ? styles['input--error'] : ''} ${!isValid && value ? styles['input--invalid'] : ''}`}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          placeholder={placeholder}
+          spellCheck={false}
+          style={inputStyle}
+          {...props}
+          type={showPassword ? 'text' : 'password'}
+        />
+        <button
+          type='button'
+          className={styles.toggleButton}
+          onClick={togglePasswordVisibility}
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+        >
+          {showPassword ? (
+            <svg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' className={styles.eyeIcon}>
+              <path
+                d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'
+                fill='#666666'
+              />
+              <path d='M2 2l20 20' stroke='#666666' strokeWidth='2' strokeLinecap='round' />
+            </svg>
+          ) : (
+            <svg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' className={styles.eyeIcon}>
+              <path
+                d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'
+                fill='#666666'
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      {error && <span className={styles.error}>{error}</span>}
+    </div>
+  );
+}
+
+export default PasswordInput;

AdminPanel/client/src/components/PasswordInput/PasswordInput.module.scss

@@ -0,0 +1,104 @@
+.label {
+  display: block;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 150%;
+  color: #333333;
+  margin-bottom: 6px;
+}
+
+.description {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 150%;
+  color: #666666;
+  margin: 0 0 8px 0;
+}
+
+.inputContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.input {
+  width: 270px;
+  padding: 12px 40px 12px 16px; /* Keep original padding */
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  color: #808080;
+  background: #f1f1f1;
+  vertical-align: middle;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border: 1px solid #cccccc;
+    background: #f1f1f1;
+    color: #444444;
+  }
+
+  &::placeholder {
+    color: #999999;
+  }
+
+  &--error {
+    border-color: #dc3545;
+
+    &:focus {
+      border-color: #dc3545;
+    }
+  }
+
+  &--invalid {
+    border-color: #cb0000;
+
+    &:focus {
+      border-color: #cb0000;
+    }
+  }
+}
+
+.toggleButton {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+
+  &:hover {
+    background: transparent;
+  }
+
+  &:focus {
+    outline: none;
+    background: transparent;
+  }
+}
+
+.eyeIcon {
+  transition: opacity 0.2s ease;
+}
+
+.error {
+  display: block;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #dc3545;
+  margin-top: 4px;
+}

AdminPanel/client/src/components/PasswordInputWithRequirements/PasswordInputWithRequirements.js

@@ -1,5 +1,5 @@
 import {useState} from 'react';
-import Input from '../Input/Input';
+import PasswordInput from '../PasswordInput/PasswordInput';
 import PasswordRequirements from '../PasswordRequirements/PasswordRequirements';
 import {usePasswordValidation} from '../../utils/passwordValidation';
 
@@ -16,15 +16,13 @@ function PasswordInputWithRequirements({label, value, onChange, placeholder, des
   };
 
   const handleBlur = () => {
-    if (isValid || !value) {
-      setIsFocused(false);
-    }
+    setIsFocused(false);
   };
 
   return (
     <div>
       <div style={{position: 'relative'}}>
-        <Input
+        <PasswordInput
           label={label}
           type='password'
           value={value}
@@ -32,6 +30,7 @@ function PasswordInputWithRequirements({label, value, onChange, placeholder, des
           placeholder={placeholder}
           description={description}
           error={error}
+          isValid={isValid}
           onFocus={handleFocus}
           onBlur={handleBlur}
           {...props}

AdminPanel/client/src/components/PasswordRequirements/PasswordRequirements.js

@@ -50,7 +50,7 @@ function PasswordRequirements({password, isVisible = false}) {
   const totalRequirements = requirements.length;
   const progress = totalRequirements > 0 ? (validRequirements / totalRequirements) * 100 : 0;
 
-  const shouldShow = isVisible || (!isValid && password);
+  const shouldShow = isVisible;
 
   // Don't show if schema is not loaded yet
   if (!schema || !passwordValidation?.properties) {

AdminPanel/client/src/pages/ChangePassword/ChangePassword.js

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import {changePassword} from '../../api';
 import PageHeader from '../../components/PageHeader/PageHeader';
 import PageDescription from '../../components/PageDescription/PageDescription';
-import Input from '../../components/Input/Input';
+import PasswordInput from '../../components/PasswordInput/PasswordInput';
 import FixedSaveButton from '../../components/FixedSaveButton/FixedSaveButton';
 import PasswordInputWithRequirements from '../../components/PasswordInputWithRequirements/PasswordInputWithRequirements';
 import {usePasswordValidation} from '../../utils/passwordValidation';
@@ -62,13 +62,14 @@ function ChangePassword() {
           {passwordError && <div className={styles.errorMessage}>{passwordError}</div>}
 
           <div className={styles.form}>
-            <Input
+            <PasswordInput
               label='Current Password'
               type='password'
               value={currentPassword}
               onChange={setCurrentPassword}
               placeholder='Enter current password'
               description='Your current admin password'
+              isValid={true}
             />
 
             <PasswordInputWithRequirements
@@ -81,13 +82,14 @@ function ChangePassword() {
             />
 
             <div className={styles.confirmPasswordGroup}>
-              <Input
+              <PasswordInput
                 label='Confirm New Password'
                 type='password'
                 value={confirmPassword}
                 onChange={setConfirmPassword}
                 placeholder='Confirm new password'
                 description='Re-enter your new password'
+                isValid={true}
               />
               <div className={styles.passwordMismatch}>
                 {newPassword && confirmPassword && newPassword !== confirmPassword && newPasswordIsValid && "Passwords don't match"}

AdminPanel/client/src/pages/Login/LoginPage.js

@@ -2,7 +2,7 @@ import {useState, useRef} from 'react';
 import {useDispatch} from 'react-redux';
 import {fetchUser} from '../../store/slices/userSlice';
 import {login} from '../../api';
-import Input from '../../components/Input/Input';
+import PasswordInput from '../../components/PasswordInput/PasswordInput';
 import Button from '../../components/Button/Button';
 import styles from './styles.module.css';
 
@@ -43,7 +43,7 @@ export default function Login() {
 
         <div className={styles.form}>
           <div className={styles.inputGroup}>
-            <Input
+            <PasswordInput
               type='password'
               value={password}
               onChange={setPassword}
@@ -51,6 +51,7 @@ export default function Login() {
               error={error}
               onKeyDown={handleKeyDown}
               width='200px'
+              isValid={true}
             />
           </div>
 

AdminPanel/client/src/pages/Setup/SetupPage.js

@@ -4,6 +4,7 @@ import {setupAdminPassword} from '../../api';
 import {fetchUser} from '../../store/slices/userSlice';
 import Input from '../../components/Input/Input';
 import Button from '../../components/Button/Button';
+import PasswordInput from '../../components/PasswordInput/PasswordInput';
 import PasswordInputWithRequirements from '../../components/PasswordInputWithRequirements/PasswordInputWithRequirements';
 import {usePasswordValidation} from '../../utils/passwordValidation';
 import styles from './styles.module.css';
@@ -93,13 +94,14 @@ export default function Setup() {
           </div>
 
           <div className={styles.inputGroup}>
-            <Input
+            <PasswordInput
               type='password'
               value={confirmPassword}
               onChange={setConfirmPassword}
               placeholder='Confirm your password'
               error={errors.confirmPassword}
               onKeyDown={handleKeyDown}
+              isValid={true}
             />
             <div className={styles.passwordMismatch}>
               {password && confirmPassword && password !== confirmPassword && passwordIsValid && "Passwords don't match"}