feat(auth): migrate public authentication presentation

2026-10-11 20:50:14 +02:00
parent 27c54146ad
commit 8ad720da5d
18 changed files with 7595 additions and 127 deletions
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";

-import { Alert, Box, Button, Checkbox, Divider, FormControlLabel, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, Checkbox, Divider, FormControlLabel, TextField, Typography } from "@mui/material";

 import { useLocation, useNavigate } from "react-router-dom";

@@ -12,6 +12,7 @@ import TwoFactorChallenge from "../components/TwoFactorChallenge";
 import TurnstileWidget from "../components/TurnstileWidget";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
+import AuthPageFrame from "../layout/AuthPageFrame";

 type AuthConfig = {
  requireAuth: boolean;
@@ -31,6 +32,8 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
  const location = useLocation() as any;

  const [cfg, setCfg] = useState<AuthConfig | null>(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  const [configFailed, setConfigFailed] = useState(false);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
@@ -44,6 +47,10 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string; confirmPassword?: string }>({});
  const [registerMode, setRegisterMode] = useState(initialMode === "register");
  const [turnstileToken, setTurnstileToken] = useState("");
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const emailRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const confirmPasswordRef = useRef<HTMLInputElement>(null);

  const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

@@ -56,13 +63,18 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
    state: { from: contextPath, ...(Number.isSafeInteger(fromState.focusJobId) && fromState.focusJobId > 0 ? { focusJobId: fromState.focusJobId } : {}) },
  } : { replace: true };

