Refactor code structure for improved readability and maintainability
This commit is contained in:
mlogclub
+120
-70
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user