lilianrock/generateur_v3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add titles head

Browse Source
This commit is contained in:
Lilian 2023-02-28 20:08:40 +01:00 committed by Kilton937342
parent 75cc30ccc8
commit 229f2097fd
8 changed files with 110 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/routes/+layout.svelte
View File

@ -15,6 +15,11 @@
</script> </script>
<svelte:head>
<title>Générateur d'exercices</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/favicon.png">
</svelte:head>
<Notification> <Notification>
<Navigation> <Navigation>

4
frontend/src/routes/dashboard/+page.svelte
View File

@ -32,7 +32,9 @@
$: !$initialLoading && !$isAuth && goto("/"); $: !$initialLoading && !$isAuth && goto("/");
</script> </script>
<svelte:head>
<title>Profil - {$user != null ? $user.username: ""}</title>
</svelte:head>
<div> <div>
{#if $user != null} {#if $user != null}
<h1>Mon compte</h1> <h1>Mon compte</h1>

4
frontend/src/routes/exercices/[[slug]]/+page.svelte
View File

@ -3,5 +3,7 @@
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
</script> </script>
<svelte:head>
<title>Exercices</title>
</svelte:head>
<Feed /> <Feed />

4
frontend/src/routes/room/+page.svelte
View File

@ -11,7 +11,9 @@
<button class="primary-btn" on:click={()=>{goto('/room/create')}}>Créer</button> <button class="primary-btn" on:click={()=>{goto('/room/create')}}>Créer</button>
</div> </div>
</div> </div>
<svelte:head>
<title>Rejoindre</title>
</svelte:head>
<style lang="scss"> <style lang="scss">
h1{ h1{
font-size: 4rem; font-size: 4rem;

4
frontend/src/routes/room/[...slug]/+page.svelte
View File

@ -463,6 +463,10 @@
</script> </script>
<svelte:head>
<title>{$room != null ? $room.name: "Salle - Chargement"}</title>
</svelte:head>
<div class="container"> <div class="container">
<div class="full" class:fade> <div class="full" class:fade>
{#if $page.url.searchParams.get('a') == "waiting"} {#if $page.url.searchParams.get('a') == "waiting"}

4
frontend/src/routes/room/create/+page.svelte
View File

@ -48,7 +48,9 @@
</button> </button>
</form> </form>
</div> </div>
<svelte:head>
<title>Créer une salle</title>
</svelte:head>
<style lang="scss"> <style lang="scss">
h1 { h1 {
font-size: 3em; font-size: 3em;

4
frontend/src/routes/signin/+page.svelte
View File

@ -13,7 +13,9 @@
} }
let loading = false let loading = false
</script> </script>
<svelte:head>
<title>Se connecter</title>
</svelte:head>
<div class="parent"> <div class="parent">
<div> <div>
<h1>Se connecter</h1> <h1>Se connecter</h1>

163
frontend/src/routes/signup/+page.svelte
View File

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