Import source: src/features/auth/auth-screen
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,367 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Eye, EyeOff, KeyRound, LockKeyhole, Server, ShieldCheck, Wifi } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { Logo } from "@/components/common/logo";
|
||||
import { AmbientBackground } from "@/components/shell/ambient-background";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { panelService } from "@/api/services/panel-service";
|
||||
|
||||
const authHighlights = [
|
||||
{ icon: ShieldCheck, label: "Secure authentication flows" },
|
||||
{ icon: KeyRound, label: "Typed frontend API contracts" },
|
||||
{ icon: Server, label: "Backend-ready service wiring" },
|
||||
];
|
||||
|
||||
const loginSchema = z.object({
|
||||
email: z.string().email("Enter a valid email address."),
|
||||
password: z.string().min(8, "Password must be at least 8 characters."),
|
||||
remember: z.boolean().optional(),
|
||||
});
|
||||
|
||||
type LoginValues = z.infer<typeof loginSchema>;
|
||||
|
||||
export type AuthMode =
|
||||
| "login"
|
||||
| "logout"
|
||||
| "forgot-password"
|
||||
| "reset-password"
|
||||
| "two-factor"
|
||||
| "recovery-code"
|
||||
| "passkey"
|
||||
| "device-verification"
|
||||
| "session-expired"
|
||||
| "account-locked"
|
||||
| "invitation"
|
||||
| "setup";
|
||||
|
||||
export function AuthScreen({ mode }: { mode: AuthMode }) {
|
||||
const router = useRouter();
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mockError, setMockError] = useState("");
|
||||
const form = useForm<LoginValues>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: { email: "owner@example.com", password: "", remember: true },
|
||||
});
|
||||
|
||||
async function onLogin(values: LoginValues) {
|
||||
setLoading(true);
|
||||
setMockError("");
|
||||
const response = await panelService.auth
|
||||
.login(values.email, values.password)
|
||||
.catch((error: unknown): Awaited<ReturnType<typeof panelService.auth.login>> => {
|
||||
const message =
|
||||
error instanceof Error ? error.message : "The backend API is unreachable.";
|
||||
return {
|
||||
data: null,
|
||||
meta: { requestId: "client_network_error" },
|
||||
error: {
|
||||
code: "NETWORK_ERROR",
|
||||
message,
|
||||
fields: {},
|
||||
},
|
||||
};
|
||||
});
|
||||
setLoading(false);
|
||||
if (response.error) {
|
||||
setMockError(response.error.message);
|
||||
for (const [field, message] of Object.entries(response.error.fields ?? {})) {
|
||||
if (field === "email" || field === "password") {
|
||||
form.setError(field, { message });
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (response.data?.challenge === "totp") {
|
||||
router.push("/two-factor");
|
||||
return;
|
||||
}
|
||||
if (values.email.includes("locked")) {
|
||||
router.push("/account-locked");
|
||||
return;
|
||||
}
|
||||
if (values.password.toLowerCase().includes("error")) {
|
||||
setMockError("The supplied credentials were rejected.");
|
||||
return;
|
||||
}
|
||||
router.push("/dashboard");
|
||||
}
|
||||
|
||||
if (mode !== "login") return <SecondaryAuthScreen mode={mode} />;
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<Logo className="mb-3 h-10 w-40" />
|
||||
<CardTitle>Sign in to CoaxysPanel</CardTitle>
|
||||
<CardDescription>Server Hosting Control Center</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-4 grid gap-2 rounded-md border border-border/60 bg-muted/40 p-3 text-xs">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4" /> srv-dal-01.coaxys.net
|
||||
</span>
|
||||
<Badge variant="success">Online</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Wifi className="h-4 w-4" /> Secure connection verified
|
||||
</div>
|
||||
</div>
|
||||
<form className="space-y-4" onSubmit={form.handleSubmit(onLogin)}>
|
||||
<label className="block space-y-1 text-sm">
|
||||
<span className="font-medium">Email</span>
|
||||
<Input autoComplete="username" {...form.register("email")} />
|
||||
{form.formState.errors.email ? (
|
||||
<span className="text-xs text-destructive">
|
||||
{form.formState.errors.email.message}
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<label className="block space-y-1 text-sm">
|
||||
<span className="font-medium">Password</span>
|
||||
<span className="relative block">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
autoComplete="current-password"
|
||||
{...form.register("password")}
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-2 top-2 text-muted-foreground"
|
||||
onClick={() => setShowPassword((value) => !value)}
|
||||
aria-label={showPassword ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</span>
|
||||
{form.formState.errors.password ? (
|
||||
<span className="text-xs text-destructive">
|
||||
{form.formState.errors.password.message}
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="checkbox" {...form.register("remember")} />
|
||||
Remember this device
|
||||
</label>
|
||||
<Link href="/forgot-password" className="text-primary hover:underline">
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
{mockError ? (
|
||||
<div className="anim-rise rounded-md border border-destructive/30 bg-destructive/10 p-2 text-sm text-destructive">
|
||||
{mockError}
|
||||
</div>
|
||||
) : null}
|
||||
<Button className="w-full" disabled={loading}>
|
||||
{loading ? "Signing in..." : "Sign in"}
|
||||
</Button>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button type="button" asChild variant="outline">
|
||||
<Link href="/passkey">
|
||||
<KeyRound className="h-4 w-4" /> Passkey
|
||||
</Link>
|
||||
</Button>
|
||||
<Button type="button" asChild variant="outline">
|
||||
<Link href="/two-factor">
|
||||
<LockKeyhole className="h-4 w-4" /> 2FA
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function SecondaryAuthScreen({ mode }: { mode: Exclude<AuthMode, "login"> }) {
|
||||
const content = authCopy[mode];
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Card className="w-full max-w-lg">
|
||||
<CardHeader>
|
||||
<Logo className="mb-3 h-10 w-40" />
|
||||
<CardTitle>{content.title}</CardTitle>
|
||||
<CardDescription>{content.description}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-md border border-border/60 bg-muted/40 p-4">
|
||||
<div className="mb-3 flex items-center gap-2 text-sm font-medium">
|
||||
<ShieldCheck className="h-4 w-4 text-primary" />
|
||||
{content.status}
|
||||
</div>
|
||||
<div className="grid gap-3">
|
||||
{content.fields.map((field) => (
|
||||
<label key={field} className="space-y-1 text-sm">
|
||||
<span className="font-medium">{field}</span>
|
||||
<Input
|
||||
placeholder={field}
|
||||
type={field.toLowerCase().includes("password") ? "password" : "text"}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-end gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/login">Back to login</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href={mode === "logout" ? "/login" : "/dashboard"}>{content.action}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</AuthLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<main className="relative grid min-h-screen grid-cols-1 lg:grid-cols-[1fr_520px]">
|
||||
<AmbientBackground />
|
||||
<section className="relative hidden overflow-hidden p-10 lg:flex lg:flex-col lg:justify-between xl:p-14">
|
||||
<Image
|
||||
src="/art/auth-glass.jpg"
|
||||
alt=""
|
||||
fill
|
||||
priority
|
||||
sizes="(min-width: 1024px) 60vw, 0px"
|
||||
className="hidden object-cover object-center opacity-45 dark:block"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 hidden bg-gradient-to-r from-background/40 via-transparent to-background dark:block"
|
||||
/>
|
||||
<div className="anim-rise relative">
|
||||
<Logo className="h-12 w-48" />
|
||||
<h1 className="text-gradient mt-14 max-w-xl font-display text-5xl font-semibold leading-[1.05] tracking-tight xl:text-6xl">
|
||||
CoaxysPanel
|
||||
</h1>
|
||||
<p className="mt-5 max-w-xl text-lg text-muted-foreground">
|
||||
Dense, secure hosting administration for websites, domains, files, databases, mail,
|
||||
automation, and server operations.
|
||||
</p>
|
||||
</div>
|
||||
<div className="stagger relative grid max-w-xl gap-3 text-sm">
|
||||
{authHighlights.map(({ icon: Icon, label }) => (
|
||||
<div key={label} className="glass-panel flex items-center gap-3 rounded-lg p-3.5">
|
||||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<section className="anim-rise flex items-center justify-center p-4 sm:p-6">
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const authCopy: Record<
|
||||
Exclude<AuthMode, "login">,
|
||||
{ title: string; description: string; status: string; fields: string[]; action: string }
|
||||
> = {
|
||||
logout: {
|
||||
title: "You are signed out",
|
||||
description: "The mock session was closed locally.",
|
||||
status: "Session token cleared in the frontend state.",
|
||||
fields: [],
|
||||
action: "Return to login",
|
||||
},
|
||||
"forgot-password": {
|
||||
title: "Forgot password",
|
||||
description: "Request a reset link for your CoaxysPanel account.",
|
||||
status: "A mock reset email will be queued.",
|
||||
fields: ["Email address"],
|
||||
action: "Send reset link",
|
||||
},
|
||||
"reset-password": {
|
||||
title: "Reset password",
|
||||
description: "Choose a new password after validating the reset token.",
|
||||
status: "Password policy and strength validation are active.",
|
||||
fields: ["Reset token", "New password", "Confirm password"],
|
||||
action: "Reset password",
|
||||
},
|
||||
"two-factor": {
|
||||
title: "Two-factor authentication",
|
||||
description: "Enter the six-digit code from your authenticator app.",
|
||||
status: "TOTP challenge required for this mock account.",
|
||||
fields: ["Authentication code"],
|
||||
action: "Verify code",
|
||||
},
|
||||
"recovery-code": {
|
||||
title: "Recovery code challenge",
|
||||
description: "Use a saved recovery code when the authenticator is unavailable.",
|
||||
status: "Recovery-code validation is simulated.",
|
||||
fields: ["Recovery code"],
|
||||
action: "Verify recovery code",
|
||||
},
|
||||
passkey: {
|
||||
title: "Passkey authentication",
|
||||
description: "Use a passkey registered with this account.",
|
||||
status: "Browser passkey ceremony is represented as a mock flow.",
|
||||
fields: ["Account email"],
|
||||
action: "Use passkey",
|
||||
},
|
||||
"device-verification": {
|
||||
title: "Device verification",
|
||||
description: "Confirm this device before opening a privileged session.",
|
||||
status: "Verification code sent to the mock contact method.",
|
||||
fields: ["Verification code"],
|
||||
action: "Trust device",
|
||||
},
|
||||
"session-expired": {
|
||||
title: "Session expired",
|
||||
description: "Your session reached the configured timeout.",
|
||||
status: "Re-authentication is required.",
|
||||
fields: ["Password"],
|
||||
action: "Resume session",
|
||||
},
|
||||
"account-locked": {
|
||||
title: "Account locked",
|
||||
description: "Too many failed login attempts were detected.",
|
||||
status: "A support operator can unlock the account after verification.",
|
||||
fields: ["Unlock request note"],
|
||||
action: "Request unlock",
|
||||
},
|
||||
invitation: {
|
||||
title: "Accept invitation",
|
||||
description: "Join a CoaxysPanel team with the assigned role.",
|
||||
status: "Invitation token and role preview are ready.",
|
||||
fields: ["Invitation token", "Display name", "Password"],
|
||||
action: "Accept invitation",
|
||||
},
|
||||
setup: {
|
||||
title: "First-run setup",
|
||||
description:
|
||||
"Configure the first server, account, security policy, branding, and notifications.",
|
||||
status: "Setup wizard writes only to mock frontend state.",
|
||||
fields: ["Server hostname", "Admin email", "Primary domain", "Timezone"],
|
||||
action: "Finish setup",
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user