prettier

2026-10-11 17:56:37 +08:00 · 2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
@@ -1,213 +1,235 @@
-"use client"
+'use client';

-import {useEffect, useRef, useState} from "react"
-import {useMutation, useQuery} from "@tanstack/react-query"
-import {useSearchParams} from "next/navigation"
-import {EyeIcon, EyeOffIcon} from "lucide-react"
-import {toast} from "sonner"
-import Link from "next/link"
+import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'next/navigation';
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+import { toast } from 'sonner';
+import Link from 'next/link';

-import {useAuth} from "@/components/providers/auth-provider"
-import {Button} from "@/components/ui/button"
-import {Input} from "@/components/ui/input"
-import {Separator} from "@/components/ui/separator"
-import {Spinner} from "@/components/ui/spinner"
-import {Field, FieldGroup, FieldLabel} from "@/components/ui/field"
-import {CapWidget} from "@/components/auth/cap-widget"
-import {AuthHeading} from "@/components/auth/auth-shell"
-import {OTPForm} from "./otp-form"
-import {AuthService} from "@/lib/services/auth"
-import {ConfigService} from "@/lib/services/config"
-import type {LoginRequest} from "@/lib/services/auth/types"
-import {safeRedirectTarget} from "@/lib/utils"
+import { useAuth } from '@/components/providers/auth-provider';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Spinner } from '@/components/ui/spinner';
+import { Field, FieldGroup, FieldLabel } from '@/components/ui/field';
+import { CapWidget } from '@/components/auth/cap-widget';
+import { AuthHeading } from '@/components/auth/auth-shell';
+import { OTPForm } from './otp-form';
+import { AuthService } from '@/lib/services/auth';
+import { ConfigService } from '@/lib/services/config';
+import type { LoginRequest } from '@/lib/services/auth/types';
+import { safeRedirectTarget } from '@/lib/utils';

-function persistRedirectTarget(searchParams: ReturnType<typeof useSearchParams>) {
-  const callbackUrl = searchParams.get("callbackUrl")
-  if (callbackUrl && typeof window !== "undefined") {
-    sessionStorage.setItem("redirect_after_login", safeRedirectTarget(callbackUrl))
+function persistRedirectTarget(
+  searchParams: ReturnType<typeof useSearchParams>,
+) {
+  const callbackUrl = searchParams.get('callbackUrl');
+  if (callbackUrl && typeof window !== 'undefined') {
+    sessionStorage.setItem(
+      'redirect_after_login',
+      safeRedirectTarget(callbackUrl),
+    );
  }
 }

-
 function configBool(value: string | undefined, fallback: boolean) {
-  if (value === undefined) return fallback
-  return value === "true"
+  if (value === undefined) return fallback;
+  return value === 'true';
 }

-export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: boolean) => void }) {
-  const searchParams = useSearchParams()
-  const { setUser } = useAuth()
-  const [username, setUsername] = useState("")
-  const [password, setPassword] = useState("")
-  const [showPassword, setShowPassword] = useState(false)
-  const [code, setCode] = useState("")
-  const [showLoginCodeInput, setShowLoginCodeInput] = useState(false)
-  const [loginCooldown, setLoginCooldown] = useState(0)
-  const [errorMessage, setErrorMessage] = useState("")
-  const [loginCodeTip, setLoginCodeTip] = useState<React.ReactNode>(null)
+export function LoginForm({
+  onOTPStateChange,
+}: {
+  onOTPStateChange?: (show: boolean) => void;
+}) {
+  const searchParams = useSearchParams();
+  const { setUser } = useAuth();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [code, setCode] = useState('');
+  const [showLoginCodeInput, setShowLoginCodeInput] = useState(false);
+  const [loginCooldown, setLoginCooldown] = useState(0);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [loginCodeTip, setLoginCodeTip] = useState<React.ReactNode>(null);

  useEffect(() => {
-    onOTPStateChange?.(showLoginCodeInput)
-  }, [showLoginCodeInput, onOTPStateChange])
+    onOTPStateChange?.(showLoginCodeInput);
+  }, [showLoginCodeInput, onOTPStateChange]);

  useEffect(() => {
    if (loginCooldown > 0) {
-      const timer = setTimeout(() => setLoginCooldown(loginCooldown - 1), 1000)
-      return () => clearTimeout(timer)
+      const timer = setTimeout(() => setLoginCooldown(loginCooldown - 1), 1000);
+      return () => clearTimeout(timer);
    }
-  }, [loginCooldown])
+  }, [loginCooldown]);

  // Cap token management — ref to hold latest token without triggering re-render
