Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: Peer-at-Code:19906235d0339ca0ec47c9596b16fd1107003575
Branches Tags
Peer-at-Code:main
Peer-at-Code:dev
Peer-at-Code:svelte-4
..
compare: Peer-at-Code:7bdf17661171dae6abd3452b18dc8ea7dda9a358
Branches Tags
Peer-at-Code:main
Peer-at-Code:dev
Peer-at-Code:svelte-4

No commits in common. "19906235d0339ca0ec47c9596b16fd1107003575" and "7bdf17661171dae6abd3452b18dc8ea7dda9a358" have entirely different histories.
19906235d0 ... 7bdf176611

6 changed files with 102 additions and 126 deletions
Show stats Expand all files Collapse all files

163
src/lib/components/Sidenav.svelte
View file

@ -80,30 +80,32 @@
}} }}
href={item.slug} href={item.slug}
class={cn( class={cn(
'flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start', 'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
{ {
'bg-primary-700': isActive(item.slug), 'bg-primary-700': isActive(item.slug),
'group hover:bg-primary-700': !isActive(item.slug) 'group hover:bg-primary-700': !isActive(item.slug)
} }
)} )}
> >
<svelte:component <div class="flex items-center gap-2">
this={item.icon} <svelte:component
class={cn({ this={item.icon}
'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0': class={cn({
!isActive(item.slug) 'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
})} !isActive(item.slug)
/> })}
<span />
class={cn('hidden lg:block', { <span
'block sm:hidden': isOpen, class={cn('hidden lg:block', {
hidden: !isOpen, 'block sm:hidden': isOpen,
'text-highlight-secondary transition-colors duration-150 group-hover:text-primary': hidden: !isOpen,
!isActive(item.slug) 'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
})} !isActive(item.slug)
> })}
{item.name} >
</span> {item.name}
</span>
</div>
</a> </a>
</li> </li>
{/each} {/each}
@ -116,17 +118,22 @@
<ul class="flex flex-col gap-4"> <ul class="flex flex-col gap-4">
<li> <li>
<span <span
class="group pointer-events-none flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start" class="group pointer-events-none flex justify-center rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
> >
<Help class="stroke-highlight-secondary transition-colors duration-150" /> <div class="flex items-center gap-2">
<span <Help class="stroke-highlight-secondary transition-colors duration-150" />
class={cn('hidden text-highlight-secondary transition-colors duration-150 lg:block', { <span
'block sm:hidden': isOpen, class={cn(
hidden: !isOpen 'hidden text-highlight-secondary transition-colors duration-150 lg:block',
})} {
> 'block sm:hidden': isOpen,
Aide hidden: !isOpen
</span> }
)}
>
Aide
</span>
</div>
</span> </span>
</li> </li>
<li> <li>
@ -135,22 +142,24 @@
isOpen = false; isOpen = false;
}} }}
href="mailto:cyberbottle@peerat.dev" href="mailto:cyberbottle@peerat.dev"
class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start" class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<Mail <div class="flex items-center gap-2">
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0" <Mail
/> class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
<span />
class={cn( <span
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', class={cn(
{ 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'block sm:hidden': isOpen, {
hidden: !isOpen 'block sm:hidden': isOpen,
} hidden: !isOpen
)} }
> )}
Mail >
</span> Mail
</span>
</div>
</a> </a>
</li> </li>
<li> <li>
@ -159,24 +168,24 @@
isOpen = false; isOpen = false;
}} }}
href="//discord.gg/72vuHcwUkE" href="//discord.gg/72vuHcwUkE"
target="_blank" class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
rel="noopener"
class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<Discord <div class="flex items-center gap-2">
class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0" <Discord
/> class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
<span />
class={cn( <span
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', class={cn(
{ 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'block sm:hidden': isOpen, {
hidden: !isOpen 'block sm:hidden': isOpen,
} hidden: !isOpen
)} }
> )}
Discord >
</span> Discord
</span>
</div>
</a> </a>
</li> </li>
<li> <li>
@ -185,24 +194,24 @@
isOpen = false; isOpen = false;
}} }}
href="//git.peerat.dev" href="//git.peerat.dev"
target="_blank" class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
rel="noopener"
class="group flex items-center justify-center gap-2 rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
> >
<Git <div class="flex items-center gap-2">
class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0" <Git
/> class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
<span />
class={cn( <span
'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block', class={cn(
{ 'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
'block sm:hidden': isOpen, {
hidden: !isOpen 'block sm:hidden': isOpen,
} hidden: !isOpen
)} }
> )}
Git >
</span> Git
</span>
</div>
</a> </a>
</li> </li>
</ul> </ul>

