109 lines
2.6 KiB
Svelte
109 lines
2.6 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>
|
|
|
|
<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
|
|
console.log('ERREUR', r);
|
|
|
|
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 {
|
|
width: 40%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
.spinner{
|
|
width: 15px;
|
|
height: 15px;
|
|
border-width: 2px!important;
|
|
}
|
|
</style>
|