121 lines
4.8 KiB
Svelte
121 lines
4.8 KiB
Svelte
<script lang="ts">
|
|
// @ts-nocheck
|
|
import AppChrome from '$lib/sim/ui/AppChrome.svelte';
|
|
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 { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
|
|
import { Settings } from '@lucide/svelte';
|
|
|
|
let showAdvancedSettings = false;
|
|
</script>
|
|
|
|
<AppChrome pageKey="onboarding">
|
|
<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
|
|
<Card variant="glass" class="w-full rounded-3xl">
|
|
<CardHeader class="px-6 pt-6 text-center">
|
|
<CardTitle class="text-3xl font-bold tracking-tight text-white">Configure Device</CardTitle>
|
|
<CardDescription class="text-sm text-gray-400">Set up this browser dashboard role</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="flex flex-col gap-6 px-6">
|
|
<div class="flex flex-col gap-2">
|
|
<Label class="text-xs font-semibold tracking-wider text-gray-400" for="deviceName">DEVICE NAME</Label>
|
|
<Input
|
|
id="deviceName"
|
|
type="text"
|
|
placeholder="e.g. Living Room Cam"
|
|
class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
|
|
value={$appState.onboardingForm.name}
|
|
oninput={(event) => appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Label class="text-xs font-semibold tracking-wider text-gray-400" for="role">ROLE</Label>
|
|
<ToggleGroup
|
|
id="role"
|
|
type="single"
|
|
value={$appState.onboardingForm.role}
|
|
variant="outline"
|
|
size="lg"
|
|
class="grid w-full grid-cols-2 gap-2 rounded-xl border border-white/5 bg-black/40 p-1.5"
|
|
onValueChange={(value) => value && appController.selectRole(value)}
|
|
>
|
|
<ToggleGroupItem
|
|
id="btn-role-camera"
|
|
value="camera"
|
|
class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
|
|
>
|
|
Camera
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem
|
|
id="btn-role-client"
|
|
value="client"
|
|
class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
|
|
>
|
|
Client
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="space-y-1">
|
|
<Label class="text-xs font-semibold tracking-wider text-gray-400">ADVANCED SETTINGS</Label>
|
|
<p class="text-xs text-gray-500">Optional device settings and push configuration.</p>
|
|
</div>
|
|
<Button
|
|
id="toggleAdvancedSettingsBtn"
|
|
type="button"
|
|
variant="ghost"
|
|
class="h-10 w-10 rounded-full border border-white/10 bg-black/30 p-0 text-gray-300 hover:bg-white/5 hover:text-white"
|
|
aria-label={showAdvancedSettings ? 'Hide advanced settings' : 'Show advanced settings'}
|
|
aria-expanded={showAdvancedSettings}
|
|
onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
|
|
>
|
|
<Settings class="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{#if showAdvancedSettings}
|
|
<div class="rounded-2xl border border-white/8 bg-black/30 p-4">
|
|
<div class="flex flex-col gap-2">
|
|
<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
|
|
<Input
|
|
id="pushToken"
|
|
type="text"
|
|
placeholder="simulated_token_123"
|
|
class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
|
|
value={$appState.onboardingForm.pushToken}
|
|
oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
|
|
<Button
|
|
id="registerBtn"
|
|
variant="premium"
|
|
class="h-12 w-full rounded-xl text-base"
|
|
onclick={() => appController.registerDevice()}
|
|
>
|
|
Complete Setup
|
|
</Button>
|
|
<Button
|
|
id="loadSavedBtn"
|
|
variant="ghost"
|
|
class="h-12 w-full rounded-xl text-gray-500 hover:bg-white/5 hover:text-white"
|
|
onclick={() => appController.loadSavedDevice()}
|
|
>
|
|
Load previously saved device
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</section>
|
|
</AppChrome>
|