-  useEffect(() => {
-    api
+  const loadAuthConfig = useCallback(() => {
+    setConfigLoading(true);
+    setConfigFailed(false);
+    return api
      .get<AuthConfig>("/auth/config")
      .then((r) => setCfg(r.data))
-      .catch(() => setCfg(null));
+      .catch(() => { setCfg(null); setConfigFailed(true); })
+      .finally(() => setConfigLoading(false));
  }, []);

+  useEffect(() => { void loadAuthConfig(); }, [loadAuthConfig]);
+
  async function completeLogin() {
    setAuthPersistencePreference(rememberMe ? "local" : "session");
    await api.get("/auth/me");
@@ -83,12 +95,16 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
    }

    setFieldErrors(errors);
+    if (errors.email) emailRef.current?.focus();
+    else if (errors.password) passwordRef.current?.focus();
+    else if (errors.confirmPassword) confirmPasswordRef.current?.focus();
    return Object.keys(errors).length === 0;
  }

  async function submit(mode: "login" | "register") {
    if (!validate(mode)) return;
    setLoading(true);
+    setSubmitError(null);
    setEmailNotVerified(false);
    setVerificationResent(false);
    try {
@@ -109,7 +125,7 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
      if (mode === "login" && e?.response?.data?.error === "email_not_verified") {
        setEmailNotVerified(true);
      } else {
-        toast(getApiErrorMessage(e, t("loginFailed")), "error");
+        setSubmitError(getApiErrorMessage(e, t("loginFailed")));
      }
    } finally {
      setLoading(false);
@@ -118,12 +134,13 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo

  async function resendVerification() {
    setResendingVerification(true);
+    setSubmitError(null);
    try {
      await api.post("/auth/resend-verification-email", { email });
      setVerificationResent(true);
      toast(t("verificationEmailResent"), "success");
    } catch (e: any) {
-      toast(getApiErrorMessage(e, t("verifyEmailFailed")), "error");
+      setSubmitError(getApiErrorMessage(e, t("verifyEmailFailed")));
    } finally {
      setResendingVerification(false);
    }
@@ -132,26 +149,11 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
  const allowReg = cfg?.allowRegistration ?? false;

  return (
-    <Box
-      component="main"
-      sx={{
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        p: 2,
-        background:
-          "radial-gradient(1200px 700px at 20% 0%, rgba(79,140,255,0.14), transparent 55%), radial-gradient(900px 600px at 80% 20%, rgba(245,158,11,0.10), transparent 55%)",
-      }}
-    >
-      <Paper sx={{ width: "min(520px, 100%)", p: 4, borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
-        <Typography component="h1" variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
-          {registerMode ? t("createAccount") : t("signInTitle")}
-        </Typography>
-        <Typography sx={{ color: "text.secondary", mb: 2 }}>
-          {cfg?.requireAuth ? t("authRequired") : t("authOptional")}
-        </Typography>
-
+    <AuthPageFrame title={registerMode ? t("createAccount") : t("signInTitle")} description={cfg ? (cfg.requireAuth ? t("authRequired") : t("authOptional")) : undefined}>
+        {configLoading ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary" sx={{ mb: 2 }}>{t("loading")}</Typography> : null}
+        {configFailed ? <Alert severity="error" sx={{ mb: 2 }} action={<Button type="button" color="inherit" size="small" onClick={() => void loadAuthConfig()}>{t("retry")}</Button>}>
+          {t("appErrorBody")}
+        </Alert> : null}
        {new URLSearchParams(location.search).has("sessionChanged") ? <Alert severity="info" sx={{ mb: 2 }}>{t("sessionChangedCleared")}</Alert> : null}

        {pendingToken ? (
@@ -167,6 +169,7 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
              onSubmit={(e) => { e.preventDefault(); void submit(registerMode ? "register" : "login"); }}
              sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
            >
+                {submitError ? <Alert severity="error">{submitError}</Alert> : null}
                {registerMode && cfg && !allowReg ? <Alert severity="info">{t("registrationUnavailable")}</Alert> : null}
                {cfg?.requireEmailVerification && emailNotVerified && (
                  <Alert
@@ -187,15 +190,17 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
                  onChange={(e) => { setEmail(e.target.value); setFieldErrors((f) => ({ ...f, email: undefined })); }}
                  autoComplete={registerMode ? "email" : "username"}
                  autoFocus
+                  inputRef={emailRef}
                  error={Boolean(fieldErrors.email)}
                  helperText={fieldErrors.email}
                  fullWidth
                />
                <TextField
-                  label={t("profileCurrentPassword")}
+                  label={registerMode ? t("profileNewPassword") : t("profileCurrentPassword")}
                  value={password}
                  onChange={(e) => { setPassword(e.target.value); setFieldErrors((f) => ({ ...f, password: undefined, confirmPassword: undefined })); }}
                  autoComplete={registerMode ? "new-password" : "current-password"}
+                  inputRef={passwordRef}
                  type="password"
                  error={Boolean(fieldErrors.password)}
                  helperText={fieldErrors.password || (registerMode ? t("passwordTooShort") : undefined)}
@@ -207,6 +212,7 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
                    value={confirmPassword}
                    onChange={(e) => { setConfirmPassword(e.target.value); setFieldErrors((f) => ({ ...f, confirmPassword: undefined })); }}
                    autoComplete="new-password"
+                    inputRef={confirmPasswordRef}
                    type="password"
                    error={Boolean(fieldErrors.confirmPassword)}
                    helperText={fieldErrors.confirmPassword}
@@ -251,16 +257,17 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
                      size="small"
                      disableRipple
                      disabled={loading}
-                      onClick={() => { if (initialMode === "register") navigate("/login"); else setRegisterMode((v) => !v); setFieldErrors({}); }}
-                      sx={{ px: 0, minWidth: 0, fontWeight: 700 }}
+                      onClick={() => { if (initialMode === "register") navigate("/login"); else setRegisterMode((v) => !v); setFieldErrors({}); setSubmitError(null); }}
+                      sx={{ px: 0, minWidth: 0, fontWeight: 700, maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" }}
                    >
                      {registerMode ? t("backToLogin") : t("createAccount")}
                    </Button>
                  )}
-                  <Button type="submit" variant="contained" disableRipple disabled={loading || (registerMode && cfg !== null && !allowReg) || Boolean(cfg?.turnstileEnabled && !turnstileToken)} sx={{ ml: "auto" }}>
+                  <Button type="submit" variant="contained" disableRipple disabled={loading || (registerMode && cfg !== null && !allowReg) || Boolean(cfg?.turnstileEnabled && !turnstileToken)} aria-busy={loading} sx={{ ml: "auto", maxWidth: "100%", whiteSpace: "normal", overflowWrap: "anywhere" }}>
                    {registerMode ? t("createAccount") : t("signInTitle")}
                  </Button>
                </Box>
+                {loading || resendingVerification ? <Typography role="status" aria-live="polite" variant="body2" color="text.secondary">{t("loading")}</Typography> : null}
            </Box>

            {!registerMode && (cfg?.googleEnabled || cfg?.microsoftEnabled) ? (
@@ -274,7 +281,6 @@ export default function LoginPage({ initialMode = "login" }: { initialMode?: "lo
            ) : null}
          </>
        )}
-      </Paper>
-    </Box>
+    </AuthPageFrame>
  );
 }