Refactor authentication and account management with modular UI components (#242)

web/frontend/app/features/auth/components/LoginForm.tsx

@@ -0,0 +1,44 @@
+import { BaseSyntheticEvent } from 'react';
+import { FormState, UseFormRegister } from 'react-hook-form';
+import FormField from '../../../components/ui/forms/FormField';
+import SubmitButton from '../../../components/ui/forms/SubmitButton';
+import type { LoginSchema } from '../schemas';
+
+interface LoginFormProps {
+    onSubmit: (e?: BaseSyntheticEvent) => Promise<Awaited<void> | undefined>;
+    formState: FormState<LoginSchema>;
+    register: UseFormRegister<{ username: string; password: string }>;
+    submitting: boolean;
+}
+
+const LoginForm = (props: LoginFormProps) => (
+    <form onSubmit={props.onSubmit} className="space-y-3">
+        <FormField
+            id="username"
+            type="text"
+            autoComplete="username"
+            placeholder="your_username"
+            label="Username"
+            error={props.formState.errors.username?.message}
+            {...props.register('username')}
+        />
+
+        <FormField
+            id="password"
+            type="password"
+            autoComplete="current-password"
+            placeholder="••••••••"
+            label="Password"
+            error={props.formState.errors.password?.message}
+            {...props.register('password')}
+        />
+
+        <SubmitButton
+            isSubmitting={props.submitting}
+            idleText="Sign In"
+            submittingText="Signing in..."
+        />
+    </form>
+);
+
+export default LoginForm;