mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Fixing up logged in sheet.
This commit is contained in:
parent
98acc78ea3
commit
df665376ef
3 changed files with 105 additions and 77 deletions
|
|
@ -2,7 +2,7 @@
|
|||
import { enhance } from '$app/forms';
|
||||
import { LogOut } from 'lucide-svelte';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Toggle } from "$lib/components/ui/toggle";
|
||||
// import { Toggle } from "$lib/components/ui/toggle"; -- TODO: Add light/dark toggle
|
||||
import * as Avatar from "$lib/components/ui/avatar";
|
||||
import * as Sheet from "$lib/components/ui/sheet";
|
||||
import Logo from '$components/logo.svelte';
|
||||
|
|
@ -34,9 +34,6 @@
|
|||
<Sheet.Content side="right">
|
||||
<Sheet.Header>
|
||||
<Sheet.Title>Menu</Sheet.Title>
|
||||
<Toggle aria-label="toggle bold">
|
||||
|
||||
</Toggle>
|
||||
</Sheet.Header>
|
||||
<div class="menu">
|
||||
<Sheet.Close asChild let:builder>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="quote-wrapper">
|
||||
<blockquote class="quote">
|
||||
<p>
|
||||
"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sound like you then Bored Game is your new best friend."
|
||||
"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sounds like you then Bored Game is your new best friend."
|
||||
</p>
|
||||
<footer>Bradley</footer>
|
||||
</blockquote>
|
||||
|
|
|
|||
|
|
@ -43,82 +43,113 @@
|
|||
<title>Bored Game | Sign Up</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page">
|
||||
<div class="sign-up">
|
||||
<form method="POST" action="/sign-up" use:enhance>
|
||||
<div class="grid w-full max-w-sm items-center gap-2.5">
|
||||
<h2
|
||||
class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
|
||||
>
|
||||
Signup for an account
|
||||
</h2>
|
||||
<Label for="username">Username</Label>
|
||||
<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
|
||||
{#if $errors.username}
|
||||
<p class="text-sm text-destructive">{$errors.username}</p>
|
||||
{/if}
|
||||
<Label for="password">Password</Label>
|
||||
<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
|
||||
{#if $errors.password}
|
||||
<p class="text-sm text-destructive">{$errors.password}</p>
|
||||
{/if}
|
||||
<Label for="confirm_password">Confirm Password</Label>
|
||||
<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
|
||||
{#if $errors.confirm_password}
|
||||
<p class="text-sm text-destructive">{$errors.confirm_password}</p>
|
||||
{/if}
|
||||
<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
|
||||
<div>
|
||||
Optional Fields:
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
|
||||
<ChevronsUpDown class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle</span>
|
||||
</Button>
|
||||
</Collapsible.Trigger>
|
||||
</div>
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="email">Email</Label>
|
||||
<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
|
||||
{#if $errors.email}
|
||||
<p class="text-sm text-destructive">{$errors.email}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="firstName">First Name</Label>
|
||||
<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
|
||||
{#if $errors.firstName}
|
||||
<p class="text-sm text-destructive">{$errors.firstName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="firstName">Last Name</Label>
|
||||
<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
|
||||
{#if $errors.lastName}
|
||||
<p class="text-sm text-destructive">{$errors.lastName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<div class="grid grid-cols-2">
|
||||
<Button type="submit">Signup</Button>
|
||||
<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
|
||||
<h2>Signup for an account</h2>
|
||||
<Label for="username">Username</Label>
|
||||
<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
|
||||
{#if $errors.username}
|
||||
<p class="text-sm text-destructive">{$errors.username}</p>
|
||||
{/if}
|
||||
<Label for="password">Password</Label>
|
||||
<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
|
||||
{#if $errors.password}
|
||||
<p class="text-sm text-destructive">{$errors.password}</p>
|
||||
{/if}
|
||||
<Label for="confirm_password">Confirm Password</Label>
|
||||
<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
|
||||
{#if $errors.confirm_password}
|
||||
<p class="text-sm text-destructive">{$errors.confirm_password}</p>
|
||||
{/if}
|
||||
<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
|
||||
<div>
|
||||
Optional Fields:
|
||||
<Collapsible.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
|
||||
<ChevronsUpDown class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle</span>
|
||||
</Button>
|
||||
</Collapsible.Trigger>
|
||||
</div>
|
||||
{#if !$form.email}
|
||||
<Alert.Root>
|
||||
<Alert.Title level="h3">Heads up!</Alert.Title>
|
||||
<Alert.Description>
|
||||
Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="email">Email</Label>
|
||||
<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
|
||||
{#if $errors.email}
|
||||
<p class="text-sm text-destructive">{$errors.email}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="firstName">First Name</Label>
|
||||
<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
|
||||
{#if $errors.firstName}
|
||||
<p class="text-sm text-destructive">{$errors.firstName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
<Collapsible.Content>
|
||||
<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
|
||||
<Label for="firstName">Last Name</Label>
|
||||
<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
|
||||
{#if $errors.lastName}
|
||||
<p class="text-sm text-destructive">{$errors.lastName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
<div class="grid grid-cols-2">
|
||||
<Button type="submit">Signup</Button>
|
||||
<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
|
||||
</div>
|
||||
{#if !$form.email}
|
||||
<Alert.Root>
|
||||
<Alert.Title level="h3">Heads up!</Alert.Title>
|
||||
<Alert.Description>
|
||||
Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style scoped>
|
||||
<style lang="postcss">
|
||||
.sign-up {
|
||||
display: flex;
|
||||
margin-top: 1.5rem;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
max-width: 24rem;
|
||||
|
||||
h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom-width: 1px;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 300ms;
|
||||
scroll-margin: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue