@johnnyboy11234/esg-idea-contest 0.2.2 → 0.2.3

package/frontend/src/app/session.ts

@@ -1,23 +1,20 @@
-import { useQuery, type QueryClient } from '@tanstack/react-query';
-import type { DataRouter } from 'react-router';
-import { ApiError, apiFetch } from '@/shared/api';
-import { findRoute } from './access';
-import type { Role } from './routes';
-
-/** GET /auth/me body (docs/API/response-bodies.md); `email` is null for Admins. */
-export interface Me {
-  empNo: string;
-  name: string;
-  email: string | null;
-  role: Role;
-}
+import { useQuery, type QueryClient } from "@tanstack/react-query";
+import type { DataRouter } from "react-router";
+import { ApiError, apiFetch } from "@/shared/api";
+import { findRoute } from "./access";
+import type { Me } from "@/features/auth/login";
+
+export type { Me };
 
-export const meKey = ['me'] as const;
+export const meKey = ["me"] as const;
 
 /** A 401 means visitor → null (Frontend.md §6.3 rule 1). */
 export async function fetchMe(signal?: AbortSignal): Promise<Me | null> {
   try {
-    const res = await apiFetch('/auth/me', { signal, allowUnauthenticated: true });
+    const res = await apiFetch("/auth/me", {
+      signal,
+      allowUnauthenticated: true,
+    });
     return (await res.json()) as Me;
   } catch (e) {
     if (e instanceof ApiError && e.status === 401) return null;
@@ -25,24 +22,58 @@ export async function fetchMe(signal?: AbortSignal): Promise<Me | null> {
   }
 }
 
+/**
+ * Why `me` became null. The route gate redirects a visitor on a protected route to `/login?next=…`
+ * in the same render that clears `me`, racing the explicit navigation of the code that cleared it.
+ * Recording the reason lets the gate send the same destination, so the race has one outcome.
+ */
+let leaving: "signedOut" | "sessionEnded" | null = null;
+export const leavingReason = () => leaving;
+
+/**
+ * A new identity (login) or none (logout): nothing cached for the previous one may survive.
+ * `me` itself is kept as a query so the observers of the route gate see the new value.
+ */
+export function replaceIdentity(client: QueryClient, me: Me | null): void {
+  leaving = me === null ? "signedOut" : null;
+  client.removeQueries({ predicate: (q) => q.queryKey[0] !== meKey[0] });
+  client.setQueryData(meKey, me);
+}
+
 /** Router state a 401 redirect leaves for the login page to show "your session ended" (Frontend.md §5.2). */
 export interface SessionEndedState {
-  notice: 'sessionEnded';
+  notice: "sessionEnded";
+}
+
+/** Router state `/register` leaves for the login page to confirm the account (not in the URL, Frontend.md §6). */
+export interface RegisteredState {
+  notice: "registered";
 }
 
 /**
  * Global 401 (Frontend.md §5.2): forget the user and go to `/login?next=<current>`.
  * Already on a public route (login, register) there is nothing to leave, so only `me` is cleared.
  */
-export function handleSessionEnded(client: QueryClient, router: DataRouter): void {
+export function handleSessionEnded(
+  client: QueryClient,
+  router: DataRouter,
+): void {
+  leaving = "sessionEnded";
   client.setQueryData(meKey, null);
   const { pathname, search } = router.state.location;
-  if (findRoute(pathname)?.access === 'public') return;
-  const state: SessionEndedState = { notice: 'sessionEnded' };
-  void router.navigate(`/login?next=${encodeURIComponent(pathname + search)}`, { replace: true, state });
+  if (findRoute(pathname)?.access === "public") return;
+  const state: SessionEndedState = { notice: "sessionEnded" };
+  void router.navigate(`/login?next=${encodeURIComponent(pathname + search)}`, {
+    replace: true,
+    state,
+  });
 }
 
 export function useMe() {
-  return useQuery({ queryKey: meKey, queryFn: ({ signal }) => fetchMe(signal), retry: false, staleTime: 60_000 });
+  return useQuery({
+    queryKey: meKey,
+    queryFn: ({ signal }) => fetchMe(signal),
+    retry: false,
+    staleTime: 60_000,
+  });
 }
-

package/frontend/src/features/auth/LoginForm.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState, type FormEvent, type Ref } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { ApiError } from "@/shared/api";
+import { Button } from "@/shared/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/shared/ui/field";
+import { Input } from "@/shared/ui/input";
+import { login, type Me } from "./login";
+
+/**
+ * The login form. Every credential failure is the same 401 `INVALID_CREDENTIALS` (PRD §6.5), so
+ * it is one form-level message, never attached to a field. Focus moves to the message.
+ */
+export function LoginForm({
+  onLoggedIn,
+  notice,
+  heading,
+}: {
+  onLoggedIn: (me: Me) => void;
+  notice?: string;
+  heading?: Ref<HTMLHeadingElement>;
+}) {
+  const { t } = useTranslation();
+  const [empNo, setEmpNo] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [errorKey, setErrorKey] = useState(0);
+  const [pending, setPending] = useState(false);
+  const alert = useRef<HTMLParagraphElement>(null);
+
+  // after the message is in the DOM (WCAG 3.3.1)
+  useEffect(() => {
+    if (errorKey > 0) alert.current?.focus();
+  }, [errorKey]);
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pending) return;
+    setPending(true);
+    setError(null);
+    try {
+      onLoggedIn(await login({ empNo: empNo.trim(), password }));
+    } catch (err) {
+      const apiErr =
+        err instanceof ApiError
+          ? err
+          : new ApiError({ status: 0, code: "UNKNOWN" });
+      setError(
+        t(`errors.${apiErr.code}`) +
+          (apiErr.requestId
+            ? ` ${t("common.requestId", { id: apiErr.requestId })}`
+            : ""),
+      );
+      setErrorKey((k) => k + 1);
+      setPassword("");
+    } finally {
+      setPending(false);
+    }
+  };
+
+  return (
+    <form
+      className="flex w-full max-w-xs flex-col gap-6"
+      onSubmit={(e) => void onSubmit(e)}
+    >
+      <FieldGroup>
+        <div className="flex flex-col items-center gap-1 text-center">
+          <h1
+            ref={heading}
+            tabIndex={-1}
+            className="text-2xl font-bold outline-none"
+          >
+            {t("pages.login.title")}
+          </h1>
+          <p className="text-sm text-balance text-muted-foreground">
+            {t("pages.login.description")}
+          </p>
+        </div>
+        {notice && (
+          <p
+            role="status"
+            className="rounded-md border border-primary p-3 text-sm"
+          >
+            {notice}
+          </p>
+        )}
+        {error !== null && (
+          <p
+            key={errorKey}
+            ref={alert}
+            role="alert"
+            tabIndex={-1}
+            className="rounded-md border border-destructive p-3 text-sm text-destructive outline-none"
+          >
+            {error}
+          </p>
+        )}
+        <Field>
+          <FieldLabel htmlFor="empNo">{t("fields.empNo")}</FieldLabel>
+          <Input
+            id="empNo"
+            name="empNo"
+            autoComplete="username"
+            inputMode="numeric"
+            required
+            value={empNo}
+            onChange={(e) => setEmpNo(e.target.value)}
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="password">{t("fields.password")}</FieldLabel>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </Field>
+        <Field>
+          <Button
+            type="submit"
+            disabled={pending}
+            aria-busy={pending || undefined}
+          >
+            {pending ? t("pages.login.submitting") : t("nav.signIn")}
+          </Button>
+          <FieldDescription className="text-center">
+            {t("pages.login.noAccount")}{" "}
+            <Link to="/register" className="underline underline-offset-4">
+              {t("nav.register")}
+            </Link>
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+}

package/frontend/src/features/auth/RegisterForm.tsx

@@ -0,0 +1,211 @@
+import { useRef, useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { Button } from "@/shared/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/shared/ui/field";
+import { Input } from "@/shared/ui/input";
+import {
+  mapServerError,
+  precheck,
+  register,
+  REGISTER_FIELDS,
+  type FieldProblems,
+  type RegisterField,
+  type RegisterResult,
+} from "./register";
+
+type Values = Record<RegisterField, string>;
+const EMPTY: Values = {
+  empNo: "",
+  name: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+};
+
+const FIELD_ATTRS: Record<
+  RegisterField,
+  {
+    type?: string;
+    autoComplete: string;
+    maxLength?: number;
+    inputMode?: "numeric";
+  }
+> = {
+  empNo: { autoComplete: "username", inputMode: "numeric" },
+  name: { autoComplete: "name" },
+  email: { type: "email", autoComplete: "email" },
+  password: { type: "password", autoComplete: "new-password" },
+  confirmPassword: { type: "password", autoComplete: "new-password" },
+};
+
+const HINTS: Partial<Record<RegisterField, string>> = {
+  empNo: "pages.register.empNoHint",
+  email: "pages.register.emailHint",
+  password: "pages.register.passwordHint",
+};
+
+/** The register form: format pre-check, error summary with focus, server errors mapped to fields (Frontend.md §5.6, §8). */
+export function RegisterForm({
+  onRegistered,
+}: {
+  onRegistered: (r: RegisterResult) => void;
+}) {
+  const { t, i18n } = useTranslation();
+  const [values, setValues] = useState<Values>(EMPTY);
+  const [problems, setProblems] = useState<FieldProblems>({});
+  const [formError, setFormError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const summary = useRef<HTMLDivElement>(null);
+  const form = useRef<HTMLFormElement>(null);
+  const [summaryKey, setSummaryKey] = useState(0);
+
+  const message = (code: string): string => {
+    if (code === "PASSWORD_MISMATCH") return t("pages.register.mismatch");
+    return i18n.exists(`errors.${code}`)
+      ? t(`errors.${code}`)
+      : t("errors.VALIDATION_FAILED");
+  };
+
+  const fail = (p: FieldProblems, rest: string | null) => {
+    setProblems(p);
+    setFormError(rest);
+    setSummaryKey((k) => k + 1);
+    // wait for the summary to render, then move focus to it (WCAG 3.3.1)
+    queueMicrotask(() => summary.current?.focus());
+  };
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pending) return;
+    const { values: body, problems: local } = precheck(values);
+    if (Object.keys(local).length > 0) {
+      fail(local, null);
+      return;
+    }
+    setPending(true);
+    setProblems({});
+    setFormError(null);
+    try {
+      onRegistered(await register(body));
+    } catch (err) {
+      const { problems: p, rest } = mapServerError(err);
+      fail(
+        p,
+        rest
+          ? t(`errors.${rest.code}`) +
+              (rest.requestId
+                ? ` ${t("common.requestId", { id: rest.requestId })}`
+                : "")
+          : null,
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const focusField =
+    (f: RegisterField) => (e: { preventDefault: () => void }) => {
+      e.preventDefault();
+      form.current?.querySelector<HTMLInputElement>(`#${f}`)?.focus();
+    };
+
+  const listed = REGISTER_FIELDS.filter((f) => problems[f] !== undefined);
+  const hasSummary = listed.length > 0 || formError !== null;
+
+  return (
+    <form ref={form} onSubmit={(e) => void onSubmit(e)} noValidate>
+      <FieldGroup>
+        {hasSummary && (
+          <div
+            key={summaryKey}
+            ref={summary}
+            role="alert"
+            tabIndex={-1}
+            className="rounded-md border border-destructive p-3 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-destructive/40"
+          >
+            <p className="font-medium text-destructive">
+              {t("pages.register.summaryTitle")}
+            </p>
+            {formError !== null && <p>{formError}</p>}
+            {listed.length > 0 && (
+              <ul className="mt-1 list-disc pl-5">
+                {listed.map((f) => (
+                  <li key={f}>
+                    <a
+                      href={`#${f}`}
+                      onClick={focusField(f)}
+                      className="underline underline-offset-4"
+                    >
+                      {t(`fields.${f}`)}: {message(problems[f]!)}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+        {REGISTER_FIELDS.map((f) => {
+          const a = FIELD_ATTRS[f];
+          const problem = problems[f];
+          const hint = HINTS[f];
+          const describedBy =
+            [hint && `${f}-hint`, problem && `${f}-error`]
+              .filter(Boolean)
+              .join(" ") || undefined;
+          return (
+            <Field key={f} data-invalid={problem ? true : undefined}>
+              <FieldLabel htmlFor={f}>{t(`fields.${f}`)}</FieldLabel>
+              <Input
+                id={f}
+                name={f}
+                type={a.type}
+                autoComplete={a.autoComplete}
+                inputMode={a.inputMode}
+                required
+                aria-required="true"
+                aria-invalid={problem ? true : undefined}
+                aria-describedby={describedBy}
+                value={values[f]}
+                onChange={(e) =>
+                  setValues((v) => ({ ...v, [f]: e.target.value }))
+                }
+              />
+              {hint && (
+                <FieldDescription id={`${f}-hint`}>{t(hint)}</FieldDescription>
+              )}
+              {problem && (
+                <FieldError id={`${f}-error`} role={undefined}>
+                  {message(problem)}
+                </FieldError>
+              )}
+            </Field>
+          );
+        })}
+        <Field>
+          <Button
+            type="submit"
+            disabled={pending}
+            aria-busy={pending || undefined}
+          >
+            {pending
+              ? t("pages.register.submitting")
+              : t("pages.register.submit")}
+          </Button>
+          <FieldDescription className="text-center">
+            {t("pages.register.haveAccount")}{" "}
+            <Link to="/login" className="underline underline-offset-4">
+              {t("nav.signIn")}
+            </Link>
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+}

package/frontend/src/features/auth/login.ts

@@ -0,0 +1,23 @@
+import { apiFetch } from "@/shared/api";
+
+/** GET /auth/me and POST /auth/login body (docs/API/response-bodies.md); `email` is null for Admins. */
+export interface Me {
+  empNo: string;
+  name: string;
+  email: string | null;
+  role: "USER" | "ADMIN";
+}
+
+/** POST /auth/login. Sets the session cookie; the body is the same shape as `GET /auth/me`. */
+export async function login(body: {
+  empNo: string;
+  password: string;
+}): Promise<Me> {
+  const res = await apiFetch("/auth/login", { method: "POST", body });
+  return (await res.json()) as Me;
+}
+
+/** POST /auth/logout: idempotent 204; `apiFetch` drops the session-bound CSRF token afterwards. */
+export async function logout(): Promise<void> {
+  await apiFetch("/auth/logout", { method: "POST" });
+}

package/frontend/src/features/auth/register.ts

@@ -0,0 +1,105 @@
+import { ApiError, apiFetch } from "@/shared/api";
+import { checkEmail, checkName } from "@/shared/text";
+
+export const REGISTER_FIELDS = [
+  "empNo",
+  "name",
+  "email",
+  "password",
+  "confirmPassword",
+] as const;
+export type RegisterField = (typeof REGISTER_FIELDS)[number];
+
+export interface RegisterValues {
+  empNo: string;
+  name: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+/** A field problem: `code` is an `errors.<code>` key, or `PASSWORD_MISMATCH` (client only). */
+export type FieldProblems = Partial<Record<RegisterField, string>>;
+
+const NAME_MAX = 50;
+
+/**
+ * Same checks, same order as the server for the format step (PRD §6.3, §6.2),
+ * one problem per field. The password policy is the server's (and F1b-01's) job;
+ * only "required" and "matches the confirmation" are checked here.
+ */
+export function precheck(v: RegisterValues): {
+  values: Omit<RegisterValues, "confirmPassword">;
+  problems: FieldProblems;
+} {
+  const problems: FieldProblems = {};
+  if (v.empNo.trim() === "") problems.empNo = "REQUIRED";
+  else if (!/^[0-9]{6}$/.test(v.empNo)) problems.empNo = "INVALID_FORMAT";
+
+  const name = checkName(v.name, NAME_MAX);
+  if (name.problem) problems.name = name.problem;
+
+  const email = checkEmail(v.email);
+  if (email.problem) problems.email = email.problem;
+
+  if (v.password === "") problems.password = "REQUIRED";
+  if (v.confirmPassword !== v.password)
+    problems.confirmPassword = "PASSWORD_MISMATCH";
+
+  return {
+    values: {
+      empNo: v.empNo,
+      name: name.cleaned,
+      email: email.cleaned,
+      password: v.password,
+    },
+    problems,
+  };
+}
+
+export interface RegisterResult {
+  empNo: string;
+  name: string;
+  email: string;
+}
+
+/** POST /auth/register. Creates no session; the caller sends the user to /login. */
+export async function register(body: {
+  empNo: string;
+  name: string;
+  email: string;
+  password: string;
+}): Promise<RegisterResult> {
+  const res = await apiFetch("/auth/register", { method: "POST", body });
+  return (await res.json()) as RegisterResult;
+}
+
+const isField = (f: string): f is RegisterField =>
+  (REGISTER_FIELDS as readonly string[]).includes(f);
+
+/**
+ * Maps a failed register call to field problems. A 409 names its field, a 422 lists
+ * `errors[]`. `rest` is what has no field of its own (CSRF, 503, …) and is shown
+ * as a form-level message.
+ */
+export function mapServerError(e: unknown): {
+  problems: FieldProblems;
+  rest: ApiError | null;
+} {
+  if (!(e instanceof ApiError))
+    return { problems: {}, rest: new ApiError({ status: 0, code: "UNKNOWN" }) };
+  if (e.code === "EMP_NO_TAKEN")
+    return { problems: { empNo: "EMP_NO_TAKEN" }, rest: null };
+  if (e.code === "EMAIL_TAKEN")
+    return { problems: { email: "EMAIL_TAKEN" }, rest: null };
+  const problems: FieldProblems = {};
+  for (const fe of e.errors) {
+    // the first error of a field wins; a password lists every violated rule, the top code covers them
+    if (isField(fe.field) && problems[fe.field] === undefined)
+      problems[fe.field] =
+        fe.field === "password" && e.code === "PASSWORD_POLICY"
+          ? "PASSWORD_POLICY"
+          : fe.code;
+  }
+  return { problems, rest: Object.keys(problems).length > 0 ? null : e };
+}

package/frontend/src/shared/i18n/locales/en.ts

@@ -21,6 +21,7 @@ export const en = {
     main: 'Main navigation',
     skip: 'Skip to content',
     administrator: 'Administrator',
+    signOut: 'Sign out',
     signIn: 'Sign in',
     register: 'Register',
   },
@@ -56,8 +57,20 @@ export const en = {
     leaderEmpNo: 'Leader employee ID',
   },
   pages: {
-    login: { title: 'Sign in to your account', description: 'Enter your employee ID and password.', noAccount: 'No account yet?', panelTitle: 'ESG Idea Contest', panelBody: 'Register, form a team and submit your Idea.' },
-    register: { title: 'Create an account', description: 'Enter your details below to register.', passwordHint: 'At least 8 characters; see the rules shown while you type.', haveAccount: 'Already registered?' },
+    login: { title: 'Sign in to your account', description: 'Enter your employee ID and password.', noAccount: 'No account yet?', panelTitle: 'ESG Idea Contest', panelBody: 'Register, form a team and submit your Idea.', submitting: 'Signing in…', sessionEnded: 'Your session has ended. Please sign in again.' },
+    register: {
+      title: 'Create an account',
+      description: 'Enter your details below to register.',
+      empNoHint: '6 digits.',
+      emailHint: 'Letters, digits and symbols only, no spaces.',
+      passwordHint: '12–64 printable ASCII characters, with at least 3 of: upper case, lower case, digit, symbol.',
+      mismatch: 'The passwords do not match.',
+      haveAccount: 'Already registered?',
+      submit: 'Create account',
+      submitting: 'Creating account…',
+      summaryTitle: 'Please fix the following',
+      success: 'Your account was created. Sign in to continue.',
+    },
     ideaList: { search: 'Search', apply: 'Apply filters', create: 'Create an Idea', empty: 'No Ideas yet.' },
     ideaForm: { slidesHint: 'PDF or PPTX, up to 5 MiB.' },
     ideaCreate: { title: 'Create an Idea', submit: 'Submit Idea' },

package/frontend/src/shared/i18n/locales/zh-TW.ts

@@ -18,6 +18,7 @@ export const zhTW: Dictionary = {
     main: '主要導覽',
     skip: '跳到主要內容',
     administrator: '管理員',
+    signOut: '登出',
     signIn: '登入',
     register: '註冊',
   },
@@ -53,8 +54,20 @@ export const zhTW: Dictionary = {
     leaderEmpNo: '組長員工編號',
   },
   pages: {
-    login: { title: '登入您的帳號', description: '請輸入員工編號與密碼。', noAccount: '還沒有帳號？', panelTitle: 'ESG 創意競賽', panelBody: '註冊、組隊並提交您的創意。' },
-    register: { title: '建立帳號', description: '請在下方輸入資料以完成註冊。', passwordHint: '至少 8 個字元，輸入時會顯示規則檢查。', haveAccount: '已經註冊？' },
+    login: { title: '登入您的帳號', description: '請輸入員工編號與密碼。', noAccount: '還沒有帳號？', panelTitle: 'ESG 創意競賽', panelBody: '註冊、組隊並提交您的創意。', submitting: '登入中…', sessionEnded: '您的登入已結束，請重新登入。' },
+    register: {
+      title: '建立帳號',
+      description: '請在下方輸入資料以完成註冊。',
+      empNoHint: '6 位數字。',
+      emailHint: '僅限英數字與符號，不可包含空白。',
+      passwordHint: '12–64 個可列印 ASCII 字元，且至少包含大寫、小寫、數字、符號其中 3 類。',
+      mismatch: '兩次輸入的密碼不一致。',
+      haveAccount: '已經註冊？',
+      submit: '建立帳號',
+      submitting: '建立中…',
+      summaryTitle: '請修正以下項目',
+      success: '帳號已建立，請登入。',
+    },
     ideaList: { search: '搜尋', apply: '套用篩選', create: '建立提案', empty: '目前沒有提案。' },
     ideaForm: { slidesHint: 'PDF 或 PPTX，最大 5 MiB。' },
     ideaCreate: { title: '建立提案', submit: '送出提案' },

package/frontend/src/shared/text/index.ts

@@ -91,3 +91,23 @@ export function checkSummary(s: string, max: number): CheckResult {
   const cleaned = cleanSummary(s);
   return { cleaned, problem: check(cleaned, max, false) };
 }
+
+export type EmailProblem = '' | 'REQUIRED' | 'INVALID_FORMAT' | 'OUT_OF_RANGE';
+
+const MAX_EMAIL = 254;
+
+/**
+ * Pre-check of PRD §6.3 (the server is the judge): trim, printable ASCII only
+ * (U+0021–U+007E, so no whitespace anywhere), exactly one `@` with non-empty
+ * sides, at most 254 characters. `cleaned` is lower-cased as the server stores it.
+ * First problem in report order: REQUIRED → INVALID_FORMAT → OUT_OF_RANGE.
+ */
+export function checkEmail(s: string): { cleaned: string; problem: EmailProblem } {
+  const e = trimWhitespace(s);
+  if (e === '') return { cleaned: '', problem: 'REQUIRED' };
+  if (!/^[\u0021-\u007e]+$/.test(e)) return { cleaned: e, problem: 'INVALID_FORMAT' };
+  const at = e.indexOf('@');
+  if (at <= 0 || at === e.length - 1 || e.indexOf('@', at + 1) !== -1) return { cleaned: e, problem: 'INVALID_FORMAT' };
+  if (e.length > MAX_EMAIL) return { cleaned: e, problem: 'OUT_OF_RANGE' };
+  return { cleaned: e.toLowerCase(), problem: '' };
+}