4
src/routes/+layout.svelte
View file

@ -3,8 +3,6 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import Toaster from '$lib/components/Toaster.svelte';
$: origin = $page.url.origin; $: origin = $page.url.origin;
$: domain = $page.url.hostname; $: domain = $page.url.hostname;
</script> </script>
@ -40,6 +38,4 @@
<script defer data-domain={domain} src="https://plosibl.peerat.dev/js/script.js"></script> <script defer data-domain={domain} src="https://plosibl.peerat.dev/js/script.js"></script>
</svelte:head> </svelte:head>
<Toaster />
<slot /> <slot />

1
src/routes/dashboard/+layout.svelte
View file

@ -11,6 +11,7 @@
<Sidenav bind:isOpen /> <Sidenav bind:isOpen />
<div class="flex flex-1 flex-col"> <div class="flex flex-1 flex-col">
<Navbar bind:isOpen /> <Navbar bind:isOpen />
<Toaster />
<div <div
class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 duration-300 ease-in-out sm:p-8" class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 duration-300 ease-in-out sm:p-8"
> >

14
src/routes/sign-in/+page.svelte
View file

@ -9,8 +9,6 @@
export let data: PageData; export let data: PageData;
let submitting = false;
const { form, errors, enhance } = superForm(data.form, { const { form, errors, enhance } = superForm(data.form, {
onSubmit() { onSubmit() {
submitting = true; submitting = true;
@ -19,6 +17,8 @@
submitting = false; submitting = false;
} }
}); });
let submitting = false;
</script> </script>
<div class="flex h-screen w-full"> <div class="flex h-screen w-full">
@ -27,14 +27,7 @@
<h1 class="mx-auto text-xl font-bold">Connexion</h1> <h1 class="mx-auto text-xl font-bold">Connexion</h1>
<form class="flex flex-col justify-center gap-2" method="POST" use:enhance> <form class="flex flex-col justify-center gap-2" method="POST" use:enhance>
<label for="pseudo"> Nom d'utilisateur </label> <label for="pseudo"> Nom d'utilisateur </label>
<Input <Input name="pseudo" placeholder="Barlow" type="text" required bind:value={$form.pseudo} />
name="pseudo"
placeholder="Barlow"
type="text"
required
bind:value={$form.pseudo}
aria-invalid={$errors.pseudo ? 'true' : undefined}
/>
{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if} {#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}
<label for="passwd"> Mot de passe </label> <label for="passwd"> Mot de passe </label>
@ -44,7 +37,6 @@
type="password" type="password"
required required
bind:value={$form.passwd} bind:value={$form.passwd}
aria-invalid={$errors.passwd ? 'true' : undefined}
/> />
{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if} {#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}

9
src/routes/sign-up/+page.server.ts
View file

@ -84,10 +84,9 @@ export const actions = {
} }
if (res.status === 400) { if (res.status === 400) {
const { email_valid, username_valid } = await res.json(); const { email_valid } = await res.json();
if (!email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà']; if (!email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà'];
if (!username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
return fail(400, { form }); return fail(400, { form });
} }
@ -134,13 +133,13 @@ export const actions = {
if (res.status === 400) { if (res.status === 400) {
const { email_valid, username_valid } = await res.json(); const { email_valid, username_valid } = await res.json();
if (email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà']; if (!email_valid) form.errors.email = ['Un compte avec cette adresse email existe déjà'];
if (username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé']; if (!username_valid) form.errors.pseudo = ['Ce pseudo est déjà utilisé'];
return fail(400, { form }); return fail(400, { form });
} }
form.errors.code = [`Le code envoyé est invalide.`]; form.errors.code = [`Une erreur s'est produite (${res.status} ${res.statusText})`];
return fail(400, { return fail(400, {
form form

37
src/routes/sign-up/+page.svelte
View file

@ -1,19 +1,15 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { superForm } from 'sveltekit-superforms/client'; import { superForm } from 'sveltekit-superforms/client';
import { Loader2 } from 'lucide-svelte';
import type { PageData, Snapshot } from './$types'; import type { PageData, Snapshot } from './$types';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
import Input from '$lib/components/ui/Input.svelte'; import Input from '$lib/components/ui/Input.svelte';
import { addToast } from '$lib/components/Toaster.svelte'; import { Loader2 } from 'lucide-svelte';
export let data: PageData; export let data: PageData;
let submitting = false;
let confirmation = false;
const { form, errors, enhance } = superForm(data.form, { const { form, errors, enhance } = superForm(data.form, {
onSubmit() { onSubmit() {
submitting = true; submitting = true;
@ -21,12 +17,6 @@
onResult({ result }) { onResult({ result }) {
switch (result.type) { switch (result.type) {
case 'success': case 'success':
addToast({
data: {
title: 'Demande de confirmation',
description: `Un code vous à été ${confirmation ? 'renvoyé' : 'envoyé'}.`
}
});
confirmation = true; confirmation = true;
break; break;
case 'error': case 'error':
@ -38,6 +28,9 @@
} }
}); });
let submitting = false;
let confirmation = false;
export const snapshot: Snapshot = { export const snapshot: Snapshot = {
capture: () => confirmation, capture: () => confirmation,
restore: (value) => (confirmation = value) restore: (value) => (confirmation = value)
@ -64,7 +57,6 @@
placeholder="philipzcwbarlow@peerat.dev" placeholder="philipzcwbarlow@peerat.dev"
autocomplete="off" autocomplete="off"
required required
aria-invalid={$errors.email ? 'true' : undefined}
/> />
{#if $errors.email}<span class="text-sm text-red-500">{$errors.email}</span>{/if} {#if $errors.email}<span class="text-sm text-red-500">{$errors.email}</span>{/if}
@ -76,7 +68,6 @@
placeholder="Philip" placeholder="Philip"
autocomplete="off" autocomplete="off"
required required
aria-invalid={$errors.firstname ? 'true' : undefined}
/> />
{#if $errors.firstname}<span class="text-sm text-red-500">{$errors.firstname}</span>{/if} {#if $errors.firstname}<span class="text-sm text-red-500">{$errors.firstname}</span>{/if}
@ -88,7 +79,6 @@
placeholder="Barlow" placeholder="Barlow"
autocomplete="off" autocomplete="off"
required required
aria-invalid={$errors.lastname ? 'true' : undefined}
/> />
{#if $errors.lastname}<span class="text-sm text-red-500">{$errors.lastname}</span>{/if} {#if $errors.lastname}<span class="text-sm text-red-500">{$errors.lastname}</span>{/if}
@ -100,7 +90,6 @@
placeholder="Cypher Wolf" placeholder="Cypher Wolf"
autocomplete="off" autocomplete="off"
required required
aria-invalid={$errors.pseudo ? 'true' : undefined}
/> />
{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if} {#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}
@ -112,28 +101,18 @@
}} }}
> >
<label for="passwd"> Mot de passe </label> <label for="passwd"> Mot de passe </label>
<Input <Input name="passwd" placeholder="************" type="password" />
name="passwd"
placeholder="************"
type="password"
aria-invalid={$errors.passwd ? 'true' : undefined}
/>
{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if} {#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}
<label for="code"> Code </label> <label for="code"> Code </label>
<Input <Input name="code" placeholder="1234" type="text" />
name="code"
placeholder="1234"
type="text"
aria-invalid={$errors.code ? 'true' : undefined}
/>
{#if $errors.code}<span class="text-sm text-red-500">{$errors.code}</span>{/if} {#if $errors.code}<span class="text-sm text-red-500">{$errors.code}</span>{/if}
</div> </div>
{/if} {/if}
<Button class="mt-2 flex items-center gap-2" variant="brand" disabled={submitting}> <Button class="mt-2" variant="brand" disabled={submitting}>
{#if submitting} {#if submitting}
<Loader2 className="h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />
{/if} {/if}
{confirmation ? "S'inscrire" : 'Continuer'} {confirmation ? "S'inscrire" : 'Continuer'}
</Button> </Button>