52 lines
1.7 KiB
Svelte
52 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { field, form } from "svelte-forms";
|
|
import { max, min, required, email } from "svelte-forms/validators";
|
|
import LabeledInput from "../forms/LabeledInput.svelte";
|
|
import type { User } from "../../types/auth.type";
|
|
import { onMount } from "svelte";
|
|
import { errorMsg } from "../../utils/forms.js";
|
|
|
|
export let user: User;
|
|
export let myForm;
|
|
const username = field("username", user.username, [required(), max(20), min(2)], {
|
|
checkOnInit: true
|
|
});
|
|
const name = field("name", user.name || "", [max(50)], {
|
|
checkOnInit: true
|
|
});
|
|
const firstname = field("firstname", user.firstname || "", [max(50)], {
|
|
checkOnInit: true
|
|
});
|
|
const emailField = field("email", user.email || "", [ /*email()*/], {
|
|
checkOnInit: true
|
|
});
|
|
onMount(() => {
|
|
myForm = form(username, name, firstname, emailField);
|
|
});
|
|
</script>
|
|
|
|
{#if !!$myForm}
|
|
<div class="">
|
|
<LabeledInput bind:value={$username.value} label="Nom d'utilisateur" type="text" placeholder="Nom d'utilisateur..."
|
|
errors={errorMsg($myForm, 'username')} />
|
|
<LabeledInput bind:value={$emailField.value} label="Email" type="email" placeholder="Email..."
|
|
errors={errorMsg($myForm, 'email')} />
|
|
<LabeledInput bind:value={$name.value} label="Nom" type="text" placeholder="Nom..."
|
|
errors={errorMsg($myForm, 'name')} />
|
|
<LabeledInput bind:value={$firstname.value} label="Prénom" type="text" placeholder="Prénom..."
|
|
errors={errorMsg($myForm, 'firstname')} />
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
@import "../../mixins.scss";
|
|
|
|
div {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
@include down(800px){
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|