feat(ui): refine OnboardingWizard, LoginPage, and SettingsPage
This commit is contained in:
null
parent
3a14c50e08
commit
f71b433323
|
|
@ -1,5 +1,5 @@
|
|||
import { useState } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import { useState, type ComponentType, type ReactNode } from 'react';
|
||||
import { Check, ChevronLeft, ChevronRight, KeyRound, LockKeyhole, Settings2, ShieldCheck, UserPlus, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api';
|
||||
import { errMessage } from '@/lib/utils';
|
||||
|
|
@ -7,6 +7,30 @@ import { Button } from '@/components/ui/button';
|
|||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { BRAND } from '@/lib/brand';
|
||||
import { BrandGlyph, BrandMark } from '@/components/brand/Brand';
|
||||
|
||||
function PromiseItem({
|
||||
icon: Icon,
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
icon: ComponentType<{ className?: string }>;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-3 rounded-xl border border-border/65 bg-card/55 p-3 shadow-sm shadow-black/5 backdrop-blur-sm">
|
||||
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-primary/20 bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground">{title}</p>
|
||||
<p className="mt-0.5 text-xs leading-5 text-muted-foreground">{children}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function OnboardingWizard({ onComplete }: { onComplete: () => void }) {
|
||||
const [step, setStep] = useState(0);
|
||||
|
|
@ -48,24 +72,54 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)] px-4 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="flex justify-center gap-2 mb-8">
|
||||
<div className="min-h-[calc(100vh-64px)] bg-[radial-gradient(circle_at_18%_4%,oklch(var(--primary)/0.13),transparent_28rem),radial-gradient(circle_at_86%_86%,oklch(var(--accent)/0.10),transparent_24rem)] px-4 py-10 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-64px-5rem)] w-full max-w-5xl items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(23rem,28rem)]">
|
||||
<section className="space-y-6">
|
||||
<div className="max-w-xl">
|
||||
<BrandMark className="h-auto w-[15rem] drop-shadow-[0_14px_36px_rgba(0,0,0,0.18)]" />
|
||||
<h1 className="mt-6 text-3xl font-semibold tracking-tight sm:text-4xl">
|
||||
Set up {BRAND.name} with a clean privacy line.
|
||||
</h1>
|
||||
<p className="mt-4 max-w-lg text-sm leading-6 text-muted-foreground sm:text-base sm:leading-7">
|
||||
The first admin keeps the app healthy. The first user owns the money data. Those roles stay separate from the start.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid max-w-xl gap-3 sm:grid-cols-2 lg:grid-cols-1">
|
||||
<PromiseItem icon={Settings2} title="Admin controls access">
|
||||
Create accounts, reset passwords, notification plumbing, and login mode settings.
|
||||
</PromiseItem>
|
||||
<PromiseItem icon={LockKeyhole} title="Financial data stays private">
|
||||
Admin tools do not expose bills, payments, spending history, or personal settings.
|
||||
</PromiseItem>
|
||||
<PromiseItem icon={ShieldCheck} title="Premium calm by default">
|
||||
A restrained setup flow that matches the tracker, settings, and security surfaces.
|
||||
</PromiseItem>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="mb-6 flex items-center justify-center gap-2">
|
||||
{[0, 1].map(i => (
|
||||
<span
|
||||
key={i}
|
||||
className={`h-2 rounded-full transition-all ${i === step ? 'w-6 bg-primary' : 'w-2 bg-border'}`}
|
||||
className={`h-2 rounded-full transition-all ${i === step ? 'w-8 bg-primary' : 'w-2.5 bg-border'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{step === 0 && (
|
||||
<Card>
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<div className="flex gap-3">
|
||||
<BrandGlyph name="security" className="h-11 w-11 rounded-2xl" />
|
||||
<div>
|
||||
<CardTitle className="text-xl">Welcome, Administrator</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Before creating your first user, please understand what your admin account can and cannot do.
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Before creating your first user, review the admin boundary.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-2.5">
|
||||
|
|
@ -78,8 +132,8 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
|
|||
{ can: false, text: 'Cannot access user settings or history' },
|
||||
].map(({ can, text }) => (
|
||||
<div key={text} className="flex items-center gap-3 text-sm">
|
||||
<span className={`shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${can ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'}`}>
|
||||
{can ? '✓' : '✗'}
|
||||
<span className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full border ${can ? 'border-emerald-500/25 bg-emerald-500/15 text-emerald-500' : 'border-rose-500/25 bg-rose-500/15 text-rose-500'}`}>
|
||||
{can ? <Check className="h-3.5 w-3.5" aria-hidden="true" /> : <X className="h-3.5 w-3.5" aria-hidden="true" />}
|
||||
</span>
|
||||
<span className={can ? 'text-foreground' : 'text-muted-foreground'}>{text}</span>
|
||||
</div>
|
||||
|
|
@ -87,7 +141,7 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
|
|||
</div>
|
||||
<div className="pt-4">
|
||||
<Button className="w-full" onClick={() => setStep(1)}>
|
||||
Got it, create my user account
|
||||
Create the first user
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -96,12 +150,17 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
|
|||
)}
|
||||
|
||||
{step === 1 && (
|
||||
<Card>
|
||||
<Card className="overflow-hidden">
|
||||
<CardHeader>
|
||||
<div className="flex gap-3">
|
||||
<BrandGlyph name="tracker" className="h-11 w-11 rounded-2xl" />
|
||||
<div>
|
||||
<CardTitle className="text-xl">Create first user</CardTitle>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
This account will be used to access the bill tracker.
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
This account will own the tracker, bills, and personal settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleCreate} className="space-y-4">
|
||||
|
|
@ -148,14 +207,24 @@ export default function OnboardingWizard({ onComplete }: { onComplete: () => voi
|
|||
Back
|
||||
</Button>
|
||||
<Button type="submit" className="flex-1" disabled={loading} aria-busy={loading}>
|
||||
{loading ? 'Creating…' : 'Create User'}
|
||||
{loading ? 'Creating…' : (
|
||||
<>
|
||||
<UserPlus className="h-4 w-4" aria-hidden="true" />
|
||||
Create User
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-start gap-2 rounded-xl border border-border/70 bg-muted/35 p-3 text-xs leading-5 text-muted-foreground">
|
||||
<KeyRound className="mt-0.5 h-4 w-4 shrink-0 text-primary" aria-hidden="true" />
|
||||
<span>Use a strong password now. The account can add two-factor authentication after first sign-in.</span>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, type ComponentType, type ReactNode } from 'react';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Gauge, KeyRound, LockKeyhole, ShieldCheck } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api';
|
||||
import { errMessage } from '@/lib/utils';
|
||||
|
|
@ -9,7 +10,7 @@ import { Input } from '@/components/ui/input';
|
|||
import { Label } from '@/components/ui/label';
|
||||
import { APP_VERSION } from '@/lib/version';
|
||||
import { BRAND } from '@/lib/brand';
|
||||
import { BrandMark } from '@/components/brand/Brand';
|
||||
import { BrandGlyph, BrandMark } from '@/components/brand/Brand';
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
|
|
@ -28,6 +29,28 @@ const LANDING_ROUTES: Record<string, string> = {
|
|||
tracker: '/', calendar: '/calendar', summary: '/summary', spending: '/spending',
|
||||
};
|
||||
|
||||
function TrustItem({
|
||||
icon: Icon,
|
||||
title,
|
||||
children,
|
||||
}: {
|
||||
icon: ComponentType<{ className?: string }>;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-3 rounded-xl border border-border/65 bg-card/50 p-3 shadow-sm shadow-black/5 backdrop-blur-sm">
|
||||
<span className="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-primary/20 bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" aria-hidden="true" />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-foreground">{title}</p>
|
||||
<p className="mt-0.5 text-xs leading-5 text-muted-foreground">{children}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
|
@ -193,12 +216,35 @@ export default function LoginPage() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_50%_0%,oklch(var(--primary)/0.16),transparent_28rem),radial-gradient(circle_at_10%_90%,oklch(var(--accent)/0.10),transparent_22rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] p-4">
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,oklch(var(--primary)/0.16),transparent_30rem),radial-gradient(circle_at_84%_82%,oklch(var(--accent)/0.12),transparent_26rem),linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.18))] p-4 sm:p-6 lg:p-8">
|
||||
<div className="mx-auto grid min-h-[calc(100vh-2rem)] w-full max-w-6xl items-center gap-8 sm:min-h-[calc(100vh-3rem)] lg:min-h-[calc(100vh-4rem)] lg:grid-cols-[minmax(0,1fr)_minmax(22rem,25rem)]">
|
||||
<section className="hidden lg:block">
|
||||
<div className="max-w-xl space-y-8">
|
||||
<div>
|
||||
<BrandMark className="h-auto w-[18rem] drop-shadow-[0_18px_44px_rgba(0,0,0,0.22)]" />
|
||||
<p className="mt-5 max-w-md text-lg leading-8 text-muted-foreground">
|
||||
{BRAND.tagline} Built for fast bill scanning, clear household decisions, and private defaults.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-sm space-y-6">
|
||||
<div className="grid max-w-lg gap-3">
|
||||
<TrustItem icon={ShieldCheck} title="Private by design">
|
||||
Admins can manage access, but they cannot inspect personal bills or spending history.
|
||||
</TrustItem>
|
||||
<TrustItem icon={Gauge} title="Fast daily control">
|
||||
Dense tracker views, tabular money, and calm status cues stay front and center.
|
||||
</TrustItem>
|
||||
<TrustItem icon={LockKeyhole} title="Ready for stronger sign-in">
|
||||
Local login, SSO, and two-factor flows share one clean entry point.
|
||||
</TrustItem>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mx-auto w-full max-w-sm space-y-6">
|
||||
|
||||
{/* Logo / Brand */}
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<div className="flex flex-col items-center text-center lg:hidden">
|
||||
<BrandMark className="h-auto w-[78%] max-w-[12rem] drop-shadow-[0_10px_28px_rgba(0,0,0,0.18)]" />
|
||||
<p className="mt-3 max-w-xs text-sm leading-6 text-muted-foreground">
|
||||
{BRAND.tagline}
|
||||
|
|
@ -208,12 +254,15 @@ export default function LoginPage() {
|
|||
{/* TOTP step — shown after password is accepted */}
|
||||
{totpChallenge && (
|
||||
<div className="surface-elevated p-8 space-y-5">
|
||||
<div className="flex gap-3">
|
||||
<BrandGlyph name="security" className="h-11 w-11 rounded-2xl" />
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">Two-factor authentication</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{useRecovery ? 'Enter one of your recovery codes.' : 'Enter the 6-digit code from your authenticator app.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleTotpSubmit} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
|
|
@ -272,6 +321,10 @@ export default function LoginPage() {
|
|||
<div className="surface-elevated space-y-6 p-8">
|
||||
|
||||
<div>
|
||||
<div className="mb-3 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
|
||||
<KeyRound className="h-3.5 w-3.5" aria-hidden="true" />
|
||||
Secure household access
|
||||
</div>
|
||||
<h1 className="text-xl font-semibold tracking-tight">Sign in</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{localEnabled ? 'Enter your credentials to continue.' : `Continue with ${providerName}.`}
|
||||
|
|
@ -369,15 +422,21 @@ export default function LoginPage() {
|
|||
</div>
|
||||
))} {/* end !totpChallenge + authMode check */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Change Password Dialog */}
|
||||
<Dialog open={showChangePw}>
|
||||
<DialogContent onInteractOutside={e => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<div className="mb-2 flex items-center gap-3">
|
||||
<BrandGlyph name="security" className="h-11 w-11 rounded-2xl" />
|
||||
<div>
|
||||
<DialogTitle>Change your password</DialogTitle>
|
||||
<DialogDescription>
|
||||
You must set a new password before continuing.
|
||||
Set a new password before continuing.
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={handleChangePassword} className="space-y-4 pt-2">
|
||||
|
|
@ -416,26 +475,31 @@ export default function LoginPage() {
|
|||
<Dialog open={showPrivacy}>
|
||||
<DialogContent onInteractOutside={e => e.preventDefault()}>
|
||||
<DialogHeader>
|
||||
<div className="mb-2 flex items-center gap-3">
|
||||
<BrandGlyph name="security" className="h-11 w-11 rounded-2xl" />
|
||||
<div>
|
||||
<DialogTitle>Privacy notice</DialogTitle>
|
||||
<DialogDescription>
|
||||
Please read before continuing.
|
||||
A quick boundary check before your first session.
|
||||
</DialogDescription>
|
||||
</div>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 text-sm text-muted-foreground py-2">
|
||||
|
||||
<p>Your financial data is stored privately and is accessible only to you.</p>
|
||||
|
||||
<div className="rounded-lg bg-muted/50 border border-border p-4 space-y-2">
|
||||
<div className="rounded-xl bg-muted/50 border border-border p-4 space-y-2">
|
||||
<p className="font-medium text-foreground">What your administrator can do:</p>
|
||||
|
||||
<ul className="space-y-1.5">
|
||||
<li className="flex gap-2">
|
||||
<span className="text-emerald-400">✓</span>
|
||||
<ShieldCheck className="mt-0.5 h-4 w-4 shrink-0 text-emerald-500" aria-hidden="true" />
|
||||
<span>Reset your password if locked out</span>
|
||||
</li>
|
||||
<li className="flex gap-2">
|
||||
<span className="text-red-400">✗</span>
|
||||
<LockKeyhole className="mt-0.5 h-4 w-4 shrink-0 text-rose-500" aria-hidden="true" />
|
||||
<span>Cannot view your financial data</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ function AppearanceSection() {
|
|||
label={<span className="inline-flex items-center">Theme<SettingHelp label="Theme" text="“System” follows your device's light/dark setting and switches automatically when it changes." /></span>}
|
||||
description="Choose your preferred color scheme."
|
||||
>
|
||||
<div className="flex gap-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<ThemeCard value="light" label="Light" icon={Sun} currentTheme={theme} onSelect={setTheme} />
|
||||
<ThemeCard value="dark" label="Dark" icon={Moon} currentTheme={theme} onSelect={setTheme} />
|
||||
<ThemeCard value="system" label="System" icon={Monitor} currentTheme={theme} onSelect={setTheme} />
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 89 KiB |
Loading…
Reference in New Issue