stan/website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes and cs prices
All checks were successful
Test and deploy staging / staging (push) Successful in 11m52s
Details

Browse Source
This commit is contained in:
Stan Runge
2026-09-25 00:44:06 +00:00
parent c757d0882a
commit abac077541
200 changed files with 6236 additions and 2311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/lib/components/AuthForm.svelte
View File

@@ -3,6 +3,11 @@
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { Button } from '$lib/components/ui/button/index.js';
import * as Card 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 { Separator } from '$lib/components/ui/separator/index.js';
let {
mode,
providers,
@@ -67,83 +72,90 @@
</script>
<section class="mx-auto my-12 max-w-md px-4 sm:my-20">
<h1 class="mb-8 text-3xl font-semibold tracking-tight">
{mode === 'register' ? 'create account' : 'sign in'}
</h1>
{#if message || oauthError}
<p role="alert" class="mb-4 rounded bg-red-50 p-3 text-red-800">
{message ||
'Provider sign-in failed or was cancelled. Try again, or use your existing login and link the provider from your account.'}
</p>
{/if}
<form method="POST" onsubmit={submit} class="flex flex-col gap-4">
{#if mode === 'register'}
<label class="flex flex-col gap-1"
>Name<input
class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
disabled={!ready || busy}
name="name"
autocomplete="name"
required
maxlength="100"
bind:value={name}
/></label
>
{/if}
<label class="flex flex-col gap-1"
>Email<input
class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
disabled={!ready || busy}
name="email"
type="email"
autocomplete="email"
required
bind:value={email}
/></label
<Card.Root>
<Card.Header
><Card.Title class="text-2xl">{mode === 'register' ? 'create account' : 'sign in'}</Card.Title
><Card.Description>Use your account to save and manage your work.</Card.Description
></Card.Header
>
<label class="flex flex-col gap-1"
>Password<input
class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
disabled={!ready || busy}
name="password"
type="password"
autocomplete={mode === 'register' ? 'new-password' : 'current-password'}
required
minlength={mode === 'register' ? 12 : undefined}
maxlength="128"
bind:value={password}
/></label
>
{#if mode === 'register'}<p class="text-sm text-gray-600">Use at least 12 characters.</p>{/if}
<button
disabled={!ready || busy}
class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)] disabled:opacity-50"
>{busy ? 'please wait…' : mode === 'register' ? 'create account' : 'sign in'}</button
>
</form>
{#if providers.google || providers.osu}
<div class="my-6 flex flex-col gap-3 border-t border-[var(--site-border)] pt-4">
{#if providers.google}<button
disabled={!ready || busy}
onclick={() => social('google')}
class="rounded border border-[var(--site-border)] px-4 py-2 disabled:opacity-50"
>Continue with Google</button
>{/if}
{#if providers.osu}<button
disabled={!ready || busy}
onclick={() => social('osu')}
class="rounded border border-[var(--site-border)] px-4 py-2 disabled:opacity-50"
>Continue with osu!</button
>{/if}
</div>
{/if}
<p class="mt-6 text-base">
<a
class="underline underline-offset-4"
href={resolve(
`${mode === 'register' ? '/login' : '/register'}?returnTo=${encodeURIComponent(returnTo)}`
)}>{mode === 'register' ? 'sign in' : 'Create account'}</a
>
</p>
<noscript><p class="mt-4">Enable JavaScript to securely sign in or register.</p></noscript>
<Card.Content>
{#if message || oauthError}
<p
role="alert"
class="mb-4 rounded-md border border-destructive/30 bg-destructive/10 p-3 text-sm text-destructive"
>
{message ||
'Provider sign-in failed or was cancelled. Try again, or use your existing login and link the provider from your account.'}
</p>
{/if}
<form method="POST" onsubmit={submit} class="flex flex-col gap-4">
{#if mode === 'register'}
<div class="space-y-2">
<Label for="auth-name">Name</Label><Input
id="auth-name"
disabled={!ready || busy}
name="name"
autocomplete="name"
required
maxlength={100}
bind:value={name}
/>
</div>
{/if}
<div class="space-y-2">
<Label for="auth-email">Email</Label><Input
id="auth-email"
disabled={!ready || busy}
name="email"
type="email"
autocomplete="email"
required
bind:value={email}
/>
</div>
<div class="space-y-2">
<Label for="auth-password">Password</Label><Input
id="auth-password"
disabled={!ready || busy}
name="password"
type="password"
autocomplete={mode === 'register' ? 'new-password' : 'current-password'}
required
minlength={mode === 'register' ? 12 : undefined}
maxlength={128}
bind:value={password}
/>{#if mode === 'register'}<p class="text-sm text-muted-foreground">
Use at least 12 characters.
</p>{/if}
</div>
<Button type="submit" disabled={!ready || busy} class="w-full"
>{busy ? 'please wait…' : mode === 'register' ? 'create account' : 'sign in'}</Button
>
</form>
{#if providers.google || providers.osu}
<div class="my-6 flex flex-col gap-3">
<Separator />
{#if providers.google}<Button
variant="outline"
disabled={!ready || busy}
onclick={() => social('google')}>Continue with Google</Button
>{/if}
{#if providers.osu}<Button
variant="outline"
disabled={!ready || busy}
onclick={() => social('osu')}>Continue with osu!</Button
>{/if}
</div>
{/if}
<p class="mt-6 text-base">
<a
class="underline underline-offset-4"
href={resolve(
`${mode === 'register' ? '/login' : '/register'}?returnTo=${encodeURIComponent(returnTo)}`
)}>{mode === 'register' ? 'sign in' : 'Create account'}</a
>
</p>
<noscript><p class="mt-4">Enable JavaScript to securely sign in or register.</p></noscript>
</Card.Content>
</Card.Root>
</section>