-  const capTokenRef = useRef<string | null>(null)
-  const [capReady, setCapReady] = useState(false)
-  const [capError, setCapError] = useState(false)
-  const [capResetKey, setCapResetKey] = useState(0)
+  const capTokenRef = useRef<string | null>(null);
+  const [capReady, setCapReady] = useState(false);
+  const [capError, setCapError] = useState(false);
+  const [capResetKey, setCapResetKey] = useState(0);

  const publicConfigQuery = useQuery({
-    queryKey: ["public-config"],
+    queryKey: ['public-config'],
    queryFn: () => ConfigService.getPublicConfig(),
-  })
+  });

  const authSourcesQuery = useQuery({
-    queryKey: ["auth-sources"],
+    queryKey: ['auth-sources'],
    queryFn: () => AuthService.getAuthSources(),
-  })
+  });

-  const capEnabled = configBool(publicConfigQuery.data?.cap_login_enabled, false)
-  const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true)
+  const capEnabled = configBool(
+    publicConfigQuery.data?.cap_login_enabled,
+    false,
+  );
+  const capAutoSolve = configBool(publicConfigQuery.data?.cap_auto_solve, true);

  const loginMutation = useMutation({
    mutationFn: (req: LoginRequest) => {
-      const headers: Record<string, string> = {}
+      const headers: Record<string, string> = {};
      if (capEnabled && capTokenRef.current) {
-        headers["X-Cap-Token"] = capTokenRef.current
+        headers['X-Cap-Token'] = capTokenRef.current;
        // Consume the token — next login attempt will need a new one
-        capTokenRef.current = null
-        setCapReady(false)
+        capTokenRef.current = null;
+        setCapReady(false);
      }
-      return AuthService.login(req, Object.keys(headers).length ? headers : undefined)
+      return AuthService.login(
+        req,
+        Object.keys(headers).length ? headers : undefined,
+      );
    },
    onSuccess: (user) => {
-      setUser(user)
-      toast.success("登录成功")
+      setUser(user);
+      toast.success('登录成功');
    },
    onError: (error: Error) => {
-      const errorMsg = error.message || ""
-      if (errorMsg.startsWith("need_email_code:")) {
-        const emailMasked = errorMsg.substring("need_email_code:".length)
+      const errorMsg = error.message || '';
+      if (errorMsg.startsWith('need_email_code:')) {
+        const emailMasked = errorMsg.substring('need_email_code:'.length);
        setLoginCodeTip(
          <>
-            已向您的安全邮箱 <span className="font-medium text-foreground">{emailMasked}</span> 发送了登录验证码。
-          </>
-        )
-        setShowLoginCodeInput(true)
-        setLoginCooldown(60)
-        toast.success("登录验证码已发送至您的邮箱，请注意查收")
+            已向您的安全邮箱{' '}
+            <span className='font-medium text-foreground'>{emailMasked}</span>{' '}
+            发送了登录验证码。
+          </>,
+        );
+        setShowLoginCodeInput(true);
+        setLoginCooldown(60);
+        toast.success('登录验证码已发送至您的邮箱，请注意查收');
        if (capEnabled) {
-          capTokenRef.current = null
-          setCapReady(false)
-          setCapResetKey((key) => key + 1)
+          capTokenRef.current = null;
+          setCapReady(false);
+          setCapResetKey((key) => key + 1);
        }
-        return
+        return;
      }

-      if (errorMsg.startsWith("smtp_invalid:")) {
-        const tip = errorMsg.substring("smtp_invalid:".length)
-        setLoginCodeTip("请输入您的登录验证码。")
-        setShowLoginCodeInput(true)
-        setLoginCooldown(0)
-        toast.warning(tip)
+      if (errorMsg.startsWith('smtp_invalid:')) {
+        const tip = errorMsg.substring('smtp_invalid:'.length);
+        setLoginCodeTip('请输入您的登录验证码。');
+        setShowLoginCodeInput(true);
+        setLoginCooldown(0);
+        toast.warning(tip);
        if (capEnabled) {
-          capTokenRef.current = null
-          setCapReady(false)
-          setCapResetKey((key) => key + 1)
+          capTokenRef.current = null;
+          setCapReady(false);
+          setCapResetKey((key) => key + 1);
        }
-        return
+        return;
      }

-      setErrorMessage(errorMsg || "登录失败，请重试")
+      setErrorMessage(errorMsg || '登录失败，请重试');
      if (capEnabled) {
-        capTokenRef.current = null
-        setCapReady(false)
-        setCapResetKey((key) => key + 1)
+        capTokenRef.current = null;
+        setCapReady(false);
+        setCapResetKey((key) => key + 1);
      }
    },
-  })
+  });

  const handlePasswordLogin = () => {
-    setErrorMessage("")
-    const trimmedUsername = username.trim()
+    setErrorMessage('');
+    const trimmedUsername = username.trim();
    if (!trimmedUsername || !password) {
-      toast.error("邮箱/用户名或密码未填写完整", {
-        description: "请先输入邮箱/用户名和密码后再登录",
-      })
-      return
+      toast.error('邮箱/用户名或密码未填写完整', {
+        description: '请先输入邮箱/用户名和密码后再登录',
+      });
+      return;
    }
    if (capEnabled && !capReady) {
      toast.error(
        capAutoSolve
-          ? "人机验证尚未完成，请稍候…"
-          : "请先点击「开始验证」完成人机验证",
-      )
-      return
+          ? '人机验证尚未完成，请稍候…'
+          : '请先点击「开始验证」完成人机验证',
+      );
+      return;
    }
    loginMutation.mutate({
      username: trimmedUsername,
      password,
      code: showLoginCodeInput ? code.trim() : undefined,
-    })
-  }
+    });
+  };

  const handleResendLoginCode = () => {
-    setCode("")
+    setCode('');
    loginMutation.mutate({
      username: username.trim(),
      password,
-    })
-  }
+    });
+  };

  const handleOAuthLogin = async (sourceName: string) => {
    try {
-      setErrorMessage("")
-      persistRedirectTarget(searchParams)
-      const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName)
-      window.location.href = authorize_url
+      setErrorMessage('');
+      persistRedirectTarget(searchParams);
+      const { authorize_url } = await AuthService.getAuthorizeUrl(sourceName);
+      window.location.href = authorize_url;
    } catch (error) {
-      toast.error(error instanceof Error ? error.message : "第三方登录失败")
+      toast.error(error instanceof Error ? error.message : '第三方登录失败');
    }
