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

web/frontend/app/components/ui/forms/FormField.tsx

@@ -0,0 +1,42 @@
+import { Description, Field, Label } from '@headlessui/react';
+
+type FormFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    error?: string;
+    hint?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    hintClassName?: string;
+};
+
+const FormField = ({
+    label,
+    error,
+    hint,
+    className,
+    labelClassName,
+    inputClassName,
+    hintClassName,
+    ...inputProps
+}: FormFieldProps) => {
+    return (
+        <Field className={className ?? 'space-y-1'}>
+            <Label htmlFor={inputProps.id} className={labelClassName ?? 'label font-medium'}>
+                {label}
+            </Label>
+
+            <input
+                {...inputProps}
+                className={inputClassName ?? `input w-full ${error ? 'input-error' : ''}`}
+            />
+
+            {error ? (
+                <Description className={hintClassName ?? 'label text-error'}>{error}</Description>
+            ) : hint ? (
+                <Description className={hintClassName ?? 'label'}>{hint}</Description>
+            ) : null}
+        </Field>
+    );
+};
+
+export default FormField;

web/frontend/app/components/ui/forms/SubmitButton.tsx

@@ -0,0 +1,28 @@
+import { Button } from '@headlessui/react';
+
+interface SubmitButtonProps {
+    isSubmitting: boolean;
+    idleText: string;
+    submittingText: string;
+    className?: string;
+}
+
+const SubmitButton = ({ isSubmitting, idleText, submittingText, className }: SubmitButtonProps) => {
+    return (
+        <Button
+            type="submit"
+            disabled={isSubmitting}
+            className={className ?? 'btn btn-primary w-full mt-2'}
+        >
+            {isSubmitting ? (
+                <>
+                    <span className="loading loading-spinner loading-sm" /> {submittingText}
+                </>
+            ) : (
+                idleText
+            )}
+        </Button>
+    );
+};
+
+export default SubmitButton;