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

Merge pull request #10 from Peer-at-Code/feat/auth

Browse source 
refactored auth & sign-in
This commit is contained in:
Théo 2023-03-03 09:56:29 +01:00 • committed by GitHub
commit e96a44608b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 168 additions and 368 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
app/(auth)/sign-in/page.tsx
View file

@ -1,84 +1,11 @@
'use client'; import UserAuthForm from '@/ui/UserAuthForm';
import AppLink from '@/ui/AppLink';
import Button from '@/ui/Button';
import Input from '@/ui/Input';
import cookies from 'js-cookie';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
type LoginData = {
pseudo: string;
passwd: string;
};
export default function Page() { export default function Page() {
const {
register,
handleSubmit,
formState: { errors },
setError
} = useForm<LoginData>({
defaultValues: {
pseudo: '',
passwd: ''
}
});
const router = useRouter();
async function onSubmit(data: LoginData) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {
method: 'POST',
body: JSON.stringify(data)
});
if (res.ok) {
const token = res.headers.get('Authorization')?.split(' ')[1];
if (token) cookies.set('token', token);
if (cookies.get('token')) router.push('/dashboard');
} else {
setError('passwd', {
type: 'manual',
message: "Nom d'utilisateur ou mot de passe incorrect"
});
}
}
return ( return (
<> <>
<div className="flex flex-col justify-start space-y-4"> <div className="flex flex-col justify-start space-y-4">
<h2 className="mx-auto text-xl font-bold">Connexion</h2> <h2 className="mx-auto text-xl font-bold">Connexion</h2>
<form <UserAuthForm />
className="flex w-52 flex-col justify-center space-y-4 sm:w-72"
onSubmit={handleSubmit(onSubmit)}
>
<Input
label="Nom d'utilisateur"
type="text"
placeholder="PeerAt"
required
error={errors.pseudo?.message}
{...register('pseudo')}
/>
<Input
label="Mot de passe"
type="password"
placeholder="MotDePasse123"
required
error={errors.passwd?.message}
{...register('passwd')}
/>
<Button type="submit" kind="brand">
Se connecter
</Button>
<p className="flex flex-col items-center text-sm text-muted">
Vous n&apos;avez pas de compte?
<AppLink className="text-brand underline" href={'/sign-up'}>
S&apos;inscrire maintenant
</AppLink>
</p>
</form>
</div> </div>
</> </>
); );

125
app/(auth)/sign-up/page.tsx
View file

@ -1,132 +1,11 @@
'use client'; import UserAuthForm from '@/ui/UserAuthForm';
import AppLink from '@/ui/AppLink';
import Button from '@/ui/Button';
import Input from '@/ui/Input';
import cookies from 'js-cookie';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
type RegisterData = {
pseudo: string;
email: string;
passwd: string;
firstname: string;
lastname: string;
description: string;
sgroup: string;
avatar: string;
};
export default function Page() { export default function Page() {
const {
register,
handleSubmit,
formState: { errors },
setError
} = useForm<RegisterData>({
defaultValues: {
pseudo: '',
email: '',
passwd: '',
firstname: '',
lastname: '',
description: '',
sgroup: '',
avatar: ''
}
});
const router = useRouter();
async function onSubmit(data: RegisterData) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/register`, {
method: 'POST',
body: JSON.stringify(data)
});
const { username_valid, email_valid } = await res.json();
if (!username_valid || !email_valid) {
if (!username_valid) {
setError('pseudo', {
type: 'manual',
message: "Nom d'utilisateur indisponible"
});
}
if (!email_valid) {
setError('email', {
type: 'manual',
message: 'Email déjà utilisé'
});
}
}
console.log(errors);
console.log(username_valid, email_valid);
if (res.ok) {
const token = res.headers.get('Authorization')?.split(' ')[1];
if (token) cookies.set('token', token);
if (cookies.get('token')) router.push('/dashboard');
}
}
return ( return (
<> <>
<div className="flex flex-col justify-start space-y-4"> <div className="flex flex-col justify-start space-y-4">
<h2 className="mx-auto text-xl font-bold">Créer un compte</h2> <h2 className="mx-auto text-xl font-bold">Créer un compte</h2>
<form <UserAuthForm />
className="flex w-52 flex-col justify-center space-y-4 sm:w-72"
onSubmit={handleSubmit(onSubmit)}
>
<Input
label="Adresse e-mail"
type="email"
placeholder="peer-at@exemple.be"
required
error={errors.email?.message}
{...register('email')}
/>
<Input label="Nom" type="lastname" placeholder="Doe" {...register('lastname')} />
<Input label="Prénom" type="firstname" placeholder="John" {...register('firstname')} />
<Input
label="Nom d'utilisateur"
type="text"
placeholder="PeerAt"
required
error={errors.pseudo?.message}
{...register('pseudo')}
/>
<Input
label="Mot de passe"
type="password"
placeholder="MotDePasse123"
required
{...register('passwd', {
minLength: {
value: 4,
message: 'Le mot de passe doit contenir au moins 8 caractères'
}
})}
/>
<Button type="submit" kind="brand">
S&apos;inscrire
</Button>
{/* <p className="items-center text-sm text-gray-400">
En cliquant sur continuer, vous acceptez les{' '}
<AppLink className="text-white underline" href="/privacy-policy" target="_blank">
Politique de confidentialité
</AppLink>
.
</p> */}
<p className="flex flex-col items-center text-sm text-muted">
Vous possédez un compte?
<AppLink className="text-brand underline" href={'/sign-in'}>
Se connecter
</AppLink>
</p>
</form>
</div> </div>
</> </>
); );

12
app/(legal)/privacy-policy/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

5
app/dashboard/puzzles/[id]/page.tsx
View file

@ -1,10 +1,9 @@
import { getPuzzle } from '@/lib/puzzles'; import { getPuzzle } from '@/lib/puzzles';
import Puzzle from '@/ui/Puzzle'; import Puzzle from '@/ui/Puzzle';
import type { Metadata } from 'next';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment export async function generateMetadata({ params }: { params: { id: number } }): Promise<Metadata> {
// @ts-ignore
export async function generateMetadata({ params }: { params: { id: number } }) {
const { id } = params; const { id } = params;
const puzzle = await getPuzzle(id); const puzzle = await getPuzzle(id);

4
package.json
View file

@ -25,7 +25,7 @@
"boring-avatars": "^1.7.0", "boring-avatars": "^1.7.0",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"next": "13.2.1", "next": "13.2.3",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-hook-form": "^7.43.1", "react-hook-form": "^7.43.1",
@ -45,7 +45,7 @@
"@typescript-eslint/parser": "^5.50.0", "@typescript-eslint/parser": "^5.50.0",
"autoprefixer": "^10.4.13", "autoprefixer": "^10.4.13",
"eslint": "8.33.0", "eslint": "8.33.0",
"eslint-config-next": "13.2.1", "eslint-config-next": "13.2.3",
"eslint-config-prettier": "^8.6.0", "eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"postcss": "^8.4.21", "postcss": "^8.4.21",

106
pnpm-lock.yaml generated
View file

@ -13,11 +13,11 @@ specifiers:
boring-avatars: ^1.7.0 boring-avatars: ^1.7.0
clsx: ^1.2.1 clsx: ^1.2.1
eslint: 8.33.0 eslint: 8.33.0
eslint-config-next: 13.2.1 eslint-config-next: 13.2.3
eslint-config-prettier: ^8.6.0 eslint-config-prettier: ^8.6.0
eslint-plugin-prettier: ^4.2.1 eslint-plugin-prettier: ^4.2.1
js-cookie: ^3.0.1 js-cookie: ^3.0.1
next: 13.2.1 next: 13.2.3
postcss: ^8.4.21 postcss: ^8.4.21
prettier: ^2.8.3 prettier: ^2.8.3
prettier-plugin-tailwindcss: ^0.2.2 prettier-plugin-tailwindcss: ^0.2.2
@ -37,7 +37,7 @@ dependencies:
boring-avatars: 1.7.0 boring-avatars: 1.7.0
clsx: 1.2.1 clsx: 1.2.1
js-cookie: 3.0.1 js-cookie: 3.0.1
next: 13.2.1_biqbaboplfbrettd7655fr4n2y next: 13.2.3_biqbaboplfbrettd7655fr4n2y
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0_react@18.2.0 react-dom: 18.2.0_react@18.2.0
react-hook-form: 7.43.2_react@18.2.0 react-hook-form: 7.43.2_react@18.2.0
@ -57,7 +57,7 @@ devDependencies:
'@typescript-eslint/parser': 5.53.0_4vsywjlpuriuw3tl5oq6zy5a64 '@typescript-eslint/parser': 5.53.0_4vsywjlpuriuw3tl5oq6zy5a64
autoprefixer: 10.4.13_postcss@8.4.21 autoprefixer: 10.4.13_postcss@8.4.21
eslint: 8.33.0 eslint: 8.33.0
eslint-config-next: 13.2.1_4vsywjlpuriuw3tl5oq6zy5a64 eslint-config-next: 13.2.3_4vsywjlpuriuw3tl5oq6zy5a64
eslint-config-prettier: 8.6.0_eslint@8.33.0 eslint-config-prettier: 8.6.0_eslint@8.33.0
eslint-plugin-prettier: 4.2.1_qa2thblfovmfepmgrc7z2owbo4 eslint-plugin-prettier: 4.2.1_qa2thblfovmfepmgrc7z2owbo4
postcss: 8.4.21 postcss: 8.4.21
@ -112,18 +112,18 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true dev: true
/@next/env/13.2.1: /@next/env/13.2.3:
resolution: {integrity: sha512-Hq+6QZ6kgmloCg8Kgrix+4F0HtvLqVK3FZAnlAoS0eonaDemHe1Km4kwjSWRE3JNpJNcKxFHF+jsZrYo0SxWoQ==} resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
dev: false dev: false
/@next/eslint-plugin-next/13.2.1: /@next/eslint-plugin-next/13.2.3:
resolution: {integrity: sha512-r0i5rcO6SMAZtqiGarUVMr3k256X0R0j6pEkKg4PxqUW+hG0qgMxRVAJsuoRG5OBFkCOlSfWZJ0mP9fQdCcyNg==} resolution: {integrity: sha512-QmMPItnU7VeojI1KnuwL9SLFWEwmaNHNlnOGpoTwdLoSiP9sc8KYiAHWEc4/44L+cAdCxcZYvn7frcRNP5l84Q==}
dependencies: dependencies:
glob: 7.1.7 glob: 7.1.7
dev: true dev: true
/@next/swc-android-arm-eabi/13.2.1: /@next/swc-android-arm-eabi/13.2.3:
resolution: {integrity: sha512-Yua7mUpEd1wzIT6Jjl3dpRizIfGp9NR4F2xeRuQv+ae+SDI1Em2WyM9m46UL+oeW5GpMiEHoaBagr47RScZFmQ==} resolution: {integrity: sha512-mykdVaAXX/gm+eFO2kPeVjnOCKwanJ9mV2U0lsUGLrEdMUifPUjiXKc6qFAIs08PvmTMOLMNnUxqhGsJlWGKSw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
@ -131,8 +131,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-android-arm64/13.2.1: /@next/swc-android-arm64/13.2.3:
resolution: {integrity: sha512-Bifcr2f6VwInOdq1uH/9lp8fH7Nf7XGkIx4XceVd32LPJqG2c6FZU8ZRBvTdhxzXVpt5TPtuXhOP4Ij9UPqsVw==} resolution: {integrity: sha512-8XwHPpA12gdIFtope+n9xCtJZM3U4gH4vVTpUwJ2w1kfxFmCpwQ4xmeGSkR67uOg80yRMuF0h9V1ueo05sws5w==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
@ -140,8 +140,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-darwin-arm64/13.2.1: /@next/swc-darwin-arm64/13.2.3:
resolution: {integrity: sha512-gvqm+fGMYxAkwBapH0Vvng5yrb6HTkIvZfY4oEdwwYrwuLdkjqnJygCMgpNqIFmAHSXgtlWxfYv1VC8sjN81Kw==} resolution: {integrity: sha512-TXOubiFdLpMfMtaRu1K5d1I9ipKbW5iS2BNbu8zJhoqrhk3Kp7aRKTxqFfWrbliAHhWVE/3fQZUYZOWSXVQi1w==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
@ -149,8 +149,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-darwin-x64/13.2.1: /@next/swc-darwin-x64/13.2.3:
resolution: {integrity: sha512-HGqVqmaZWj6zomqOZUVbO5NhlABL0iIaxTmd0O5B0MoMa5zpDGoaHSG+fxgcWMXcGcxmUNchv1NfNOYiTKoHOg==} resolution: {integrity: sha512-GZctkN6bJbpjlFiS5pylgB2pifHvgkqLAPumJzxnxkf7kqNm6rOGuNjsROvOWVWXmKhrzQkREO/WPS2aWsr/yw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
@ -158,8 +158,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-freebsd-x64/13.2.1: /@next/swc-freebsd-x64/13.2.3:
resolution: {integrity: sha512-N/a4JarAq+E+g+9K2ywJUmDIgU2xs2nA+BBldH0oq4zYJMRiUhL0iaN9G4e72VmGOJ61L/3W6VN8RIUOwTLoqQ==} resolution: {integrity: sha512-rK6GpmMt/mU6MPuav0/M7hJ/3t8HbKPCELw/Uqhi4732xoq2hJ2zbo2FkYs56y6w0KiXrIp4IOwNB9K8L/q62g==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [freebsd] os: [freebsd]
@ -167,8 +167,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-arm-gnueabihf/13.2.1: /@next/swc-linux-arm-gnueabihf/13.2.3:
resolution: {integrity: sha512-WaFoerF/eRbhbE57TaIGJXbQAERADZ/RZ45u6qox9beb5xnWsyYgzX+WuN7Tkhyvga0/aMuVYFzS9CEay7D+bw==} resolution: {integrity: sha512-yeiCp/Odt1UJ4KUE89XkeaaboIDiVFqKP4esvoLKGJ0fcqJXMofj4ad3tuQxAMs3F+qqrz9MclqhAHkex1aPZA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
@ -176,8 +176,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-arm64-gnu/13.2.1: /@next/swc-linux-arm64-gnu/13.2.3:
resolution: {integrity: sha512-R+Jhc1/RJTnncE9fkePboHDNOCm1WJ8daanWbjKhfPySMyeniKYRwGn5SLYW3S8YlRS0QVdZaaszDSZWgUcsmA==} resolution: {integrity: sha512-/miIopDOUsuNlvjBjTipvoyjjaxgkOuvlz+cIbbPcm1eFvzX2ltSfgMgty15GuOiR8Hub4FeTSiq3g2dmCkzGA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
@ -185,8 +185,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-arm64-musl/13.2.1: /@next/swc-linux-arm64-musl/13.2.3:
resolution: {integrity: sha512-oI1UfZPidGAVddlL2eOTmfsuKV9EaT1aktIzVIxIAgxzQSdwsV371gU3G55ggkurzfdlgF3GThFePDWF0d8dmw==} resolution: {integrity: sha512-sujxFDhMMDjqhruup8LLGV/y+nCPi6nm5DlFoThMJFvaaKr/imhkXuk8uCTq4YJDbtRxnjydFv2y8laBSJVC2g==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
@ -194,8 +194,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-x64-gnu/13.2.1: /@next/swc-linux-x64-gnu/13.2.3:
resolution: {integrity: sha512-PCygPwrQmS+7WUuAWWioWMZCzZm4PG91lfRxToLDg7yIm/3YfAw5N2EK2TaM9pzlWdvHQAqRMX/oLvv027xUiA==} resolution: {integrity: sha512-w5MyxPknVvC9LVnMenAYMXMx4KxPwXuJRMQFvY71uXg68n7cvcas85U5zkdrbmuZ+JvsO5SIG8k36/6X3nUhmQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
@ -203,8 +203,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-linux-x64-musl/13.2.1: /@next/swc-linux-x64-musl/13.2.3:
resolution: {integrity: sha512-sUAKxo7CFZYGHNxheGh9nIBElLYBM6md/liEGfOTwh/xna4/GTTcmkGWkF7PdnvaYNgcPIQgHIMYiAa6yBKAVw==} resolution: {integrity: sha512-CTeelh8OzSOVqpzMFMFnVRJIFAFQoTsI9RmVJWW/92S4xfECGcOzgsX37CZ8K982WHRzKU7exeh7vYdG/Eh4CA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
@ -212,8 +212,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-arm64-msvc/13.2.1: /@next/swc-win32-arm64-msvc/13.2.3:
resolution: {integrity: sha512-qDmyEjDBpl/vBXxuOOKKWmPQOcARcZIMach1s7kjzaien0SySut/PHRlj56sosa81Wt4hTGhfhZ1R7g1n7+B8w==} resolution: {integrity: sha512-7N1KBQP5mo4xf52cFCHgMjzbc9jizIlkTepe9tMa2WFvEIlKDfdt38QYcr9mbtny17yuaIw02FXOVEytGzqdOQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
@ -221,8 +221,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-ia32-msvc/13.2.1: /@next/swc-win32-ia32-msvc/13.2.3:
resolution: {integrity: sha512-2joqFQ81ZYPg6DcikIzQn3DgjKglNhPAozx6dL5sCNkr1CPMD0YIkJgT3CnYyMHQ04Qi3Npv0XX3MD6LJO8OCA==} resolution: {integrity: sha512-LzWD5pTSipUXTEMRjtxES/NBYktuZdo7xExJqGDMnZU8WOI+v9mQzsmQgZS/q02eIv78JOCSemqVVKZBGCgUvA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
@ -230,8 +230,8 @@ packages:
dev: false dev: false
optional: true optional: true
/@next/swc-win32-x64-msvc/13.2.1: /@next/swc-win32-x64-msvc/13.2.3:
resolution: {integrity: sha512-r3+0fSaIZT6N237iMzwUhfNwjhAFvXjqB+4iuW+wcpxW+LHm1g/IoxN8eSRcb8jPItC86JxjAxpke0QL97qd6g==} resolution: {integrity: sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
@ -1032,8 +1032,8 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
/eslint-config-next/13.2.1_4vsywjlpuriuw3tl5oq6zy5a64: /eslint-config-next/13.2.3_4vsywjlpuriuw3tl5oq6zy5a64:
resolution: {integrity: sha512-2GAx7EjSiCzJN6H2L/v1kbYrNiwQxzkyjy6eWSjuhAKt+P6d3nVNHGy9mON8ZcYd72w/M8kyMjm4UB9cvijgrw==} resolution: {integrity: sha512-kPulHiQEHGei9hIaaNGygHRc0UzlWM+3euOmYbxNkd2Nbhci5rrCDeMBMPSV8xgUssphDGmwDHWbk4VZz3rlZQ==}
peerDependencies: peerDependencies:
eslint: ^7.23.0 || ^8.0.0 eslint: ^7.23.0 || ^8.0.0
typescript: '>=3.3.1' typescript: '>=3.3.1'
@ -1041,7 +1041,7 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@next/eslint-plugin-next': 13.2.1 '@next/eslint-plugin-next': 13.2.3
'@rushstack/eslint-patch': 1.2.0 '@rushstack/eslint-patch': 1.2.0
'@typescript-eslint/parser': 5.53.0_4vsywjlpuriuw3tl5oq6zy5a64 '@typescript-eslint/parser': 5.53.0_4vsywjlpuriuw3tl5oq6zy5a64
eslint: 8.33.0 eslint: 8.33.0
@ -2251,8 +2251,8 @@ packages:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true dev: true
/next/13.2.1_biqbaboplfbrettd7655fr4n2y: /next/13.2.3_biqbaboplfbrettd7655fr4n2y:
resolution: {integrity: sha512-qhgJlDtG0xidNViJUPeQHLGJJoT4zDj/El7fP3D3OzpxJDUfxsm16cK4WTMyvSX1ciIfAq05u+0HqFAa+VJ+Hg==} resolution: {integrity: sha512-nKFJC6upCPN7DWRx4+0S/1PIOT7vNlCT157w9AzbXEgKy6zkiPKEt5YyRUsRZkmpEqBVrGgOqNfwecTociyg+w==}
engines: {node: '>=14.6.0'} engines: {node: '>=14.6.0'}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -2272,7 +2272,7 @@ packages:
sass: sass:
optional: true optional: true
dependencies: dependencies:
'@next/env': 13.2.1 '@next/env': 13.2.3
'@swc/helpers': 0.4.14 '@swc/helpers': 0.4.14
caniuse-lite: 1.0.30001457 caniuse-lite: 1.0.30001457
postcss: 8.4.14 postcss: 8.4.14
@ -2280,19 +2280,19 @@ packages:
react-dom: 18.2.0_react@18.2.0 react-dom: 18.2.0_react@18.2.0
styled-jsx: 5.1.1_react@18.2.0 styled-jsx: 5.1.1_react@18.2.0
optionalDependencies: optionalDependencies:
'@next/swc-android-arm-eabi': 13.2.1 '@next/swc-android-arm-eabi': 13.2.3
'@next/swc-android-arm64': 13.2.1 '@next/swc-android-arm64': 13.2.3
'@next/swc-darwin-arm64': 13.2.1 '@next/swc-darwin-arm64': 13.2.3
'@next/swc-darwin-x64': 13.2.1 '@next/swc-darwin-x64': 13.2.3
'@next/swc-freebsd-x64': 13.2.1 '@next/swc-freebsd-x64': 13.2.3
'@next/swc-linux-arm-gnueabihf': 13.2.1 '@next/swc-linux-arm-gnueabihf': 13.2.3
'@next/swc-linux-arm64-gnu': 13.2.1 '@next/swc-linux-arm64-gnu': 13.2.3
'@next/swc-linux-arm64-musl': 13.2.1 '@next/swc-linux-arm64-musl': 13.2.3
'@next/swc-linux-x64-gnu': 13.2.1 '@next/swc-linux-x64-gnu': 13.2.3
'@next/swc-linux-x64-musl': 13.2.1 '@next/swc-linux-x64-musl': 13.2.3
'@next/swc-win32-arm64-msvc': 13.2.1 '@next/swc-win32-arm64-msvc': 13.2.3
'@next/swc-win32-ia32-msvc': 13.2.1 '@next/swc-win32-ia32-msvc': 13.2.3
'@next/swc-win32-x64-msvc': 13.2.1 '@next/swc-win32-x64-msvc': 13.2.3
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
- babel-plugin-macros - babel-plugin-macros

52
ui/Puzzle.tsx
View file

@ -1,23 +1,51 @@
'use client'; 'use client';
import { Puzzle as PuzzleType } from '@/lib/puzzles'; import type { Puzzle as PuzzleType } from '@/lib/puzzles';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { useForm } from 'react-hook-form';
import Button from './Button'; import Button from './Button';
import Input from './Input'; import Input from './Input';
import ToHTML from './ToHTML'; import ToHTML from './ToHTML';
type PuzzleData = {
answer: string;
code_file: File[];
};
export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) { export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
// const puzzle = getPuzzle(id);
// if (isLoading) {
// return <></>;
// }
if (!puzzle) { if (!puzzle) {
notFound(); notFound();
} }
const {
register,
handleSubmit,
formState: { errors },
setError
} = useForm<PuzzleData>({
defaultValues: {
answer: '',
code_file: undefined
}
});
async function onSubmit(data: PuzzleData) {
const formData = new FormData();
formData.append('answer', data.answer);
formData.append('code_file', data.code_file[0]);
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/puzzleResponse/${puzzle.id}`, {
method: 'POST',
body: formData
});
if (res.ok) {
alert('Réponse correcte !');
}
}
return ( return (
<div className="flex h-full w-full flex-col justify-between space-y-4"> <div className="flex h-full w-full flex-col justify-between space-y-4">
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">
@ -27,21 +55,25 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
<div className="flex h-screen overflow-y-auto"> <div className="flex h-screen overflow-y-auto">
<ToHTML className="font-code" data={puzzle.content} /> <ToHTML className="font-code" data={puzzle.content} />
</div> </div>
<form className="flex w-full flex-col justify-between sm:flex-row"> <form
className="flex w-full flex-col justify-between sm:flex-row"
onSubmit={handleSubmit(onSubmit)}
encType="multipart/form-data"
>
<div className="flex flex-col space-x-0 sm:flex-row sm:space-x-6"> <div className="flex flex-col space-x-0 sm:flex-row sm:space-x-6">
<Input <Input
className="w-full sm:w-1/3" className="w-full sm:w-1/3"
label="Réponse" label="Réponse"
name="answer"
type="text" type="text"
placeholder="12" placeholder="12"
{...register('answer')}
/> />
<Input <Input
className="h-16 w-full sm:w-1/3" className="h-16 w-full sm:w-1/3"
label="Code" label="Code"
name="code_file"
type="file" type="file"
accept=".py,.js,.ts,.java,.rust,.c" accept=".py,.js,.ts,.java,.rust,.c"
{...register('code_file')}
/> />
</div> </div>
<Button kind="brand" className="mt-6" type="submit"> <Button kind="brand" className="mt-6" type="submit">

155
ui/UserAuthForm.tsx
View file

@ -1,7 +1,8 @@
'use client'; 'use client';
import axios from 'axios'; import cookies from 'js-cookie';
import { usePathname, useRouter } from 'next/navigation'; import { usePathname, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import AppLink from './AppLink'; import AppLink from './AppLink';
import Button from './Button'; import Button from './Button';
@ -40,61 +41,48 @@ export default function UserAuthForm() {
const router = useRouter(); const router = useRouter();
const pathname = usePathname()!; const pathname = usePathname()!;
const isSignIn = pathname.includes('sign-in'); const isSignIn = pathname.includes('sign-in');
const token = cookies.get('token');
async function onSubmit(data: FormData) { async function onSubmit(data: FormData) {
const { data: response, status } = await axios.post( const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/${isSignIn ? 'login' : 'register'}`, `${process.env.NEXT_PUBLIC_API_URL}/${isSignIn ? 'login' : 'register'}`,
{ {
data: { method: 'POST',
pseudo: data.pseudo, body: JSON.stringify(data)
email: data.email, }
passwd: data.passwd,
firstname: data.firstname,
lastname: data.lastname,
description: data.description,
sgroup: data.sgroup,
avatar: data.avatar
},
headers: {
'Content-Type': 'application/json'
}
},
{ insecureHTTPParser: true }
); );
console.log('response ', response); if (!isSignIn) {
const { username_valid, email_valid } = await res.json();
if (status === 200) { if (!username_valid) {
router.push('/dashboard'); setError('pseudo', {
type: 'manual',
message: "Nom d'utilisateur indisponible"
});
}
if (!email_valid) {
setError('email', {
type: 'manual',
message: 'Email déjà utilisé'
});
}
} }
// const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, { if (res.ok) {
// method: 'POST', const token = res.headers.get('Authorization')?.split(' ')[1];
// headers: { if (token) cookies.set('token', token);
// 'Content-Type': 'application/json' } else {
// }, setError('passwd', {
// body: JSON.stringify({ type: 'manual',
// pseudo: data.pseudo, message: "Nom d'utilisateur ou mot de passe incorrect"
// email: data.email, });
// passwd: data.passwd, }
// firstname: data.firstname,
// lastname: data.lastname,
// sgroup: data.sgroup,
// avatar: data.avatar
// })
// });
// const result = await response.json();
// if (response.status !== 200) {
// setError('email', { message: result.message });
// }
// if (response.status === 200) {
// router.push('/dashboard');
// }
} }
useEffect(() => {
if (token) router.push('/dashboard');
}, [token]);
return ( return (
<form <form
className="flex w-52 flex-col justify-center space-y-4 sm:w-72" className="flex w-52 flex-col justify-center space-y-4 sm:w-72"
@ -107,60 +95,21 @@ export default function UserAuthForm() {
type="email" type="email"
placeholder="peer-at@exemple.be" placeholder="peer-at@exemple.be"
required required
error={ error={errors.email?.message}
errors.email?.message
// &&
// (isSignIn ? (
// <>
// {translations.noAccountAssociated}{' '}
// <AppLink className="underline" href="/sign-up">
// {translations.signUpQuestion}
// </AppLink>
// </>
// ) : (
// errors.email.message
// ))
}
{...register('email')} {...register('email')}
/> />
<Input <Input
label="Nom" label="Nom"
type="lastname" type="lastname"
placeholder="Doe" placeholder="Doe"
error={ error={errors.lastname?.message}
errors.lastname?.message
// &&
// (isSignIn ? (
// <>
// {translations.noAccountAssociated}{' '}
// <AppLink className="underline" href="/sign-up">
// {translations.signUpQuestion}
// </AppLink>
// </>
// ) : (
// errors.email.message
// ))
}
{...register('lastname')} {...register('lastname')}
/> />
<Input <Input
label="Prénom" label="Prénom"
type="firstname" type="firstname"
placeholder="John" placeholder="John"
error={ error={errors.firstname?.message}
errors.firstname?.message
// &&
// (isSignIn ? (
// <>
// {translations.noAccountAssociated}{' '}
// <AppLink className="underline" href="/sign-up">
// {translations.signUpQuestion}
// </AppLink>
// </>
// ) : (
// errors.email.message
// ))
}
{...register('firstname')} {...register('firstname')}
/> />
</> </>
@ -170,7 +119,7 @@ export default function UserAuthForm() {
type="text" type="text"
placeholder="PeerAt" placeholder="PeerAt"
required required
error={errors.passwd?.message} error={errors.pseudo?.message}
{...register('pseudo')} {...register('pseudo')}
/> />
<Input <Input
@ -184,21 +133,23 @@ export default function UserAuthForm() {
<Button type="submit" kind="brand"> <Button type="submit" kind="brand">
{isSignIn ? 'Se connecter' : "S'inscrire"} {isSignIn ? 'Se connecter' : "S'inscrire"}
</Button> </Button>
{/* {!isSignIn && ( <div className="flex flex-col text-center">
<p className="items-center text-sm text-gray-400"> {!isSignIn && (
En cliquant sur continuer, vous acceptez les{' '} <p className="flex flex-col items-center text-sm text-muted">
<AppLink className="text-white underline" href="/privacy-policy" target="_blank"> En cliquant sur continuer, vous acceptez les{' '}
Politique de confidentialité <AppLink className="text-white underline" href="/privacy-policy" target="_blank">
Politique de confidentialité
</AppLink>
.
</p>
)}
<p className="flex flex-col items-center text-sm text-muted">
{isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
<AppLink className="text-brand underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
{isSignIn ? "S'inscrire maintenant" : 'Se connecter'}
</AppLink> </AppLink>
.
</p> </p>
)} */} </div>
<p className="flex flex-col items-center text-sm text-muted">
{isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
<AppLink className="text-brand underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
{isSignIn ? "S'inscrire maintenant" : 'Se connecter'}
</AppLink>
</p>
</form> </form>
); );
} }