-  }
+  };

  const handleCapToken = (token: string) => {
-    capTokenRef.current = token
-    setCapReady(true)
-    setCapError(false)
-  }
+    capTokenRef.current = token;
+    setCapReady(true);
+    setCapError(false);
+  };

  const handleCapError = () => {
-    capTokenRef.current = null
-    setCapReady(false)
-    setCapError(true)
-  }
+    capTokenRef.current = null;
+    setCapReady(false);
+    setCapError(true);
+  };

  const registrationEnabled =
    configBool(publicConfigQuery.data?.registration_enabled, true) &&
-    configBool(publicConfigQuery.data?.password_register_enabled, true)
+    configBool(publicConfigQuery.data?.password_register_enabled, true);

-  const passwordLoginEnabled = configBool(publicConfigQuery.data?.password_login_enabled, true)
-  const oidcLoginEnabled = configBool(publicConfigQuery.data?.oidc_login_enabled, true)
-  const authSources = oidcLoginEnabled ? (authSourcesQuery.data ?? []) : []
+  const passwordLoginEnabled = configBool(
+    publicConfigQuery.data?.password_login_enabled,
+    true,
+  );
+  const oidcLoginEnabled = configBool(
+    publicConfigQuery.data?.oidc_login_enabled,
+    true,
+  );
+  const authSources = oidcLoginEnabled ? (authSourcesQuery.data ?? []) : [];

  const loginDisabled =
    !passwordLoginEnabled ||
    loginMutation.isPending ||
