Refactor code structure for improved readability and maintainability

web/app/dashboard/login/page.tsx

@@ -1,72 +1,13 @@
-"use client"
-
 import { LoginForm } from "@/components/login-form"
-import { LocaleSwitcher } from "@/components/locale-switcher"
-import { useI18n } from "@/i18n/provider"
-import { ShieldCheckIcon } from "lucide-react"
-import Link from "next/link"
 import { Suspense } from "react"
 
 export default function LoginPage() {
-  const t = useI18n()
-  const heroPoints = [
-    t("auth.heroPoint1"),
-    t("auth.heroPoint2"),
-    t("auth.heroPoint3"),
-  ]
-
   return (
-    <div className="grid min-h-svh bg-[linear-gradient(145deg,#fff7ed_0%,#ffffff_32%,#ecfeff_100%)] lg:grid-cols-[1.1fr_0.9fr]">
-      <div className="relative hidden overflow-hidden border-r bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.18),transparent_30%),radial-gradient(circle_at_bottom_right,rgba(6,182,212,0.18),transparent_28%),linear-gradient(145deg,#111827_0%,#1f2937_35%,#0f172a_100%)] lg:block">
-        <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),transparent_22%)]" />
-        <div className="relative flex h-full flex-col justify-between p-10 text-white">
-          <div className="space-y-5">
-            <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/8 px-3 py-1 text-xs tracking-[0.2em] uppercase text-white/80">
-              <ShieldCheckIcon className="size-3.5" />
-              {t("auth.heroBadge")}
-            </div>
-            <div className="space-y-3">
-              <h2 className="max-w-lg text-5xl font-semibold tracking-tight">
-                {t("auth.heroTitle")}
-              </h2>
-              <p className="max-w-xl text-sm leading-6 text-white/72">
-                {t("auth.heroSubtitle")}
-              </p>
-            </div>
-          </div>
-          <div className="grid gap-3">
-            {heroPoints.map((text, index) => (
-              <div
-                key={index}
-                className="rounded-2xl border border-white/10 bg-white/7 p-4 backdrop-blur"
-              >
-                <p className="text-sm leading-6 text-white/70">{text}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="flex flex-col gap-4 p-6 md:p-10">
-        <div className="flex items-center justify-between gap-2">
-          <Link href="/dashboard/login" className="flex items-center gap-2 font-medium">
-            <img
-              src="/images/logo.svg"
-              alt={t("app.brand")}
-              width="32"
-              height="32"
-              className="size-7 shrink-0 object-contain"
-            />
-            {t("app.brand")}
-          </Link>
-          <LocaleSwitcher />
-        </div>
-        <div className="flex flex-1 items-center justify-center">
-          <div className="w-full max-w-md rounded-[28px] border border-white/70 bg-white/90 p-8 shadow-[0_24px_80px_rgba(15,23,42,0.08)] backdrop-blur">
-            <Suspense fallback={<div className="min-h-80" />}>
-              <LoginForm />
-            </Suspense>
-          </div>
-        </div>
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
+      <div className="w-full max-w-sm md:max-w-4xl">
+        <Suspense fallback={<div className="min-h-96" />}>
+          <LoginForm />
+        </Suspense>
       </div>
     </div>
   )

web/components/login-form.tsx

@@ -10,10 +10,13 @@ import { fetchAuthOptions, loginWithPassword, type AuthOptions } from "@/lib/api
 import { useI18n } from "@/i18n/provider"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import {
   Field,
+  FieldDescription,
   FieldGroup,
   FieldLabel,
+  FieldSeparator,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { KeyRoundIcon } from "lucide-react"
@@ -29,7 +32,7 @@ function detectWxWorkEnvironment() {
 export function LoginForm({
   className,
   ...props
-}: React.ComponentProps<"form">) {
+}: React.ComponentProps<"div">) {
   const t = useI18n()
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -45,6 +48,8 @@ export function LoginForm({
   const oidcError = searchParams.get("oidcError")
   const redirectPath =
     nextPath && nextPath.startsWith("/") ? nextPath : "/dashboard"
+  const enabledProviderCount =
+    Number(authOptions.wxworkEnabled) + Number(authOptions.oidcEnabled)
 
   useEffect(() => {
     if (session) {
@@ -110,78 +115,123 @@ export function LoginForm({
   }
 
   return (
-    <form
+    <div
       className={cn("flex flex-col gap-6", className)}
-      onSubmit={handleSubmit}
       {...props}
     >
-      <FieldGroup>
-        <div className="flex flex-col gap-2 text-center">
-          <span className="mx-auto inline-flex rounded-full border border-amber-300/60 bg-amber-50 px-3 py-1 text-[11px] font-medium tracking-[0.22em] text-amber-900 uppercase">
-            {t("auth.badge")}
-          </span>
-          <h1 className="text-3xl font-semibold tracking-tight">{t("auth.welcome")}</h1>
-        </div>
-        <Field>
-          <FieldLabel htmlFor="username">{t("auth.username")}</FieldLabel>
-          <Input
-            id="username"
-            name="username"
-            placeholder={t("auth.usernamePlaceholder")}
-            autoComplete="username"
-            required
-          />
-        </Field>
-        <Field>
-          <div className="flex items-center">
-            <FieldLabel htmlFor="password">{t("auth.password")}</FieldLabel>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-2">
+          <form className="p-6 md:p-8" onSubmit={handleSubmit}>
+            <FieldGroup>
+              <div className="flex flex-col items-center gap-2 text-center">
+                <h1 className="text-2xl font-bold">{t("auth.welcome")}</h1>
+                <p className="text-balance text-muted-foreground">
+                  {t("auth.loginDescription", { brand: t("app.brand") })}
+                </p>
+              </div>
+              <Field>
+                <FieldLabel htmlFor="username">{t("auth.username")}</FieldLabel>
+                <Input
+                  id="username"
+                  name="username"
+                  placeholder={t("auth.usernamePlaceholder")}
+                  autoComplete="username"
+                  required
+                />
+              </Field>
+              <Field>
+                <div className="flex items-center">
+                  <FieldLabel htmlFor="password">{t("auth.password")}</FieldLabel>
+                  <a
+                    href="#"
+                    className="ml-auto text-sm underline-offset-2 hover:underline"
+                  >
+                    {t("auth.forgotPassword")}
+                  </a>
+                </div>
+                <Input
+                  id="password"
+                  name="password"
+                  type="password"
+                  placeholder={t("auth.passwordPlaceholder")}
+                  autoComplete="current-password"
+                  required
+                />
+              </Field>
+              <Field>
+                <Button type="submit" disabled={isPending}>
+                  {isPending ? t("auth.signingIn") : t("auth.signIn")}
+                </Button>
+              </Field>
+              {enabledProviderCount > 0 ? (
+                <>
+                  <FieldSeparator className="*:data-[slot=field-separator-content]:bg-card">
+                    {t("auth.continueWith")}
+                  </FieldSeparator>
+                  <Field
+                    className={cn(
+                      "grid gap-4",
+                      enabledProviderCount === 1 ? "grid-cols-1" : "grid-cols-2"
+                    )}
+                  >
+                    {authOptions.wxworkEnabled ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        aria-label={t("auth.wxworkSignIn")}
+                        onClick={() => {
+                          const path = isWxWorkEnv
+                            ? "/api/auth/wxwork_login"
+                            : "/api/auth/wxwork_qr_login"
+                          window.location.href = `${path}?next=${encodeURIComponent(redirectPath)}`
+                        }}
+                      >
+                        <Image
+                          src="/images/wxwork.svg"
+                          alt=""
+                          width={16}
+                          height={16}
+                          className="size-4 shrink-0"
+                        />
+                        <span className="sr-only">{t("auth.wxworkSignIn")}</span>
+                      </Button>
+                    ) : null}
+                    {authOptions.oidcEnabled ? (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        aria-label={t("auth.oidcSignIn")}
+                        onClick={() => {
+                          window.location.href = `/api/auth/oidc_login?next=${encodeURIComponent(redirectPath)}`
+                        }}
+                      >
+                        <KeyRoundIcon className="size-4 shrink-0" />
+                        <span className="sr-only">{t("auth.oidcSignIn")}</span>
+                      </Button>
+                    ) : null}
+                  </Field>
+                </>
+              ) : null}
+              <FieldDescription className="text-center">
+                {t("auth.noAccount")} <a href="#">{t("auth.signUp")}</a>
+              </FieldDescription>
+            </FieldGroup>
+          </form>
+          <div className="relative hidden bg-muted md:block">
+            {/* shadcn login-04 uses a plain img for the decorative side panel. */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/images/login-illustration.svg"
+              alt={t("auth.imageAlt")}
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
           </div>
-          <Input
-            id="password"
-            name="password"
-            type="password"
-            placeholder={t("auth.passwordPlaceholder")}
-            autoComplete="current-password"
-            required
-          />
-        </Field>
-        <Field>
-          <Button type="submit" disabled={isPending}>
-            {isPending ? t("auth.signingIn") : t("auth.signIn")}
-          </Button>
-        </Field>
-        {authOptions.wxworkEnabled ? (
-          <Field>
-            <Button
-              type="button"
-              variant="outline"
-              className="gap-2"
-              onClick={() => {
-                const path = isWxWorkEnv ? "/api/auth/wxwork_login" : "/api/auth/wxwork_qr_login"
-                window.location.href = `${path}?next=${encodeURIComponent(redirectPath)}`
-              }}
-            >
-              <Image src="/images/wxwork.svg" alt="" width={16} height={16} className="size-4 shrink-0" />
-              {t("auth.wxworkSignIn")}
-            </Button>
-          </Field>
-        ) : null}
-        {authOptions.oidcEnabled ? (
-          <Field>
-            <Button
-              type="button"
-              variant="outline"
-              className="gap-2"
-              onClick={() => {
-                window.location.href = `/api/auth/oidc_login?next=${encodeURIComponent(redirectPath)}`
-              }}
-            >
-              <KeyRoundIcon className="size-4 shrink-0" />
-              {t("auth.oidcSignIn")}
-            </Button>
-          </Field>
-        ) : null}
-      </FieldGroup>
-    </form>
+        </CardContent>
+      </Card>
+      <FieldDescription className="px-6 text-center">
+        {t("auth.termsPrefix")} <a href="#">{t("auth.termsOfService")}</a>{" "}
+        {t("auth.termsJoiner")} <a href="#">{t("auth.privacyPolicy")}</a>.
+      </FieldDescription>
+    </div>
   )
 }

web/messages/en-US.json

@@ -100,22 +100,25 @@
     "syncingProfile": "Syncing your admin profile and permissions",
     "loginSuccess": "Signed in. Taking you to the dashboard.",
     "loginFailed": "Sign-in failed",
-    "badge": "Shell AI",
-    "welcome": "Welcome to Shell AI Support",
+    "welcome": "Welcome back",
+    "loginDescription": "Login to your {brand} account",
     "username": "Username",
     "usernamePlaceholder": "Username or email",
     "password": "Password",
     "passwordPlaceholder": "Enter your password",
+    "forgotPassword": "Forgot your password?",
     "signingIn": "Signing in...",
-    "signIn": "Sign in",
+    "signIn": "Login",
+    "continueWith": "Or continue with",
     "wxworkSignIn": "Sign in with WeCom",
     "oidcSignIn": "Sign in with OIDC",
-    "heroBadge": "Secure Admin Workspace",
-    "heroTitle": "Shell AI Support",
-    "heroSubtitle": "Understand every issue, respond faster, and turn support into accountable outcomes.",
-    "heroPoint1": "Guide every conversation toward a trackable resolution.",
-    "heroPoint2": "Keep intake, routing, handoff, and review in one workflow.",
-    "heroPoint3": "Connect every channel, route intelligently, and help people work with AI.",
+    "noAccount": "Don't have an account?",
+    "signUp": "Sign up",
+    "termsPrefix": "By clicking continue, you agree to our",
+    "termsOfService": "Terms of Service",
+    "termsJoiner": "and",
+    "privacyPolicy": "Privacy Policy",
+    "imageAlt": "Image",
     "wxworkMissingTicket": "The WeCom sign-in ticket is missing.",
     "wxworkFailed": "WeCom sign-in failed.",
     "wxworkSigningIn": "Signing in with WeCom",

web/messages/zh-CN.json

@@ -100,22 +100,25 @@
     "syncingProfile": "将自动同步当前管理员信息与权限数据",
     "loginSuccess": "登录成功，正在进入系统",
     "loginFailed": "登录失败",
-    "badge": "贝壳AI",
-    "welcome": "欢迎使用贝壳 AI 客服平台",
+    "welcome": "欢迎回来",
+    "loginDescription": "登录你的 {brand} 账号",
     "username": "用户名",
     "usernamePlaceholder": "用户名或邮箱",
     "password": "密码",
     "passwordPlaceholder": "请输入密码",
+    "forgotPassword": "忘记密码？",
     "signingIn": "登录中...",
     "signIn": "登录",
+    "continueWith": "或继续使用",
     "wxworkSignIn": "企业微信登录",
     "oidcSignIn": "OIDC 登录",
-    "heroBadge": "安全管理空间",
-    "heroTitle": "贝壳AI客服",
-    "heroSubtitle": "懂问题，更懂用户；快响应，更能落地。",
-    "heroPoint1": "让每一次咨询，都通向可追踪的结果。",
-    "heroPoint2": "从接待到转派到复盘，一条链路跑到底。",
-    "heroPoint3": "多渠道接入，智能分配，人机协同提效。",
+    "noAccount": "还没有账号？",
+    "signUp": "注册",
+    "termsPrefix": "点击继续即表示你同意我们的",
+    "termsOfService": "服务条款",
+    "termsJoiner": "和",
+    "privacyPolicy": "隐私政策",
+    "imageAlt": "图片",
     "wxworkMissingTicket": "企业微信登录票据不存在",
     "wxworkFailed": "企业微信登录失败",
     "wxworkSigningIn": "企业微信登录中",