harivansh-afk/betterNAS
1
1
Fork 0
mirror of https://github.com/harivansh-afk/betterNAS.git synced 2026-04-17 05:00:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui
Some checks are pending
CI / test-control-plane (push) Waiting to run
Details
CI / test-node-agent (push) Waiting to run
Details
CI / build-web (push) Waiting to run
Details

Browse source
This commit is contained in:
Harivansh Rathi 2026-04-01 21:18:08 -04:00
parent 171a682f6a
commit f6069a024a
7 changed files with 675 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

205
apps/web/app/login/page.tsx
View file

@ -2,6 +2,7 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { login, register, ApiError } from "@/lib/api";
import { Button } from "@/components/ui/button";
import {
@ -45,108 +46,116 @@ export default function LoginPage() {
return (
<main className="flex min-h-screen items-center justify-center bg-background px-4">
<Card className="w-full max-w-sm">
<CardHeader className="text-center">
<p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
betterNAS
</p>
<CardTitle className="text-xl">
{mode === "login" ? "Sign in" : "Create account"}
</CardTitle>
<CardDescription>
{mode === "login"
? "Sign in to your betterNAS control plane with the same credentials you use for the node agent and Finder."
: "Create your betterNAS account. You will use the same username and password for the web app, node agent, and Finder."}
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div className="flex flex-col gap-1.5">
<label
htmlFor="username"
className="text-sm font-medium text-foreground"
>
Username
</label>
<input
id="username"
type="text"
autoComplete="username"
required
minLength={3}
maxLength={64}
value={username}
onChange={(e) => setUsername(e.target.value)}
className="rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
placeholder="admin"
/>
</div>
<div className="flex w-full max-w-sm flex-col gap-4">
<Link
href="/landing"
className="inline-flex items-center gap-1.5 self-start text-sm text-muted-foreground transition-colors hover:text-foreground"
>
<svg className="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M10 3L5 8l5 5" />
</svg>
</Link>
<div className="flex flex-col gap-1.5">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<input
id="password"
type="password"
autoComplete={
mode === "login" ? "current-password" : "new-password"
}
required
minLength={8}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
/>
</div>
<Card>
<CardHeader className="text-center">
<CardTitle className="text-xl">
{mode === "login" ? "Sign in" : "Create account"}
</CardTitle>
<CardDescription>
{mode === "login"
? "Use the same credentials as your node agent and Finder."
: "This account works across the web UI, node agent, and Finder."}
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div className="flex flex-col gap-1.5">
<label
htmlFor="username"
className="text-sm font-medium text-foreground"
>
Username
</label>
<input
id="username"
type="text"
autoComplete="username"
required
minLength={3}
maxLength={64}
value={username}
onChange={(e) => setUsername(e.target.value)}
className="rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
placeholder="admin"
/>
</div>
{error && <p className="text-sm text-destructive">{error}</p>}
<div className="flex flex-col gap-1.5">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<input
id="password"
type="password"
autoComplete={
mode === "login" ? "current-password" : "new-password"
}
required
minLength={8}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none ring-ring focus:ring-2"
/>
</div>
<Button type="submit" disabled={loading} className="w-full">
{loading
? "..."
: mode === "login"
? "Sign in"
: "Create account"}
</Button>
{error && <p className="text-sm text-destructive">{error}</p>}
<p className="text-center text-sm text-muted-foreground">
{mode === "login" ? (
<>
No account?{" "}
<button
type="button"
onClick={() => {
setMode("register");
setError(null);
}}
className="text-foreground underline underline-offset-2"
>
Create one
</button>
</>
) : (
<>
Already have an account?{" "}
<button
type="button"
onClick={() => {
setMode("login");
setError(null);
}}
className="text-foreground underline underline-offset-2"
>
Sign in
</button>
</>
)}
</p>
</form>
</CardContent>
</Card>
<Button type="submit" disabled={loading} className="w-full">
{loading
? "..."
: mode === "login"
? "Sign in"
: "Create account"}
</Button>
<p className="text-center text-sm text-muted-foreground">
{mode === "login" ? (
<>
No account?{" "}
<button
type="button"
onClick={() => {
setMode("register");
setError(null);
}}
className="text-foreground underline underline-offset-2"
>
Create one
</button>
</>
) : (
<>
Already have an account?{" "}
<button
type="button"
onClick={() => {
setMode("login");
setError(null);
}}
className="text-foreground underline underline-offset-2"
>
Sign in
</button>
</>
)}
</p>
</form>
</CardContent>
</Card>
</div>
</main>
);
}