feat: docs
This commit is contained in:
@ -1,29 +1,151 @@
|
||||
<script lang="ts">
|
||||
import { Tabs } from 'bits-ui';
|
||||
import { Tabs, Button } from 'bits-ui';
|
||||
import { cn } from '$lib/utils';
|
||||
import { AuthClient } from '$lib/transport';
|
||||
import { goto } from '$app/navigation';
|
||||
import { ConnectError } from '@connectrpc/connect';
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
let tab = $state('login');
|
||||
</script>
|
||||
|
||||
<div class="pt-6">
|
||||
<Tabs.Root
|
||||
value="outbound"
|
||||
class="rounded-card border-muted bg-background-alt shadow-card w-[390px] border p-3"
|
||||
>
|
||||
<div class="flex h-screen flex-col items-center justify-center">
|
||||
<Tabs.Root bind:value={tab} class="w-[390px] p-3">
|
||||
<Tabs.List
|
||||
class="rounded-9px bg-dark-10 shadow-mini-inset dark:bg-background grid w-full grid-cols-2 gap-1 p-1 text-sm font-semibold leading-[0.01em] dark:border dark:border-neutral-600/30"
|
||||
class="bg-mantle border-surface-0 flex w-full justify-around gap-1 rounded-lg border p-1 drop-shadow-md"
|
||||
>
|
||||
<Tabs.Trigger
|
||||
value="outbound"
|
||||
class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
|
||||
value="login"
|
||||
class={cn(
|
||||
'hover:bg-surface-0 grow cursor-pointer rounded p-2 transition-all',
|
||||
tab == 'login' && 'bg-surface-0'
|
||||
)}>Log In</Tabs.Trigger
|
||||
>
|
||||
Outbound
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger
|
||||
value="inbound"
|
||||
class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
|
||||
value="signup"
|
||||
class={cn(
|
||||
'hover:bg-surface-0 grow cursor-pointer rounded p-2 transition-all',
|
||||
tab == 'signup' && 'bg-surface-0'
|
||||
)}>Sign Up</Tabs.Trigger
|
||||
>
|
||||
Inbound
|
||||
</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="outbound" class="select-none pt-3">Test1</Tabs.Content>
|
||||
<Tabs.Content value="inbound" class="select-none pt-3">Test2</Tabs.Content>
|
||||
<Tabs.Content
|
||||
value="login"
|
||||
class="bg-mantle border-surface-0 mt-2 rounded-lg border p-6 drop-shadow-md"
|
||||
>
|
||||
<form
|
||||
onsubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target as HTMLFormElement);
|
||||
const username = formData.get('login-username')?.toString();
|
||||
const password = formData.get('login-password')?.toString();
|
||||
|
||||
try {
|
||||
const response = await AuthClient.login({
|
||||
username: username,
|
||||
password: password
|
||||
});
|
||||
|
||||
if (response.token && username) {
|
||||
localStorage.setItem('username', username);
|
||||
goto('/');
|
||||
}
|
||||
} catch (err) {
|
||||
const error = ConnectError.from(err);
|
||||
toast.error(error.rawMessage);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="login-username" class="text-sm">Username</label>
|
||||
<input
|
||||
id="login-username"
|
||||
name="login-username"
|
||||
type="text"
|
||||
class="border-surface-0 rounded border p-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="login-password" class="text-sm">Password</label>
|
||||
<input
|
||||
id="login-password"
|
||||
name="login-password"
|
||||
type="password"
|
||||
class="border-surface-0 rounded border p-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Button.Root
|
||||
type="submit"
|
||||
class="bg-sky text-crust hover:brightness-120 w-20 cursor-pointer rounded p-2 px-4 text-sm transition-all"
|
||||
>
|
||||
Submit
|
||||
</Button.Root>
|
||||
</div>
|
||||
</form>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content
|
||||
value="signup"
|
||||
class="bg-mantle border-surface-0 mt-2 rounded-lg border p-6 drop-shadow-md"
|
||||
>
|
||||
<form
|
||||
onsubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target as HTMLFormElement;
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
await AuthClient.signUp({
|
||||
username: formData.get('signup-username')?.toString(),
|
||||
password: formData.get('signup-password')?.toString(),
|
||||
confirmPassword: formData.get('signup-confirm-password')?.toString()
|
||||
});
|
||||
|
||||
toast.success('account created successfully, please log in');
|
||||
form.reset();
|
||||
tab = 'login';
|
||||
} catch (err) {
|
||||
const error = ConnectError.from(err);
|
||||
toast.error(error.rawMessage);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="signup-username" class="text-sm">Username</label>
|
||||
<input
|
||||
id="signup-username"
|
||||
name="signup-username"
|
||||
type="text"
|
||||
class="border-surface-0 rounded border p-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="signup-password" class="text-sm">Password</label>
|
||||
<input
|
||||
id="signup-password"
|
||||
name="signup-password"
|
||||
type="password"
|
||||
class="border-surface-0 rounded border p-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="signup-confirm-password" class="text-sm">Confirm Password</label>
|
||||
<input
|
||||
id="signup-confirm-password"
|
||||
name="signup-confirm-password"
|
||||
type="password"
|
||||
class="border-surface-0 rounded border p-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Button.Root
|
||||
type="submit"
|
||||
class="bg-sky text-crust hover:brightness-120 w-20 cursor-pointer rounded p-2 px-4 text-sm transition-all"
|
||||
>
|
||||
Submit
|
||||
</Button.Root>
|
||||
</div>
|
||||
</form>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user