mirror of
https://github.com/YuzuZensai/Minikura.git
synced 2026-09-13 18:59:25 +00:00
🎨 style: establish console design system
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { ArrowRight, Check } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
|
||||
import { BrandMark } from "@/components/brand";
|
||||
import { FullScreenLoader } from "@/components/page-layout";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { api } from "@/lib/api-client";
|
||||
@@ -77,68 +79,86 @@ export default function BootstrapPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (checkingStatus) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (checkingStatus) return <FullScreenLoader label="Checking setup" />;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold text-center">Welcome to Minikura</CardTitle>
|
||||
<CardDescription className="text-center">
|
||||
Create your admin account to get started
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name</Label>
|
||||
<Input id="name" name="name" placeholder="John Doe" required autoFocus />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="text-sm text-red-600 text-center">{error}</div>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Creating..." : "Create Admin Account"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<main className="auth-grid flex min-h-screen items-center justify-center bg-sidebar p-5 sm:p-10">
|
||||
<div className="grid w-full max-w-5xl overflow-hidden border border-sidebar-border bg-background text-foreground shadow-[12px_12px_0_color-mix(in_oklch,var(--sidebar-primary)_18%,transparent)] lg:grid-cols-[0.8fr_1.2fr]">
|
||||
<section className="flex flex-col justify-between bg-primary p-8 text-primary-foreground sm:p-10">
|
||||
<BrandMark inverted />
|
||||
<div className="my-16">
|
||||
<span className="page-eyebrow text-primary-foreground/60">System bootstrap / 01</span>
|
||||
<h1 className="text-5xl font-black uppercase leading-[0.9] tracking-[-0.055em]">
|
||||
Build your command center.
|
||||
</h1>
|
||||
<p className="mt-5 text-sm leading-6 text-primary-foreground/65">
|
||||
The first account controls users, workloads, routing, and cluster visibility.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-3 font-mono text-[10px] font-bold uppercase tracking-[0.12em]">
|
||||
<p className="flex items-center gap-2">
|
||||
<Check className="size-3" /> Admin authority
|
||||
</p>
|
||||
<p className="flex items-center gap-2">
|
||||
<Check className="size-3" /> Secure session
|
||||
</p>
|
||||
<p className="flex items-center gap-2">
|
||||
<Check className="size-3" /> Ready in one step
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<AuthFormCard
|
||||
title="Create Operator"
|
||||
description="Initialize Minikura with an administrator identity."
|
||||
className="max-w-none rounded-none border-0 bg-card py-8 shadow-none sm:py-10"
|
||||
headerClassName="px-7 sm:px-10"
|
||||
contentClassName="px-7 sm:px-10"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Full Name</Label>
|
||||
<Input id="name" name="name" placeholder="John Doe" required autoFocus />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Minimum 8 characters"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Repeat password"
|
||||
minLength={8}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<FormError message={error} />
|
||||
<Button type="submit" size="lg" className="w-full" disabled={loading}>
|
||||
{loading ? "Initializing..." : "Initialize Console"}
|
||||
{!loading && <ArrowRight className="ml-auto" />}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthFormCard>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
+114
-33
@@ -26,6 +26,10 @@
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-success: var(--success);
|
||||
--color-success-foreground: var(--success-foreground);
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-foreground: var(--warning-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
@@ -42,41 +46,49 @@
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--radius: 0.25rem;
|
||||
--font-sans: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--background: oklch(0.965 0.012 95);
|
||||
--foreground: oklch(0.18 0.018 75);
|
||||
--card: oklch(0.99 0.006 95);
|
||||
--card-foreground: oklch(0.18 0.018 75);
|
||||
--popover: oklch(0.995 0.004 95);
|
||||
--popover-foreground: oklch(0.18 0.018 75);
|
||||
--primary: oklch(0.75 0.205 125);
|
||||
--primary-foreground: oklch(0.15 0.025 125);
|
||||
--secondary: oklch(0.91 0.022 95);
|
||||
--secondary-foreground: oklch(0.24 0.018 75);
|
||||
--muted: oklch(0.925 0.012 95);
|
||||
--muted-foreground: oklch(0.48 0.018 75);
|
||||
--accent: oklch(0.88 0.04 112);
|
||||
--accent-foreground: oklch(0.2 0.028 110);
|
||||
--destructive: oklch(0.57 0.205 28);
|
||||
--success: oklch(0.59 0.155 132);
|
||||
--success-foreground: oklch(0.28 0.09 132);
|
||||
--warning: oklch(0.72 0.15 76);
|
||||
--warning-foreground: oklch(0.34 0.09 66);
|
||||
--border: oklch(0.79 0.018 90);
|
||||
--input: oklch(0.76 0.02 90);
|
||||
--ring: oklch(0.68 0.19 125);
|
||||
--chart-1: oklch(0.75 0.205 125);
|
||||
--chart-2: oklch(0.66 0.16 205);
|
||||
--chart-3: oklch(0.58 0.18 50);
|
||||
--chart-4: oklch(0.72 0.17 80);
|
||||
--chart-5: oklch(0.55 0.16 300);
|
||||
--sidebar: oklch(0.17 0.02 75);
|
||||
--sidebar-foreground: oklch(0.91 0.015 95);
|
||||
--sidebar-primary: oklch(0.75 0.205 125);
|
||||
--sidebar-primary-foreground: oklch(0.15 0.025 125);
|
||||
--sidebar-accent: oklch(0.25 0.025 90);
|
||||
--sidebar-accent-foreground: oklch(0.96 0.01 95);
|
||||
--sidebar-border: oklch(0.31 0.025 80);
|
||||
--sidebar-ring: oklch(0.75 0.205 125);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -117,8 +129,77 @@
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
html {
|
||||
@apply bg-background;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
min-width: 320px;
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.page-shell {
|
||||
@apply mx-auto w-full max-w-[1600px] space-y-6;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
@apply flex flex-col gap-4 border-b-2 border-foreground pb-5 sm:flex-row sm:items-end sm:justify-between;
|
||||
}
|
||||
|
||||
.page-eyebrow {
|
||||
@apply mb-2 block font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-muted-foreground;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
@apply text-3xl font-black leading-none tracking-[-0.04em] sm:text-4xl;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
@apply mt-2 max-w-2xl text-sm leading-6 text-muted-foreground;
|
||||
}
|
||||
|
||||
.auth-grid {
|
||||
background-image:
|
||||
linear-gradient(to right, color-mix(in oklch, white 9%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, color-mix(in oklch, white 9%, transparent) 1px, transparent 1px);
|
||||
background-size: 36px 36px;
|
||||
}
|
||||
|
||||
.server-form [data-slot="tabs-content"] {
|
||||
@apply border border-border bg-background/65 p-4 sm:p-6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.server-form .grid-cols-2,
|
||||
.server-form .grid-cols-3,
|
||||
.server-form .grid-cols-4 {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,14 +2,14 @@ import type { Metadata } from "next";
|
||||
import "./globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Minikura - Minecraft Server Manager",
|
||||
description: "Manage your Minecraft servers with ease",
|
||||
title: "Minikura | Infrastructure Console",
|
||||
description: "Minecraft infrastructure control plane",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className="antialiased">{children}</body>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
+80
-56
@@ -1,13 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { AuthFormCard, FormError } from "@/components/auth/auth-form-card";
|
||||
import { BrandLockup } from "@/components/brand";
|
||||
import { FullScreenLoader } from "@/components/page-layout";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { signIn, useSession } from "@/lib/auth-client";
|
||||
import { authClient, signIn, useSession } from "@/lib/auth-client";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
@@ -39,7 +41,16 @@ export default function LoginPage() {
|
||||
if (result.error) {
|
||||
setError(result.error.message || "Invalid email or password");
|
||||
} else {
|
||||
router.push("/dashboard");
|
||||
const refreshedSession = await authClient.getSession({
|
||||
query: { disableCookieCache: true },
|
||||
});
|
||||
|
||||
if (!refreshedSession.data?.user) {
|
||||
setError("Signed in, but the session cookie was not accepted. Check the web and API URLs.");
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.assign("/dashboard");
|
||||
}
|
||||
} catch (_err) {
|
||||
setError("Failed to connect to server");
|
||||
@@ -48,59 +59,72 @@ export default function LoginPage() {
|
||||
}
|
||||
};
|
||||
|
||||
if (isPending) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (session?.user) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isPending || session?.user) return <FullScreenLoader />;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader className="space-y-1">
|
||||
<CardTitle className="text-2xl font-bold text-center">Minikura</CardTitle>
|
||||
<CardDescription className="text-center">Sign in to your account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="text-sm text-red-600 text-center">{error}</div>}
|
||||
<Button type="submit" className="w-full" disabled={loading}>
|
||||
{loading ? "Signing in..." : "Sign In"}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<main className="grid min-h-screen bg-sidebar text-sidebar-foreground lg:grid-cols-[1.2fr_0.8fr]">
|
||||
<section className="relative hidden overflow-hidden border-r border-sidebar-border bg-[url('/background.png')] bg-cover bg-center p-10 lg:flex lg:flex-col lg:justify-between xl:p-16">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-black/20" />
|
||||
<BrandLockup subtitle="Infrastructure console" className="relative z-10" />
|
||||
|
||||
<div className="relative z-10 max-w-2xl py-20">
|
||||
<span className="mb-5 inline-flex items-center gap-2 border border-sidebar-border bg-sidebar-accent px-3 py-1.5 font-mono text-[10px] font-bold uppercase tracking-[0.18em]">
|
||||
<span className="size-2 bg-sidebar-primary" /> Minecraft operations platform
|
||||
</span>
|
||||
<h1 className="text-6xl font-black uppercase leading-[0.86] tracking-[-0.065em] xl:text-8xl">
|
||||
Orchestrate
|
||||
<br />
|
||||
<span className="text-sidebar-primary">Every World.</span>
|
||||
</h1>
|
||||
<p className="mt-7 max-w-lg text-base leading-7 text-sidebar-foreground/55">
|
||||
Provision servers, manage proxy routes, and monitor Kubernetes workloads from a single
|
||||
operational interface.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="relative z-10 font-mono text-[9px] uppercase tracking-[0.2em] text-sidebar-foreground/35">
|
||||
Server and cluster administration
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="flex items-center justify-center bg-background p-5 text-foreground sm:p-10">
|
||||
<AuthFormCard
|
||||
title="Sign In"
|
||||
description="Use your administrator account to access Minikura."
|
||||
className="border-2 border-foreground shadow-none"
|
||||
headerClassName="border-b"
|
||||
contentClassName="pt-2"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="admin@example.com"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<FormError message={error} />
|
||||
<Button type="submit" size="lg" className="w-full" disabled={loading}>
|
||||
{loading ? "Signing in..." : "Sign In"}
|
||||
{!loading && <ArrowRight className="ml-auto" />}
|
||||
</Button>
|
||||
</form>
|
||||
</AuthFormCard>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user