@syuttechnologies/layout 1.0.0

package/src/components/ChangePasswordModal.tsx

@@ -0,0 +1,545 @@
+import React, { useState, useCallback, useMemo } from 'react';
+
+export interface ChangePasswordModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: ChangePasswordData) => Promise<void> | void;
+  username?: string;
+  validationRules?: PasswordValidationRules;
+  isLoading?: boolean;
+}
+
+export interface ChangePasswordData {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export interface PasswordValidationRules {
+  minLength?: number;
+  requireUppercase?: boolean;
+  requireNumber?: boolean;
+  requireSpecialChar?: boolean;
+  preventUsernameMatch?: boolean;
+}
+
+interface ValidationError {
+  field: 'currentPassword' | 'newPassword' | 'confirmPassword' | 'general';
+  message: string;
+}
+
+interface PasswordStrength {
+  score: number;
+  label: string;
+  color: string;
+}
+
+const DEFAULT_VALIDATION_RULES: Required<PasswordValidationRules> = {
+  minLength: 6,
+  requireUppercase: true,
+  requireNumber: true,
+  requireSpecialChar: true,
+  preventUsernameMatch: true,
+};
+
+const validatePassword = (
+  password: string,
+  rules: Required<PasswordValidationRules>,
+  username?: string
+): string[] => {
+  const errors: string[] = [];
+
+  if (password.length < rules.minLength) {
+    errors.push(`Password must be at least ${rules.minLength} characters`);
+  }
+  if (rules.requireUppercase && !/[A-Z]/.test(password)) {
+    errors.push('Password must contain at least one uppercase letter');
+  }
+  if (rules.requireNumber && !/[0-9]/.test(password)) {
+    errors.push('Password must contain at least one number');
+  }
+  if (rules.requireSpecialChar && !/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) {
+    errors.push('Password must contain at least one special character');
+  }
+  if (rules.preventUsernameMatch && username && password.toLowerCase() === username.toLowerCase()) {
+    errors.push('Password cannot be the same as username');
+  }
+
+  return errors;
+};
+
+const calculatePasswordStrength = (password: string): PasswordStrength => {
+  let score = 0;
+
+  if (password.length >= 6) score++;
+  if (password.length >= 10) score++;
+  if (/[A-Z]/.test(password)) score++;
+  if (/[0-9]/.test(password)) score++;
+  if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) score++;
+
+  score = Math.min(4, Math.floor(score * 0.8));
+
+  const strengthMap: Record<number, { label: string; color: string }> = {
+    0: { label: 'Very Weak', color: '#ef4444' },
+    1: { label: 'Weak', color: '#f97316' },
+    2: { label: 'Fair', color: '#eab308' },
+    3: { label: 'Good', color: '#22c55e' },
+    4: { label: 'Strong', color: '#16a34a' },
+  };
+
+  return { score, ...strengthMap[score] };
+};
+
+const EyeIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+const EyeOffIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+    <line x1="1" y1="1" x2="23" y2="23" />
+  </svg>
+);
+
+const CloseIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const LockIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+const XIcon = () => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const styles = {
+  backdrop: {
+    position: 'fixed' as const,
+    inset: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 9998,
+  },
+  modal: {
+    position: 'fixed' as const,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    backgroundColor: 'white',
+    borderRadius: '12px',
+    boxShadow: '0 20px 50px rgba(0, 0, 0, 0.3)',
+    width: '100%',
+    maxWidth: '440px',
+    zIndex: 9999,
+    overflow: 'hidden',
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '1.25rem 1.5rem',
+    borderBottom: '1px solid #e2e8f0',
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  },
+  headerTitle: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    color: 'white',
+    fontSize: '1.125rem',
+    fontWeight: 600,
+    margin: 0,
+  },
+  closeButton: {
+    background: 'rgba(255, 255, 255, 0.2)',
+    border: 'none',
+    borderRadius: '8px',
+    padding: '0.5rem',
+    cursor: 'pointer',
+    color: 'white',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'background 0.2s',
+  },
+  content: {
+    padding: '1.5rem',
+  },
+  formGroup: {
+    marginBottom: '1.25rem',
+  },
+  label: {
+    display: 'block',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    color: '#334155',
+    marginBottom: '0.5rem',
+  },
+  inputWrapper: {
+    position: 'relative' as const,
+  },
+  input: {
+    width: '100%',
+    padding: '0.75rem 2.75rem 0.75rem 1rem',
+    fontSize: '0.9375rem',
+    border: '2px solid #e2e8f0',
+    borderRadius: '8px',
+    outline: 'none',
+    transition: 'border-color 0.2s, box-shadow 0.2s',
+    boxSizing: 'border-box' as const,
+  },
+  inputError: {
+    borderColor: '#ef4444',
+  },
+  inputFocus: {
+    borderColor: '#667eea',
+    boxShadow: '0 0 0 3px rgba(102, 126, 234, 0.1)',
+  },
+  toggleButton: {
+    position: 'absolute' as const,
+    right: '0.75rem',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    color: '#64748b',
+    padding: '0.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  strengthMeter: {
+    marginTop: '0.5rem',
+  },
+  strengthBar: {
+    height: '4px',
+    backgroundColor: '#e2e8f0',
+    borderRadius: '2px',
+    overflow: 'hidden',
+    marginBottom: '0.25rem',
+  },
+  strengthFill: {
+    height: '100%',
+    transition: 'width 0.3s, background-color 0.3s',
+    borderRadius: '2px',
+  },
+  strengthLabel: {
+    fontSize: '0.75rem',
+    fontWeight: 500,
+  },
+  requirements: {
+    marginTop: '0.75rem',
+    padding: '0.75rem',
+    backgroundColor: '#f8fafc',
+    borderRadius: '8px',
+    border: '1px solid #e2e8f0',
+  },
+  requirementsTitle: {
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    color: '#64748b',
+    marginBottom: '0.5rem',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+  },
+  requirementItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    fontSize: '0.8125rem',
+    marginBottom: '0.25rem',
+  },
+  errorText: {
+    color: '#ef4444',
+    fontSize: '0.8125rem',
+    marginTop: '0.375rem',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.25rem',
+  },
+  footer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '0.75rem',
+    padding: '1rem 1.5rem',
+    borderTop: '1px solid #e2e8f0',
+    backgroundColor: '#f8fafc',
+  },
+  button: {
+    padding: '0.625rem 1.25rem',
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    borderRadius: '8px',
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+    border: 'none',
+  },
+  cancelButton: {
+    backgroundColor: 'white',
+    color: '#64748b',
+    border: '1px solid #e2e8f0',
+  },
+  submitButton: {
+    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    color: 'white',
+    boxShadow: '0 2px 8px rgba(102, 126, 234, 0.3)',
+  },
+  submitButtonDisabled: {
+    background: '#cbd5e1',
+    cursor: 'not-allowed',
+    boxShadow: 'none',
+  },
+};
+
+export const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  username,
+  validationRules,
+  isLoading: externalLoading,
+}) => {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [errors, setErrors] = useState<ValidationError[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [focusedField, setFocusedField] = useState<string | null>(null);
+
+  const rules = useMemo(
+    () => ({ ...DEFAULT_VALIDATION_RULES, ...validationRules }),
+    [validationRules]
+  );
+
+  const passwordStrength = useMemo(
+    () => calculatePasswordStrength(newPassword),
+    [newPassword]
+  );
+
+  const requirements = useMemo(() => {
+    return [
+      { id: 'length', label: `At least ${rules.minLength} characters`, met: newPassword.length >= rules.minLength },
+      { id: 'uppercase', label: 'One uppercase letter', met: /[A-Z]/.test(newPassword), required: rules.requireUppercase },
+      { id: 'number', label: 'One number', met: /[0-9]/.test(newPassword), required: rules.requireNumber },
+      { id: 'special', label: 'One special character', met: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword), required: rules.requireSpecialChar },
+      { id: 'notUsername', label: 'Not same as username', met: !username || newPassword.toLowerCase() !== username.toLowerCase(), required: rules.preventUsernameMatch && !!username },
+    ].filter((req) => req.required !== false);
+  }, [newPassword, rules, username]);
+
+  const isFormValid = useMemo(() => {
+    if (!currentPassword || !newPassword || !confirmPassword) return false;
+    if (newPassword !== confirmPassword) return false;
+    if (requirements.some((req) => !req.met)) return false;
+    return true;
+  }, [currentPassword, newPassword, confirmPassword, requirements]);
+
+  const getFieldError = useCallback(
+    (field: ValidationError['field']) => errors.find((e) => e.field === field)?.message,
+    [errors]
+  );
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      const newErrors: ValidationError[] = [];
+
+      if (!currentPassword) {
+        newErrors.push({ field: 'currentPassword', message: 'Current password is required' });
+      }
+
+      const passwordErrors = validatePassword(newPassword, rules, username);
+      if (passwordErrors.length > 0) {
+        newErrors.push({ field: 'newPassword', message: passwordErrors[0] });
+      }
+
+      if (!confirmPassword) {
+        newErrors.push({ field: 'confirmPassword', message: 'Please confirm your new password' });
+      } else if (newPassword !== confirmPassword) {
+        newErrors.push({ field: 'confirmPassword', message: 'Passwords do not match' });
+      }
+
+      if (currentPassword && newPassword && currentPassword === newPassword) {
+        newErrors.push({ field: 'newPassword', message: 'New password must be different from current password' });
+      }
+
+      if (newErrors.length > 0) {
+        setErrors(newErrors);
+        return;
+      }
+
+      setErrors([]);
+      setIsSubmitting(true);
+
+      try {
+        await onSubmit({ currentPassword, newPassword, confirmPassword });
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+        onClose();
+      } catch (error: any) {
+        setErrors([{ field: 'general', message: error?.message || 'Failed to change password.' }]);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [currentPassword, newPassword, confirmPassword, rules, username, onSubmit, onClose]
+  );
+
+  const handleClose = useCallback(() => {
+    if (!isSubmitting && !externalLoading) {
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      setErrors([]);
+      onClose();
+    }
+  }, [isSubmitting, externalLoading, onClose]);
+
+  if (!isOpen) return null;
+
+  const loading = isSubmitting || externalLoading;
+
+  return (
+    <>
+      <div style={styles.backdrop} onClick={handleClose} />
+      <div style={styles.modal}>
+        <div style={styles.header}>
+          <h2 style={styles.headerTitle}>
+            <LockIcon />
+            Change Password
+          </h2>
+          <button style={styles.closeButton} onClick={handleClose} disabled={loading}>
+            <CloseIcon />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div style={styles.content}>
+            {getFieldError('general') && (
+              <div style={{ padding: '0.75rem', backgroundColor: '#fef2f2', border: '1px solid #fecaca', borderRadius: '8px', marginBottom: '1rem', color: '#dc2626', fontSize: '0.875rem' }}>
+                {getFieldError('general')}
+              </div>
+            )}
+
+            <div style={styles.formGroup}>
+              <label style={styles.label}>Current Password</label>
+              <div style={styles.inputWrapper}>
+                <input
+                  type={showCurrentPassword ? 'text' : 'password'}
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  onFocus={() => setFocusedField('currentPassword')}
+                  onBlur={() => setFocusedField(null)}
+                  placeholder="Enter current password"
+                  disabled={loading}
+                  style={{ ...styles.input, ...(getFieldError('currentPassword') ? styles.inputError : {}), ...(focusedField === 'currentPassword' ? styles.inputFocus : {}) }}
+                />
+                <button type="button" style={styles.toggleButton} onClick={() => setShowCurrentPassword(!showCurrentPassword)} tabIndex={-1}>
+                  {showCurrentPassword ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+              {getFieldError('currentPassword') && <div style={styles.errorText}>{getFieldError('currentPassword')}</div>}
+            </div>
+
+            <div style={styles.formGroup}>
+              <label style={styles.label}>New Password</label>
+              <div style={styles.inputWrapper}>
+                <input
+                  type={showNewPassword ? 'text' : 'password'}
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  onFocus={() => setFocusedField('newPassword')}
+                  onBlur={() => setFocusedField(null)}
+                  placeholder="Enter new password"
+                  disabled={loading}
+                  style={{ ...styles.input, ...(getFieldError('newPassword') ? styles.inputError : {}), ...(focusedField === 'newPassword' ? styles.inputFocus : {}) }}
+                />
+                <button type="button" style={styles.toggleButton} onClick={() => setShowNewPassword(!showNewPassword)} tabIndex={-1}>
+                  {showNewPassword ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+              {getFieldError('newPassword') && <div style={styles.errorText}>{getFieldError('newPassword')}</div>}
+
+              {newPassword && (
+                <div style={styles.strengthMeter}>
+                  <div style={styles.strengthBar}>
+                    <div style={{ ...styles.strengthFill, width: `${(passwordStrength.score / 4) * 100}%`, backgroundColor: passwordStrength.color }} />
+                  </div>
+                  <span style={{ ...styles.strengthLabel, color: passwordStrength.color }}>{passwordStrength.label}</span>
+                </div>
+              )}
+
+              <div style={styles.requirements}>
+                <div style={styles.requirementsTitle}>Password Requirements</div>
+                {requirements.map((req) => (
+                  <div key={req.id} style={{ ...styles.requirementItem, color: req.met ? '#16a34a' : '#64748b' }}>
+                    {req.met ? <span style={{ color: '#16a34a' }}><CheckIcon /></span> : <span style={{ color: '#cbd5e1' }}><XIcon /></span>}
+                    {req.label}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div style={styles.formGroup}>
+              <label style={styles.label}>Confirm New Password</label>
+              <div style={styles.inputWrapper}>
+                <input
+                  type={showConfirmPassword ? 'text' : 'password'}
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  onFocus={() => setFocusedField('confirmPassword')}
+                  onBlur={() => setFocusedField(null)}
+                  placeholder="Confirm new password"
+                  disabled={loading}
+                  style={{ ...styles.input, ...(getFieldError('confirmPassword') ? styles.inputError : {}), ...(focusedField === 'confirmPassword' ? styles.inputFocus : {}) }}
+                />
+                <button type="button" style={styles.toggleButton} onClick={() => setShowConfirmPassword(!showConfirmPassword)} tabIndex={-1}>
+                  {showConfirmPassword ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+              {getFieldError('confirmPassword') && <div style={styles.errorText}>{getFieldError('confirmPassword')}</div>}
+              {confirmPassword && newPassword && confirmPassword === newPassword && (
+                <div style={{ color: '#16a34a', fontSize: '0.8125rem', marginTop: '0.375rem', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                  <CheckIcon /> Passwords match
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div style={styles.footer}>
+            <button type="button" style={{ ...styles.button, ...styles.cancelButton }} onClick={handleClose} disabled={loading}>
+              Cancel
+            </button>
+            <button type="submit" style={{ ...styles.button, ...styles.submitButton, ...(!isFormValid || loading ? styles.submitButtonDisabled : {}) }} disabled={!isFormValid || loading}>
+              {loading ? 'Changing...' : 'Change Password'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default ChangePasswordModal;