Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add landing page and dedicated auth screens

Browse Source
This commit is contained in:
Matiss Jurevics
2026-04-17 15:50:00 +01:00
parent fac6409ec4
commit e9f4f67eee
11 changed files with 658 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
WebApp/src/lib/auth/AuthPanel.svelte Normal file
View File

@@ -0,0 +1,135 @@
<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, CardFooter, 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';
import { ArrowRight } from '@lucide/svelte';
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()
? 'Start setting up browser-based monitoring and client viewing in a few steps.'
: 'Return to your live monitoring workspace and pick up where you left off.';
const primaryLabel = () => (isSignup() ? 'Create account' : 'Sign in');
const secondaryLabel = () => (isSignup() ? 'I already have an account' : 'Create 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-6xl items-center px-6 py-8 sm:px-10 lg:px-12">
<div class="grid w-full gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
<div class="space-y-8">
<div class="inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-sky-100/70">
<span class="h-2 w-2 rounded-full bg-sky-400 shadow-[0_0_12px_rgba(56,189,248,0.8)]"></span>
PhoneCam Browser Console
</div>
<div class="space-y-5">
<h1 class="max-w-xl text-4xl font-semibold tracking-[-0.04em] text-white sm:text-5xl lg:text-6xl">
Turn any browser into a live security surface.
</h1>
<p class="max-w-xl text-base leading-7 text-slate-300 sm:text-lg">
Authenticate once, assign this browser as a camera or client, and manage motion alerts, recordings, and live feeds from a single control plane.
</p>
</div>
<div class="grid gap-4 border-t border-white/10 pt-6 text-sm text-slate-300 sm:grid-cols-3">
<div class="space-y-2">
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Assign roles</p>
<p>Register this browser as a camera station or a client viewer without leaving the web app.</p>
</div>
<div class="space-y-2">
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Stay live</p>
<p>Watch feeds, monitor connection health, and see motion activity arrive in real time.</p>
</div>
<div class="space-y-2">
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">Carry context</p>
<p>Your saved device and session restore cleanly so returning to the workspace is fast.</p>
</div>
</div>
</div>
<Card variant="glass" class="overflow-hidden rounded-[2rem] border-white/10 bg-black/45 backdrop-blur-xl">
<div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-sky-400/50 to-transparent"></div>
<CardHeader class="gap-5 px-7 pt-7 text-center">
<p class="text-[11px] font-semibold uppercase tracking-[0.24em] 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-4 px-7">
<div class="space-y-2">
<Label class="sr-only" for="authEmail">Email</Label>
<Input
id="authEmail"
type="email"
placeholder="Email address"
class="h-12 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 class="sr-only" for="authPassword">Password</Label>
<Input
id="authPassword"
type="password"
placeholder="Password"
class="h-12 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>
{#if isSignup()}
<div id="authNameField" class="space-y-2">
<Label class="sr-only" for="authName">Name</Label>
<Input
id="authName"
type="text"
placeholder="Display name"
class="h-12 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}
</CardContent>
<CardFooter class="flex flex-col items-stretch gap-4 px-7 pb-7 pt-2">
<Button
id="signInBtn"
variant="premium"
class="h-12 w-full rounded-2xl text-base shadow-[0_24px_60px_rgba(37,99,235,0.26)]"
onclick={() => appController.submitAuth()}
>
{primaryLabel()}
</Button>
<div class="flex items-center justify-between gap-4 rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">
<span>{isSignup() ? 'Already provisioned?' : 'Need a new workspace?'}</span>
<Button
href={secondaryHref()}
variant="ghost"
class="h-auto rounded-full px-0 text-sm font-medium text-white hover:bg-transparent hover:text-sky-200"
>
{secondaryLabel()}
<ArrowRight class="ml-2 size-4" />
</Button>
</div>
</CardFooter>
</Card>
</div>
</section>