111 lines
4.2 KiB
Svelte
111 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
// @ts-nocheck
|
|
import { appController } from '$lib/app/controller';
|
|
import { appState } from '$lib/app/store';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { Label } from '$lib/components/ui/label/index.js';
|
|
|
|
let { mode = 'login' } = $props<{ mode?: 'login' | 'signup' }>();
|
|
|
|
const isSignup = () => mode === 'signup';
|
|
const title = () => (isSignup() ? 'Create your PhoneCam account' : 'Sign in to PhoneCam');
|
|
const description = () =>
|
|
isSignup()
|
|
? 'Create an account to finish setting up this browser.'
|
|
: 'Use your account to open the dashboard and continue setup.';
|
|
const primaryLabel = () => (isSignup() ? 'Create account' : 'Sign in');
|
|
const secondaryLabel = () => (isSignup() ? 'Sign in instead' : 'Create an account');
|
|
const secondaryPrompt = () => (isSignup() ? 'Already have an account?' : 'Need an account?');
|
|
const secondaryHref = () => (isSignup() ? '/auth/login' : '/auth/signup');
|
|
|
|
$effect(() => {
|
|
appController.setAuthMode(isSignup());
|
|
});
|
|
</script>
|
|
|
|
<section class="mx-auto flex min-h-full w-full max-w-5xl flex-col px-4 py-8 sm:px-6">
|
|
<nav class="flex items-center border-b border-white/10 pb-4">
|
|
<Button
|
|
href="/"
|
|
variant="ghost"
|
|
class="h-auto rounded-full px-3 text-sm font-semibold text-white hover:bg-white/5 hover:text-sky-200"
|
|
>
|
|
PhoneCam
|
|
</Button>
|
|
</nav>
|
|
|
|
<div class="flex flex-1 items-center justify-center pt-8">
|
|
<Card variant="glass" class="w-full max-w-md rounded-3xl border-white/10 bg-black/45 backdrop-blur-xl">
|
|
<CardHeader class="space-y-3 px-6 pt-6 text-left sm:px-7 sm:pt-7">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-200/80">PhoneCam</p>
|
|
<div class="space-y-2">
|
|
<CardTitle class="text-3xl font-semibold tracking-tight text-white">{title()}</CardTitle>
|
|
<CardDescription class="text-sm leading-6 text-slate-400">{description()}</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-5 px-6 pb-6 sm:px-7 sm:pb-7">
|
|
{#if isSignup()}
|
|
<div id="authNameField" class="space-y-2">
|
|
<Label for="authName" class="text-sm font-medium text-slate-200">Display name</Label>
|
|
<Input
|
|
id="authName"
|
|
type="text"
|
|
placeholder="Jane Doe"
|
|
class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
|
|
value={$appState.authForm.name}
|
|
oninput={(event) => appController.setAuthField('name', (event.currentTarget as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="space-y-2">
|
|
<Label for="authEmail" class="text-sm font-medium text-slate-200">Email</Label>
|
|
<Input
|
|
id="authEmail"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
|
|
value={$appState.authForm.email}
|
|
oninput={(event) => appController.setAuthField('email', (event.currentTarget as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="authPassword" class="text-sm font-medium text-slate-200">Password</Label>
|
|
<Input
|
|
id="authPassword"
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
class="h-11 rounded-2xl border-white/10 bg-white/[0.04] text-sm text-white placeholder:text-slate-500"
|
|
value={$appState.authForm.password}
|
|
oninput={(event) => appController.setAuthField('password', (event.currentTarget as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
id="signInBtn"
|
|
variant="premium"
|
|
class="h-11 w-full rounded-2xl text-sm font-semibold"
|
|
onclick={() => appController.submitAuth()}
|
|
>
|
|
{primaryLabel()}
|
|
</Button>
|
|
|
|
<div class="border-t border-white/10 pt-4 text-center text-sm text-slate-400">
|
|
<span>{secondaryPrompt()}</span>
|
|
<Button
|
|
href={secondaryHref()}
|
|
variant="ghost"
|
|
class="ml-1 h-auto rounded-full px-2 text-sm font-medium text-white hover:bg-transparent hover:text-sky-200"
|
|
>
|
|
{secondaryLabel()}
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|