-    (capEnabled && capAutoSolve && !capReady && !capError)
+    (capEnabled && capAutoSolve && !capReady && !capError);

  if (publicConfigQuery.isPending) {
    return (
-      <div className="flex items-center justify-center py-24">
+      <div className='flex items-center justify-center py-24'>
        <Spinner />
      </div>
-    )
+    );
  }

  if (showLoginCodeInput) {
@@ -221,54 +243,54 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
        onResend={handleResendLoginCode}
        onSubmit={handlePasswordLogin}
      />
-    )
+    );
  }

  return (
-    <div className="flex flex-col gap-6 [@media(max-height:700px)]:gap-4">
+    <div className='flex flex-col gap-6 [@media(max-height:700px)]:gap-4'>
      <AuthHeading
        siteName={publicConfigQuery.data?.site_name}
-        title="登录到您的账号"
-        description="欢迎回来，请输入您的账号信息继续。"
+        title='登录到您的账号'
+        description='欢迎回来，请输入您的账号信息继续。'
      />

-      <div className="flex flex-col gap-5 [@media(max-height:700px)]:gap-3">
-        <FieldGroup className="gap-4 [@media(max-height:700px)]:gap-3">
-          <Field className="gap-1.5">
-            <FieldLabel htmlFor="username">
-              邮箱或用户名 <span className="text-destructive">*</span>
+      <div className='flex flex-col gap-5 [@media(max-height:700px)]:gap-3'>
+        <FieldGroup className='gap-4 [@media(max-height:700px)]:gap-3'>
+          <Field className='gap-1.5'>
+            <FieldLabel htmlFor='username'>
+              邮箱或用户名 <span className='text-destructive'>*</span>
            </FieldLabel>
            <Input
-              id="username"
+              id='username'
              value={username}
              onChange={(e) => setUsername(e.target.value)}
-              placeholder="输入邮箱或用户名"
-              autoComplete="username"
-              className="h-10 text-sm [@media(max-height:700px)]:h-9"
-              onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+              placeholder='输入邮箱或用户名'
+              autoComplete='username'
+              className='h-10 text-sm [@media(max-height:700px)]:h-9'
+              onKeyDown={(e) => e.key === 'Enter' && handlePasswordLogin()}
            />
          </Field>
-          <Field className="gap-1.5">
-            <FieldLabel htmlFor="password">
-              密码 <span className="text-destructive">*</span>
+          <Field className='gap-1.5'>
+            <FieldLabel htmlFor='password'>
+              密码 <span className='text-destructive'>*</span>
            </FieldLabel>
-            <div className="relative">
+            <div className='relative'>
              <Input
-                id="password"
+                id='password'
                value={password}
                onChange={(e) => setPassword(e.target.value)}
-                type={showPassword ? "text" : "password"}
-                placeholder="输入您的密码"
-                autoComplete="current-password"
-                className="h-10 pr-11 text-sm [@media(max-height:700px)]:h-9"
-                onKeyDown={(e) => e.key === "Enter" && handlePasswordLogin()}
+                type={showPassword ? 'text' : 'password'}
+                placeholder='输入您的密码'
+                autoComplete='current-password'
+                className='h-10 pr-11 text-sm [@media(max-height:700px)]:h-9'
+                onKeyDown={(e) => e.key === 'Enter' && handlePasswordLogin()}
              />
              <Button
-                type="button"
-                variant="ghost"
-                size="icon-sm"
-                aria-label={showPassword ? "隐藏密码" : "显示密码"}
-                className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+                type='button'
+                variant='ghost'
+                size='icon-sm'
+                aria-label={showPassword ? '隐藏密码' : '显示密码'}
+                className='absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground'
                onClick={() => setShowPassword((visible) => !visible)}
              >
                {showPassword ? <EyeOffIcon /> : <EyeIcon />}
@@ -288,15 +310,15 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
        )}

        {errorMessage ? (
-          <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive">
+          <div className='rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-sm text-destructive'>
            {errorMessage}
          </div>
        ) : null}

        <Button
-          type="button"
-          className="h-10 w-full [@media(max-height:700px)]:h-9"
-          variant="auth"
+          type='button'
+          className='h-10 w-full [@media(max-height:700px)]:h-9'
+          variant='auth'
          onClick={handlePasswordLogin}
          disabled={loginDisabled}
        >
@@ -306,25 +328,25 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
              登录中...
            </>
          ) : (
-            "登录"
+            '登录'
          )}
        </Button>
      </div>

      {authSources.length > 0 ? (
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center gap-3">
-            <Separator className="flex-1" />
-            <span className="text-xs text-muted-foreground">或者使用</span>
-            <Separator className="flex-1" />
+        <div className='flex flex-col gap-3'>
+          <div className='flex items-center gap-3'>
+            <Separator className='flex-1' />
+            <span className='text-xs text-muted-foreground'>或者使用</span>
+            <Separator className='flex-1' />
          </div>
-          <div className="grid gap-2">
+          <div className='grid gap-2'>
            {authSources.map((source) => (
              <Button
                key={source.id}
-                type="button"
-                variant="outline"
-                className="h-10 [@media(max-height:700px)]:h-9"
+                type='button'
+                variant='outline'
+                className='h-10 [@media(max-height:700px)]:h-9'
                onClick={() => void handleOAuthLogin(source.name)}
              >
                {source.display_name || source.name} 登录
@@ -335,13 +357,16 @@ export function LoginForm({ onOTPStateChange }: { onOTPStateChange?: (show: bool
      ) : null}

      {registrationEnabled && (
-        <div className="text-center text-sm text-muted-foreground">
-          还没有账号？{" "}
-          <Link href="/register" className="font-medium text-foreground underline underline-offset-4">
+        <div className='text-center text-sm text-muted-foreground'>
+          还没有账号？{' '}
+          <Link
+            href='/register'
+            className='font-medium text-foreground underline underline-offset-4'
+          >
            立即注册
          </Link>
        </div>
      )}
    </div>
-  )
+  );
 }