119 lines
2.8 KiB
Svelte
119 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import InputWithLabel from "../../components/forms/InputWithLabel.svelte";
|
|
import { form, field } from "svelte-forms";
|
|
import { getContext, onMount } from "svelte";
|
|
import { required, max, min, matchField, pattern } from "svelte-forms/validators";
|
|
import { errorMsg } from "../../utils/forms";
|
|
import { writable } from "svelte/store";
|
|
import { goto } from "$app/navigation";
|
|
|
|
let errors = {
|
|
password_error: null,
|
|
username_error: null,
|
|
confirm_error: null
|
|
};
|
|
const { register, isAuth, initialLoading } = getContext("auth");
|
|
const username = field("username", "", [required(), max(20)]);
|
|
const password = field("password", "", [required(), min(8), pattern(/[0-9]/), pattern(/[A-Z]/)]);
|
|
const confirm = field("confirm", "", [required(), matchField(password)]);
|
|
const myForm = form(username, password, confirm);
|
|
|
|
$: !$initialLoading && !!$isAuth && goto("/dashboard");
|
|
let loading = false;
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
<title>S'inscrire</title>
|
|
</svelte:head>
|
|
|
|
<div class="parent">
|
|
<div>
|
|
<h1>S'inscrire</h1>
|
|
<InputWithLabel
|
|
change={(e) => {
|
|
errors.username_error = null;
|
|
}}
|
|
type="text"
|
|
bind:value={$username.value}
|
|
label="Nom d'utilisateur"
|
|
errors={[
|
|
...errorMsg($myForm, 'username'),
|
|
...(errors.username_error != null ? [errors.username_error] : [])
|
|
]}
|
|
/>
|
|
<InputWithLabel
|
|
change={(e) => {
|
|
errors.password_error = null;
|
|
}}
|
|
type="password"
|
|
bind:value={$password.value}
|
|
label="Mot de passe"
|
|
errors={[
|
|
...errorMsg($myForm, 'password'),
|
|
...(errors.password_error != null ? [errors.password_error] : [])
|
|
]}
|
|
/>
|
|
<InputWithLabel
|
|
type="password"
|
|
change={(e) => {
|
|
errors.confirm_error = null;
|
|
}}
|
|
bind:value={$confirm.value}
|
|
label="Confirmation"
|
|
errors={[
|
|
...errorMsg($myForm, 'confirm'),
|
|
...(errors.confirm_error != null ? [errors.confirm_error] : [])
|
|
]}
|
|
/>
|
|
<button
|
|
class="primary-btn"
|
|
on:click={() => {
|
|
loading = true
|
|
register($username.value, $password.value, $confirm.value).then(()=>{loading=false}).catch((r) => {
|
|
loading = false
|
|
|
|
|
|
errors = { ...errors, ...r.data.detail };
|
|
});
|
|
}}
|
|
disabled={!$myForm.valid}
|
|
>
|
|
<!-- loading et span.spinner else text-->
|
|
{#if loading}
|
|
<span class="spinner"></span>
|
|
{:else}
|
|
S'inscrire
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
h1 {
|
|
font-size: 4em;
|
|
}
|
|
|
|
.parent {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 50px;
|
|
|
|
div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
width: min(100%, 666px);
|
|
padding: 7px 20px;
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-width: 2px !important;
|
|
}
|
|
</style>
|