+
+
+ );
+}
diff --git a/src/app/auth/components/FormElements.tsx b/src/app/auth/components/FormElements.tsx
new file mode 100644
index 0000000..0a350c7
--- /dev/null
+++ b/src/app/auth/components/FormElements.tsx
@@ -0,0 +1,135 @@
+import { createSignal, onCleanup, onMount, type JSX } from 'solid-js';
+import { PASSWORD_MAX_LENGTH, calcStrength, meetsPasswordPolicy } from '@/app/auth/lib/password';
+
+function WarningCircle(props: { size: number; color: string }) {
+ return (
+
+ );
+}
+
+function Eye(props: { size: number; color: string }) {
+ return (
+
+ );
+}
+
+function EyeSlash(props: { size: number; color: string }) {
+ return (
+
+ );
+}
+
+export function ErrorMessage(props: { children: JSX.Element; id?: string }) {
+ let ref: HTMLDivElement | undefined;
+
+ onMount(() => {
+ const timeoutId = window.setTimeout(() => ref?.focus(), 0);
+ onCleanup(() => window.clearTimeout(timeoutId));
+ });
+
+ return (
+
+ 
+ props.onChange(e.currentTarget.value)}
+ />
+
+
+
+ );
+}
+
+export function SubmitButton(props: {
+ loading: boolean;
+ disabled?: boolean;
+ loadingText?: string;
+ children: JSX.Element;
+}) {
+ return (
+
+ );
+}
+
+interface PasswordFieldProps {
+ id: string;
+ label: string;
+ value: string;
+ onChange: (v: string) => void;
+ placeholder?: string;
+ autoComplete?: string;
+ autofocus?: boolean;
+ hasError?: boolean;
+ describedBy?: string;
+ disabled?: boolean;
+ maxLength?: number;
+}
+
+export function PasswordField(props: PasswordFieldProps) {
+ const [visible, setVisible] = createSignal(false);
+
+ return (
+
+
+
+ );
+}
+
+const STRENGTH_LABELS = ['', 'Weak', 'Fair', 'Strong', 'Very strong'];
+
+export function StrengthMeter(props: { password: string }) {
+ if (!props.password) return null;
+ const score = calcStrength(props.password);
+ const label = STRENGTH_LABELS[score] || '';
+ const color = score <= 1 ? 'var(--danger)' : score === 2 ? 'var(--warn)' : 'var(--success)';
+
+ return (
+
+ props.onChange(e.currentTarget.value)}
+ autofocus={props.autofocus}
+ class={props.hasError ? 'input-error' : ''}
+ aria-invalid={props.hasError}
+ aria-describedby={props.describedBy}
+ disabled={props.disabled}
+ maxLength={props.maxLength ?? PASSWORD_MAX_LENGTH}
+ />
+
+
+
+
+ );
+}
+
+export { meetsPasswordPolicy, calcStrength };
diff --git a/src/app/auth/components/PinCodeInput.tsx b/src/app/auth/components/PinCodeInput.tsx
new file mode 100644
index 0000000..bae79f7
--- /dev/null
+++ b/src/app/auth/components/PinCodeInput.tsx
@@ -0,0 +1,87 @@
+import { For } from 'solid-js';
+
+interface PinCodeInputProps {
+ id: string;
+ label: string;
+ value: string;
+ length?: number;
+ disabled?: boolean;
+ autofocus?: boolean;
+ onChange: (value: string) => void;
+ onComplete?: (value: string) => void;
+}
+
+export function PinCodeInput(props: PinCodeInputProps) {
+ const length = () => props.length ?? 6;
+ const indexes = () => Array.from({ length: length() }, (_, i) => i);
+ const digits = () => props.value.padEnd(length()).slice(0, length()).split('');
+ const inputs: HTMLInputElement[] = [];
+
+ function commit(next: string[]) {
+ const value = next.join('').slice(0, length());
+ props.onChange(value);
+ if (value.length === length()) props.onComplete?.(value);
+ }
+
+ function setFrom(index: number, raw: string) {
+ const values = digits();
+ const chars = raw.replace(/\D/g, '').slice(0, length() - index).split('');
+ if (chars.length === 0) {
+ values[index] = '';
+ commit(values);
+ return;
+ }
+
+ chars.forEach((char, offset) => { values[index + offset] = char; });
+ commit(values);
+ const nextIndex = Math.min(index + chars.length, length() - 1);
+ inputs[nextIndex]?.focus();
+ }
+
+ function handleKeyDown(index: number, e: KeyboardEvent) {
+ if (e.key !== 'Backspace') return;
+ const values = digits();
+ if (values[index]) {
+ values[index] = '';
+ commit(values);
+ return;
+ }
+
+ if (index > 0) {
+ e.preventDefault();
+ values[index - 1] = '';
+ commit(values);
+ inputs[index - 1]?.focus();
+ }
+ }
+
+ return (
+
+
+
+ {label}
+
+
+
+ );
+}
diff --git a/src/app/auth/hooks/useCaptcha.ts b/src/app/auth/hooks/useCaptcha.ts
new file mode 100644
index 0000000..1c2547b
--- /dev/null
+++ b/src/app/auth/hooks/useCaptcha.ts
@@ -0,0 +1,46 @@
+import { createSignal, onCleanup, onMount } from 'solid-js';
+import { AuthService } from '@/client';
+import type { ApiResponse_CaptchaResponse } from '@/client';
+
+export function useCaptcha() {
+ const [captcha, setCaptcha] = createSignal({ image: '', rsaKey: null as string | null });
+ const [captchaError, setCaptchaError] = createSignal('');
+ const [captchaLoading, setCaptchaLoading] = createSignal(false);
+ let requestId = 0;
+ let disposed = false;
+
+ const refresh = async (): Promise
+ {(index) => (
+ { inputs[index] = el; }}
+ id={index === 0 ? props.id : undefined}
+ class="pin-code-input"
+ type="text"
+ inputmode="numeric"
+ pattern="[0-9]*"
+ autocomplete={index === 0 ? 'one-time-code' : 'off'}
+ value={digits()[index]}
+ maxlength={1}
+ disabled={props.disabled}
+ autofocus={props.autofocus && index === 0}
+ aria-label={`Digit ${index + 1} of ${length()}`}
+ onInput={(e) => setFrom(index, e.currentTarget.value)}
+ onKeyDown={(e) => handleKeyDown(index, e)}
+ onPaste={(e) => {
+ e.preventDefault();
+ setFrom(index, e.clipboardData?.getData('text') ?? '');
+ }}
+ />
+ )}
+
+
+
+
+
+ }
+ >
+ Email Sent
++ If {email() || 'the email address'} is registered, you will receive a password reset email. +
++ Please check your inbox and spam folder. The link is valid for 1 hour. +
+
+
+
+
+
+
+
+ {error() || captchaError()} }
+
+
+ Register
+Enter your email to receive a verification code.
+ + {(error() || captchaError()) &&
+
+
+
+
+ or
+
+
+
+
+
+
+
+ Invalid Link
+This password reset link is invalid or has expired. Please request a new one.
+ + + + +
+
+
+ Password Reset
++ Your password has been successfully reset. Please sign in with your new password. +
+ + + +