Setup global toaster and finalize login/registration page
This commit is contained in:
parent
1af78e5ab7
commit
b3fae0b5db
9
app.vue
9
app.vue
|
|
@ -2,13 +2,18 @@
|
|||
<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
|
||||
<NuxtRouteAnnouncer/>
|
||||
<TooltipProvider>
|
||||
<ToastProvider>
|
||||
<NuxtLayout>
|
||||
<div class="px-12 flex flex-1 justify-center">
|
||||
<NuxtPage></NuxtPage>
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</ToastProvider>
|
||||
<Toaster v-model="list" />
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
provideToaster();
|
||||
|
||||
const { list } = useToast();
|
||||
</script>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<template>
|
||||
<ToastRoot :default-open="open" :duration="duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30" v-model:open="model">
|
||||
<div class="grid grid-cols-8 px-3 pt-2 pb-2">
|
||||
<ToastTitle v-if="title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
|
||||
<ToastClose v-if="closeable" aria-label="Close" class="text-xl -translate-y-2 translate-x-4 cursor-pointer"><span aria-hidden>×</span></ToastClose>
|
||||
<ToastDescription v-if="content" class="text-sm col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
|
||||
</div>
|
||||
<TimerProgress v-if="timer" shape="thin" :delay="duration" class="mb-0 mt-0 w-full" />
|
||||
</ToastRoot>
|
||||
|
||||
<ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<boolean>();
|
||||
|
||||
const { closeable = true, duration, title, content, timer = true } = defineProps<{
|
||||
closeable?: boolean
|
||||
duration?: number
|
||||
title?: string
|
||||
content?: string
|
||||
timer?: boolean
|
||||
open?: boolean
|
||||
}>();
|
||||
const timeout = ref<NodeJS.Timeout>();
|
||||
|
||||
watch(model, (value) => {
|
||||
if(duration)
|
||||
{
|
||||
if(value === true)
|
||||
{
|
||||
timeout.value = setTimeout(() => model.value = false, duration);
|
||||
}
|
||||
else
|
||||
{
|
||||
clearTimeout(timeout.value);
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ToastRoot[data-state='open'] {
|
||||
animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.ToastRoot[data-state='closed'] {
|
||||
animation: hide .1s ease-in;
|
||||
}
|
||||
.ToastRoot[data-swipe='move'] {
|
||||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||
}
|
||||
.ToastRoot[data-swipe='cancel'] {
|
||||
transform: translateX(0);
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
.ToastRoot[data-swipe='end'] {
|
||||
animation: swipeRight .1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(calc(100% + var(--viewport-padding)));
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes swipeRight {
|
||||
from {
|
||||
transform: translateX(var(--radix-toast-swipe-end-x));
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<ToastProvider>
|
||||
<ToastRoot v-for="toast in model" :key="toast.id" :duration="toast.duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 group" :open="toast.state ?? true" @update:open="(state: boolean) => tryClose(toast, state)" :data-type="toast.type ?? 'info'">
|
||||
<div class="grid grid-cols-8 px-3 pt-2 pb-2">
|
||||
<ToastTitle v-if="toast.title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ toast.title }}</h4></ToastTitle>
|
||||
<ToastClose v-if="toast.closeable" aria-label="Close" class="text-xl -translate-y-2 translate-x-4 cursor-pointer"><span aria-hidden>×</span></ToastClose>
|
||||
<ToastDescription v-if="toast.content" class="text-sm col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ toast.content }}</span></ToastDescription>
|
||||
</div>
|
||||
<TimerProgress v-if="toast.timer" shape="thin" :delay="toast.duration" class="mb-0 mt-0 w-full group-data-[type=error]:bg-light-red dark:group-data-[type=error]:bg-dark-red group-data-[type=error]:bg-opacity-50 dark:group-data-[type=error]:bg-opacity-50 group-data-[type=error]:*:bg-light-red dark:group-data-[type=error]:*:bg-dark-red
|
||||
group-data-[type=success]:bg-light-green dark:group-data-[type=success]:bg-dark-green group-data-[type=success]:bg-opacity-50 dark:group-data-[type=success]:bg-opacity-50 group-data-[type=success]:*:bg-light-green dark:group-data-[type=success]:*:bg-dark-green" @finish="() => tryClose(toast, false)" />
|
||||
</ToastRoot>
|
||||
|
||||
<ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
|
||||
</ToastProvider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<ExtraToastConfig[]>();
|
||||
|
||||
function tryClose(config: ExtraToastConfig, state: boolean)
|
||||
{
|
||||
if(!state)
|
||||
{
|
||||
const m = model.value;
|
||||
if(m)
|
||||
{
|
||||
const idx = m?.findIndex(e => e.id === config.id);
|
||||
m[idx].state = false;
|
||||
model.value = m;
|
||||
}
|
||||
setTimeout(() => model.value?.splice(model.value?.findIndex(e => e.id === config.id), 1), 500);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ToastRoot[data-type='error'] {
|
||||
@apply border-light-red;
|
||||
@apply dark:border-dark-red;
|
||||
@apply bg-light-red;
|
||||
@apply dark:bg-dark-red;
|
||||
@apply bg-opacity-15;
|
||||
}
|
||||
.ToastRoot[data-type='success'] {
|
||||
@apply border-light-green;
|
||||
@apply dark:border-dark-green;
|
||||
@apply bg-light-green;
|
||||
@apply dark:bg-dark-green;
|
||||
@apply bg-opacity-15;
|
||||
}
|
||||
.ToastRoot[data-state='open'] {
|
||||
animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.ToastRoot[data-state='closed'] {
|
||||
animation: hide .1s ease-in;
|
||||
}
|
||||
.ToastRoot[data-swipe='move'] {
|
||||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||
}
|
||||
.ToastRoot[data-swipe='cancel'] {
|
||||
transform: translateX(0);
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
.ToastRoot[data-swipe='end'] {
|
||||
animation: swipeRight .1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(calc(100% + var(--viewport-padding)));
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes swipeRight {
|
||||
from {
|
||||
transform: translateX(var(--radix-toast-swipe-end-x));
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,40 @@
|
|||
export default function useToast()
|
||||
export interface ToastConfig
|
||||
{
|
||||
|
||||
closeable?: boolean
|
||||
duration: number
|
||||
title?: string
|
||||
content?: string
|
||||
timer?: boolean
|
||||
type?: ToastType
|
||||
}
|
||||
export type ToastType = 'info' | 'success' | 'error';
|
||||
export type ExtraToastConfig = ToastConfig & { id: string, state: boolean };
|
||||
|
||||
let id = 0;
|
||||
|
||||
const [provideToaster, useToast] = createInjectionState(() => {
|
||||
const list = ref<ExtraToastConfig[]>([]);
|
||||
|
||||
function add(config: ToastConfig)
|
||||
{
|
||||
list.value.push({ ...config, id: (++id).toString(), state: true, });
|
||||
}
|
||||
function clear(type?: ToastType)
|
||||
{
|
||||
list.value.forEach(e => { if(e.type !== type) { e.state = false; } });
|
||||
}
|
||||
|
||||
return { list, add, clear }
|
||||
}, { injectionKey: Symbol('toaster') });
|
||||
|
||||
export { provideToaster, useToastWithDefault as useToast };
|
||||
|
||||
function useToastWithDefault()
|
||||
{
|
||||
const toasts = useToast();
|
||||
if(!toasts)
|
||||
{
|
||||
return { list: ref<ExtraToastConfig[]>([]), add: () => {}, clear: () => {} };
|
||||
}
|
||||
return toasts;
|
||||
}
|
||||
BIN
db.sqlite-shm
BIN
db.sqlite-shm
Binary file not shown.
|
|
@ -44,7 +44,5 @@ async function fetch()
|
|||
<Button class="self-center" @click="() => !!job && fetch()" :loading="status === 'pending'">
|
||||
<span>Executer</span>
|
||||
</Button>
|
||||
<Toast :duration="10000" title="Erreur" :content="error?.message" v-model="err" />
|
||||
<Toast :duration="10000" content="Traitement terminé" v-model="success" :closeable="false" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -31,7 +31,6 @@ watch(loading, (value) => {
|
|||
<Button :loading="loading" @click="() => loading = true">
|
||||
<span v-if="!loading">Load data</span>
|
||||
</Button>
|
||||
<Toast v-model="open" :duration="7500" content="Je suis un long texte pour tester comment ça se comporte aaaaaaaa aaaaaaaa aaaaaaaaa aaaaaaaa" :closeable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -3,25 +3,30 @@
|
|||
<Title>Connexion</Title>
|
||||
</Head>
|
||||
<div class="flex flex-1 flex-col justify-center items-center">
|
||||
<div class="flex gap-8 items-center">
|
||||
<span class="border border-transparent hover:border-light-35 dark:hover:border-dark-35 p-1 cursor-pointer" @click="() => $router.go(-1)"><Icon icon="radix-icons:arrow-left" class="text-light-50 dark:text-dark-50 w-6 h-6"/></span>
|
||||
<ProseH4>Connexion</ProseH4>
|
||||
</div>
|
||||
<form @submit.prevent="() => submit()" class="flex flex-1 flex-col justify-center items-stretch">
|
||||
<TextInput type="text" label="Utilisateur ou email" autocomplete="username" v-model="state.usernameOrEmail"/>
|
||||
<TextInput type="password" label="Mot de passe" autocomplete="current-password" v-model="state.password"/>
|
||||
<Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
|
||||
<NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ path: `/user/register`, force: true }">Pas de compte ?</NuxtLink>
|
||||
</form>
|
||||
<Toast :closeable="false" :content="toastMessage" :duration="10000" timer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZodError } from 'zod';
|
||||
import { schema, type Login } from '~/schemas/login';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'login',
|
||||
});
|
||||
|
||||
const { add: addToast, clear: clearToasts } = useToast();
|
||||
|
||||
const state = reactive<Login>({
|
||||
usernameOrEmail: '',
|
||||
password: ''
|
||||
|
|
@ -39,15 +44,16 @@ const toastMessage = ref('');
|
|||
|
||||
async function submit()
|
||||
{
|
||||
if(state.usernameOrEmail === "")
|
||||
return addToast({ content: 'Veuillez saisir un nom d\'utilisateur ou un email', timer: true, duration: 10000 });
|
||||
if(state.password === "")
|
||||
return;
|
||||
return addToast({ content: 'Veuillez saisir un mot de passe', timer: true, duration: 10000 });
|
||||
|
||||
const data = schema.safeParse(state);
|
||||
|
||||
if(data.success)
|
||||
{
|
||||
await refresh();
|
||||
debugger;
|
||||
|
||||
const login = result.value;
|
||||
if(!login || !login.success)
|
||||
|
|
@ -56,6 +62,8 @@ async function submit()
|
|||
}
|
||||
else if(status.value === 'success' && login.success)
|
||||
{
|
||||
clearToasts();
|
||||
addToast({ duration: 10000, content: 'Vous êtes maintenant connecté', timer: true, type: 'success' });
|
||||
await navigateTo('/user/profile');
|
||||
}
|
||||
}
|
||||
|
|
@ -75,13 +83,12 @@ function handleErrors(error: Error | ZodError)
|
|||
{
|
||||
for(const err of (error as ZodError).issues)
|
||||
{
|
||||
toastMessage.value = err.message;
|
||||
break;
|
||||
return addToast({ content: err.message, timer: true, duration: 10000, type: 'error' });
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
toastMessage.value = error?.message ?? 'Erreur inconnue.';
|
||||
return addToast({ content: error?.message ?? 'Une erreur est survenue', timer: true, duration: 10000, type: 'error' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,28 +3,31 @@
|
|||
<Title>Inscription</Title>
|
||||
</Head>
|
||||
<div class="flex flex-1 flex-col justify-center items-center">
|
||||
<div class="flex gap-8 items-center">
|
||||
<span class="border border-transparent hover:border-light-35 dark:hover:border-dark-35 p-1 cursor-pointer" @click="() => $router.go(-1)"><Icon icon="radix-icons:arrow-left" class="text-light-50 dark:text-dark-50 w-6 h-6"/></span>
|
||||
<ProseH4>Inscription</ProseH4>
|
||||
<form @submit.prevent="() => submit()" class="flex flex-1 flex-col justify-center items-stretch p-4">
|
||||
<TextInput type="text" label="Nom d'utilisateur" autocomplete="username" v-model="state.username"/>
|
||||
<TextInput type="email" label="Email" autocomplete="email" v-model="state.email"/>
|
||||
<TextInput type="password" label="Mot de passe" autocomplete="new-password" v-model="state.password"/>
|
||||
<div class="flex flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 me-4">
|
||||
</div>
|
||||
<form @submit.prevent="() => submit()" class="grid flex-1 p-4 grid-cols-2 md:grid-cols-1 gap-4 md:gap-0">
|
||||
<TextInput type="text" label="Nom d'utilisateur" autocomplete="username" v-model="state.username" class="w-full md:w-auto"/>
|
||||
<TextInput type="email" label="Email" autocomplete="email" v-model="state.email" class="w-full md:w-auto"/>
|
||||
<TextInput type="password" label="Mot de passe" autocomplete="new-password" v-model="state.password" class="w-full md:w-auto"/>
|
||||
<div class="flex flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
|
||||
<span class="">Votre mot de passe doit respecter les critères de sécurité suivants
|
||||
:</span>
|
||||
<span class="px-4" :class="{'text-light-red dark:text-dark-red': !checkedLength}">Entre 8 et 128
|
||||
<span class="ps-4" :class="{'text-light-red dark:text-dark-red': !checkedLength}">Entre 8 et 128
|
||||
caractères</span>
|
||||
<span class="px-4" :class="{'text-light-red dark:text-dark-red': !checkedLowerUpper}">Au moins
|
||||
<span class="ps-4" :class="{'text-light-red dark:text-dark-red': !checkedLowerUpper}">Au moins
|
||||
une minuscule et une majuscule</span>
|
||||
<span class="px-4" :class="{'text-light-red dark:text-dark-red': !checkedDigit}">Au moins un
|
||||
<span class="ps-4" :class="{'text-light-red dark:text-dark-red': !checkedDigit}">Au moins un
|
||||
chiffre</span>
|
||||
<span class="px-4" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}">Au moins un
|
||||
caractère spécial parmis la liste suivante:
|
||||
<span class="ps-4" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}">Au moins un
|
||||
caractère spécial parmi la liste suivante:
|
||||
<pre class="text-wrap">! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ ] ^ _ ` { | } ~</pre>
|
||||
</span>
|
||||
</div>
|
||||
<TextInput type="password" label="Confirmation du mot de passe" autocomplete="new-password" v-model="confirmPassword"/>
|
||||
<Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
|
||||
<NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ path: `/user/register`, force: true }">Pas de compte ?</NuxtLink>
|
||||
<TextInput type="password" label="Confirmation du mot de passe" autocomplete="new-password" v-model="confirmPassword" class="w-full md:w-auto"/>
|
||||
<Button class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
|
||||
<span class="mt-4 order-10 flex justify-center items-center gap-4 col-span-2 md:col-span-1 m-auto">Vous avez déjà un compte ?<NuxtLink class="text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ path: `/user/login`, force: true }">Se connecter</NuxtLink></span>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -32,6 +35,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ZodError } from 'zod';
|
||||
import { schema, type Registration } from '~/schemas/registration';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'login',
|
||||
|
|
@ -43,6 +47,7 @@ const state = reactive<Registration>({
|
|||
password: ''
|
||||
});
|
||||
|
||||
const { add: addToast, clear: clearToasts } = useToast();
|
||||
const confirmPassword = ref("");
|
||||
|
||||
const checkedLength = computed(() => state.password.length >= 8 && state.password.length <= 128);
|
||||
|
|
@ -50,11 +55,7 @@ const checkedLowerUpper = computed(() => state.password.toLowerCase() !== state.
|
|||
const checkedDigit = computed(() => /[0-9]/.test(state.password));
|
||||
const checkedSymbol = computed(() => " !\"#$%&'()*+,-./:;<=>?@[]^_`{|}~".split("").some(e => state.password.includes(e)));
|
||||
|
||||
const usernameError = ref("");
|
||||
const emailError = ref("");
|
||||
const generalError = ref("");
|
||||
|
||||
const { data: result, status, error, execute } = await useFetch('/api/auth/register', {
|
||||
const { data: result, status, error, refresh } = await useFetch('/api/auth/register', {
|
||||
body: state,
|
||||
immediate: false,
|
||||
method: 'POST',
|
||||
|
|
@ -64,15 +65,20 @@ const { data: result, status, error, execute } = await useFetch('/api/auth/regis
|
|||
|
||||
async function submit()
|
||||
{
|
||||
if(state.password === "" || state.password !== confirmPassword.value)
|
||||
return;
|
||||
if(state.username === '')
|
||||
return addToast({ content: 'Veuillez saisir un nom d\'utilisateur', timer: true, duration: 10000 });
|
||||
if(state.email === '')
|
||||
return addToast({ content: 'Veuillez saisir une adresse mail', timer: true, duration: 10000 });
|
||||
if(state.password === "")
|
||||
return addToast({ content: 'Veuillez saisir un mot de passe', timer: true, duration: 10000 });
|
||||
if(state.password !== confirmPassword.value)
|
||||
return addToast({ content: 'Les deux mots de passe saisis ne correspondent pas', timer: true, duration: 10000 });
|
||||
|
||||
const data = schema.safeParse(state);
|
||||
|
||||
if(data.success)
|
||||
{
|
||||
await execute();
|
||||
debugger;
|
||||
await refresh();
|
||||
|
||||
const login = result.value;
|
||||
if(!login || !login.success)
|
||||
|
|
@ -81,6 +87,8 @@ async function submit()
|
|||
}
|
||||
else if(status.value === 'success' && login.success)
|
||||
{
|
||||
clearToasts();
|
||||
addToast({ duration: 10000, content: 'Vous avez été enregistré. Pensez à valider votre adresse mail.', timer: true, type: 'success' });
|
||||
await navigateTo('/user/profile');
|
||||
}
|
||||
}
|
||||
|
|
@ -91,23 +99,21 @@ async function submit()
|
|||
}
|
||||
function handleErrors(error: Error | ZodError)
|
||||
{
|
||||
if(!error)
|
||||
return;
|
||||
|
||||
status.value = 'error';
|
||||
|
||||
if(error.hasOwnProperty('issues'))
|
||||
{
|
||||
for(const err of (error as ZodError).issues)
|
||||
{
|
||||
if(err.path.includes('username'))
|
||||
{
|
||||
usernameError.value = err.message;
|
||||
}
|
||||
if(err.path.includes('email'))
|
||||
{
|
||||
emailError.value = err.message;
|
||||
}
|
||||
return addToast({ content: err.message, timer: true, duration: 10000, type: 'error' });
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
generalError.value = error?.message ?? 'Erreur inconnue.';
|
||||
return addToast({ content: error?.message ?? 'Une erreur est survenue', timer: true, duration: 10000, type: 'error' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue