fileserver/frontend/src/pages/Signup.svelte
2024-08-28 21:11:04 +02:00

56 lines
2.1 KiB
Svelte

<script lang="ts">
import {Button, ButtonGroup, Card, Input, InputAddon} from 'flowbite-svelte';
import {Email, Password} from '../icons';
import {error_banner, info_banner, rpc, workingWrapperO} from '../store';
import {replace} from 'svelte-spa-router';
let username = '', username2 = '', password = '', password2 = '';
async function signup() {
error_banner.set('');
if (username != username2) {
error_banner.set('Email doesn\'t match');
return;
}
if (password != password2) {
error_banner.set('Password doesn\'t match');
return;
}
const resp = await workingWrapperO(() => rpc.Auth_signup(username, password));
if (resp) {
info_banner.set('Account created, please wait till an administrator approves it');
await replace('/login');
}
}
function keyUp(e: KeyboardEvent) {
if (e.key == 'Enter') signup();
}
</script>
<Card class="w-full max-w-lg">
<h3 class="mb-6">Sign in</h3>
<ButtonGroup class="w-full mb-2">
<InputAddon><Email /></InputAddon>
<Input type="email" placeholder="Email" bind:value={username} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full mb-4">
<InputAddon><Email /></InputAddon>
<Input type="email" placeholder="Repeat email" bind:value={username2} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full mb-2">
<InputAddon><Password /></InputAddon>
<Input type="password" placeholder="Password" bind:value={password} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full mb-4">
<InputAddon><Password /></InputAddon>
<Input type="password" placeholder="Repeat password" bind:value={password2} on:keyup={keyUp}></Input>
</ButtonGroup>
<ButtonGroup class="w-full flex flex-nowrap">
<Button class="flex-1 flex-grow" color="primary" outline href="#/login">Login</Button>
<Button class="flex-1 flex-grow" color="primary" on:click={signup}>Singup</Button>
</ButtonGroup>
</Card>