feat: implement frontend login functionality with form handling and error management

apps/frontend/app/components/Form/Button.tsx

@@ -0,0 +1,36 @@
+export type SubmitButtonProps = {
+  loading?: boolean;
+  label?:
+    | {
+        default: string;
+        loading: string;
+      }
+    | string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={loading}
+      style={{
+        padding: '10px 14px',
+        borderRadius: 6,
+        border: 'none',
+        backgroundColor: 'var(--iris-9)',
+        color: 'white',
+      }}
+      {...props}
+    >
+      {loading ? (typeof label === 'string' ? 'Submitting…' : label?.loading ?? 'Submitting…') : typeof label === 'string' ? label : label?.default ?? 'Submit'}
+    </button>
+  );
+}
+
+export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
+      {props.children ?? 'Reset'}
+    </button>
+  );
+}

apps/frontend/app/components/Form/TextField.tsx

@@ -0,0 +1,93 @@
+import type { AnyFieldMeta } from '@tanstack/react-form';
+import { LucideEye, LucideEyeClosed } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+
+export type TextFieldProps = {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  labelDivProps?: React.HTMLAttributes<HTMLDivElement>;
+} & React.InputHTMLAttributes<HTMLInputElement> & {
+    type?: 'password';
+    showPasswordToggle?: boolean;
+  };
+
+export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, ...rest }: TextFieldProps) {
+  const id = useId();
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const handlePasswordVisibilitySet = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, visible: boolean) => {
+      if (rest.type !== 'password') return;
+      e.preventDefault();
+      setIsPasswordVisible(() => visible);
+    },
+    [rest.type]
+  );
+  return (
+    <label htmlFor={id} style={{ display: 'block', marginBottom: 8 }} {...labelProps}>
+      {label && (
+        <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6 }} {...labelDivProps}>
+          {label}
+        </div>
+      )}
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          {...rest}
+          type={rest.type === 'password' ? (isPasswordVisible && showPasswordToggle ? 'text' : 'password') : rest.type}
+          id={id}
+          value={value}
+          onChange={onChange}
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            borderRadius: 6,
+            border: '1px solid var(--gray-5)',
+            ...rest?.style,
+          }}
+        />
+
+        <div
+          style={{ position: 'absolute', right: 12 }}
+          onMouseDown={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onMouseUp={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onMouseLeave={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onTouchStart={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onTouchEnd={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+        >
+          {showPasswordToggle ? isPasswordVisible ? <LucideEye size={16} /> : <LucideEyeClosed size={16} /> : null}
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export type TextFieldErrorMessageProps = AnyFieldMeta & {
+  errorMessage?: string;
+};
+
+export function TextFieldErrorMessage({ isValid, errors, errorMessage }: TextFieldErrorMessageProps) {
+  return (
+    !isValid && (
+      <div
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          color: 'var(--red-9)',
+        }}
+      >
+        {errorMessage ?? errors?.reduce((msg, err) => msg + err.message + ' ', '')}
+      </div>
+    )
+  );
+}