Refactor useAuth hook, settings components, and docs for formatting and readability improvements

- Consolidated multi-line arguments into single lines where appropriate in `useAuth`. - Improved spacing and readability in data processing across components (`ProfileSettingsForm`, `PasswordChangeForm`, `SessionCard`). - Applied consistent table and markdown formatting in design system docs (e.g., `README.md`, `08-ai-guidelines.md`, `00-quick-start.md`). - Updated code snippets to ensure adherence to Prettier rules and streamlined JSX structures.
2025-11-10 11:03:45 +01:00
parent 464a6140c4
commit 96df7edf88
208 changed files with 4056 additions and 4556 deletions
--- a/frontend/src/components/auth/AuthGuard.tsx
+++ b/frontend/src/components/auth/AuthGuard.tsx
@@ -83,9 +83,8 @@ export function AuthGuard({ children, requireAdmin = false, fallback }: AuthGuar
    // If not loading and not authenticated, redirect to login
    if (!isLoading && !isAuthenticated) {
      // Preserve intended destination
-      const returnUrl = pathname !== config.routes.login
-        ? `?returnUrl=${encodeURIComponent(pathname)}`
-        : '';
+      const returnUrl =
+        pathname !== config.routes.login ? `?returnUrl=${encodeURIComponent(pathname)}` : '';

      router.push(`${config.routes.login}${returnUrl}`);
    }
--- a/frontend/src/components/auth/AuthLayoutClient.tsx
+++ b/frontend/src/components/auth/AuthLayoutClient.tsx
@@ -21,9 +21,7 @@ export function AuthLayoutClient({ children }: AuthLayoutClientProps) {

      {/* Auth card */}
      <div className="w-full max-w-md">
-        <div className="rounded-lg border bg-card p-8 shadow-sm">
-          {children}
-        </div>
+        <div className="rounded-lg border bg-card p-8 shadow-sm">{children}</div>
      </div>
    </div>
  );
--- a/frontend/src/components/auth/LoginForm.tsx
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -24,10 +24,7 @@ import config from '@/config/app.config';
 // ============================================================================

 const loginSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Email is required')
-    .email('Please enter a valid email address'),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
  password: z
    .string()
    .min(1, 'Password is required')
@@ -187,11 +184,7 @@ export function LoginForm({
        </div>

        {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? 'Signing in...' : 'Sign in'}
        </Button>

--- a/frontend/src/components/auth/PasswordResetConfirmForm.tsx
+++ b/frontend/src/components/auth/PasswordResetConfirmForm.tsx
@@ -57,8 +57,7 @@ function calculatePasswordStrength(password: string): {
  const hasNumber = /[0-9]/.test(password);
  const hasUppercase = /[A-Z]/.test(password);

-  const strength =
-    (hasMinLength ? 33 : 0) + (hasNumber ? 33 : 0) + (hasUppercase ? 34 : 0);
+  const strength = (hasMinLength ? 33 : 0) + (hasNumber ? 33 : 0) + (hasUppercase ? 34 : 0);

  return { hasMinLength, hasNumber, hasUppercase, strength };
 }
@@ -208,9 +207,7 @@ export function PasswordResetConfirmForm({
            {...form.register('new_password')}
            aria-invalid={!!form.formState.errors.new_password}
            aria-describedby={
-              form.formState.errors.new_password
-                ? 'new-password-error'
-                : 'password-requirements'
+              form.formState.errors.new_password ? 'new-password-error' : 'password-requirements'
            }
            aria-required="true"
          />
@@ -261,8 +258,7 @@ export function PasswordResetConfirmForm({
                      : 'text-muted-foreground'
                  }
                >
-                  {passwordStrength.hasUppercase ? '✓' : '○'} Contains an uppercase
-                  letter
+                  {passwordStrength.hasUppercase ? '✓' : '○'} Contains an uppercase letter
                </li>
              </ul>
            </div>
@@ -283,9 +279,7 @@ export function PasswordResetConfirmForm({
            {...form.register('confirm_password')}
            aria-invalid={!!form.formState.errors.confirm_password}
            aria-describedby={
-              form.formState.errors.confirm_password
-                ? 'confirm-password-error'
-                : undefined
+              form.formState.errors.confirm_password ? 'confirm-password-error' : undefined
            }
            aria-required="true"
          />
--- a/frontend/src/components/auth/PasswordResetRequestForm.tsx
+++ b/frontend/src/components/auth/PasswordResetRequestForm.tsx
@@ -23,10 +23,7 @@ import { getGeneralError, getFieldErrors, isAPIErrorArray } from '@/lib/api/erro
 // ============================================================================

 const resetRequestSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Email is required')
-    .email('Please enter a valid email address'),
+  email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
 });

 type ResetRequestFormData = z.infer<typeof resetRequestSchema>;
@@ -169,11 +166,7 @@ export function PasswordResetRequestForm({
        </div>

        {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? 'Sending...' : 'Send Reset Instructions'}
        </Button>

--- a/frontend/src/components/auth/RegisterForm.tsx
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -25,10 +25,7 @@ import config from '@/config/app.config';

 const registerSchema = z
  .object({
-    email: z
-      .string()
-      .min(1, 'Email is required')
-      .email('Please enter a valid email address'),
+    email: z.string().min(1, 'Email is required').email('Please enter a valid email address'),
    first_name: z
      .string()
      .min(1, 'First name is required')
@@ -45,9 +42,7 @@ const registerSchema = z
      .min(8, 'Password must be at least 8 characters')
      .regex(/[0-9]/, 'Password must contain at least one number')
      .regex(/[A-Z]/, 'Password must contain at least one uppercase letter'),
-    confirmPassword: z
-      .string()
-      .min(1, 'Please confirm your password'),
+    confirmPassword: z.string().min(1, 'Please confirm your password'),
  })
  .refine((data) => data.password === data.confirmPassword, {
    message: 'Passwords do not match',
@@ -88,11 +83,7 @@ interface RegisterFormProps {
 * />
 * ```
 */
-export function RegisterForm({
-  onSuccess,
-  showLoginLink = true,
-  className,
-}: RegisterFormProps) {
+export function RegisterForm({ onSuccess, showLoginLink = true, className }: RegisterFormProps) {
  const [serverError, setServerError] = useState<string | null>(null);
  const registerMutation = useRegister();

@@ -242,7 +233,11 @@ export function RegisterForm({
            disabled={isSubmitting}
            {...form.register('password')}
            aria-invalid={!!form.formState.errors.password}
-            aria-describedby={form.formState.errors.password ? 'password-error password-requirements' : 'password-requirements'}
+            aria-describedby={
+              form.formState.errors.password
+                ? 'password-error password-requirements'
+                : 'password-requirements'
+            }
          />
          {form.formState.errors.password && (
            <p id="password-error" className="text-sm text-destructive">
@@ -253,13 +248,25 @@ export function RegisterForm({
          {/* Password Strength Indicator */}
          {password.length > 0 && !form.formState.errors.password && (
            <div id="password-requirements" className="space-y-1 text-xs">
-              <p className={hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasMinLength ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                {hasMinLength ? '✓' : '○'} At least 8 characters
              </p>
-              <p className={hasNumber ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasNumber ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                {hasNumber ? '✓' : '○'} Contains a number
              </p>
-              <p className={hasUppercase ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'}>
+              <p
+                className={
+                  hasUppercase ? 'text-green-600 dark:text-green-400' : 'text-muted-foreground'
+                }
+              >
                {hasUppercase ? '✓' : '○'} Contains an uppercase letter
              </p>
            </div>
@@ -279,7 +286,9 @@ export function RegisterForm({
            disabled={isSubmitting}
            {...form.register('confirmPassword')}
            aria-invalid={!!form.formState.errors.confirmPassword}
-            aria-describedby={form.formState.errors.confirmPassword ? 'confirmPassword-error' : undefined}
+            aria-describedby={
+              form.formState.errors.confirmPassword ? 'confirmPassword-error' : undefined
+            }
          />
          {form.formState.errors.confirmPassword && (
            <p id="confirmPassword-error" className="text-sm text-destructive">
@@ -289,11 +298,7 @@ export function RegisterForm({
        </div>

        {/* Submit Button */}
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={isSubmitting}
-        >
+        <Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? 'Creating account...' : 'Create account'}
        </Button>