Merge pull request #7 from Fayorg/authentication

Using NextAuth for authentication & Server actions

components/custom/gradingForm.tsx

@@ -1,64 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import Image from 'next/image';
-import YourGrade from '@images/your-grade.svg';
-import {Check} from "lucide-react";
-
-export function GradingForm({ password, data }: { password: string; data: any }) {
-	const [grade, setGrade] = useState<number>(0);
-	const [hasVoted, setHasVoted] = useState<boolean>(false);
-	const router = useRouter();
-
-	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-		event.preventDefault();
-
-		const response = await fetch('/api/grade', {
-			method: 'POST',
-			body: JSON.stringify({ grade, key: password, testId: data.id }),
-		});
-		const json = await response.json();
-		if (response.status == 200) {
-			setHasVoted(true);
-		} else {
-			alert(json.message);
-		}
-	}
-
-	if (data.vote.hasVoted || hasVoted) {
-		return (
-			<div className={"w-full md:w-[400px]"}>
-				<div className={"flex flex-row justify-evenly"}>
-					<Image src={YourGrade} alt={YourGrade} width={100}/>
-					<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{data.vote.hasVoted ? data.vote.grade : grade}</span>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className={"w-full md:w-[400px]"}>
-			<form onSubmit={handleSubmit}>
-				<div>
-					<input
-						type="range"
-						min="2"
-						max="12"
-						id="gradeSelector"
-						className={"w-full h-4 bg-white range range:bg-white text-white"}
-						onChange={(e) => setGrade(Number(e.target.value) / 2)}
-					/>
-				</div>
-				<div className={"flex flex-row justify-evenly"}>
-					<Image src={YourGrade} alt={YourGrade} width={100}/>
-					<span className={"w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center"}>{grade}</span>
-					<input type="submit" value={'Envoyer'} id="submit" className={"hidden"}></input>
-					<label htmlFor="submit" className={"w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center"}>
-						<Check width={24} height={24} color={"white"}/>
-					</label>
-				</div>
-			</form>
-		</div>
-	);
-}

components/custom/index.ts

@@ -1,4 +1,3 @@
 export { DayCard as DayCard } from './dayCard';
 export { TestCard as TestCard } from './testCard';
-export { GradingForm } from "./gradingForm";
 export { Santa } from "./santa";

components/custom/testCard.tsx

@@ -1,49 +1,48 @@
 'use client';
 
-import Calendar from "../../images/date.svg";
-import Image from "next/image";
+import Calendar from '../../images/date.svg';
+import Image from 'next/image';
 
-import { Ban, Snowflake, CircleOff } from "lucide-react";
+import { Ban, Snowflake, CircleOff } from 'lucide-react';
 
 export function TestCard({ data, error, isLoading }: { data: any; error: any; isLoading: boolean }) {
-	console.log(data);
 	if (isLoading)
 		return (
-			<div className={"w-fit h-fit relative"}>
-				<Image src={Calendar} alt={"Calendrier absolute"} />
-				<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
-					<Snowflake width={36} height={36} color={"#000000"} className={"animate-spin place-self-center"} />
-					<span className={"text-black text-xs"}>Chargement</span>
+			<div className={'w-fit h-fit relative'}>
+				<Image src={Calendar} alt={'Calendrier absolute'} />
+				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
+					<Snowflake width={36} height={36} color={'#000000'} className={'animate-spin place-self-center'} />
+					<span className={'text-black text-xs'}>Chargement</span>
 				</div>
 			</div>
 		);
 	if (error)
 		return (
-			<div className={"w-fit h-fit relative"}>
-				<Image src={Calendar} alt={"Calendrier absolute"} />
-				<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
-					<Ban width={36} height={36} color={"#000000"} className={"place-self-center"}/>
-					<span className={"text-black text-xs"}>Erreur</span>
+			<div className={'w-fit h-fit relative'}>
+				<Image src={Calendar} alt={'Calendrier absolute'} />
+				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
+					<Ban width={36} height={36} color={'#000000'} className={'place-self-center'} />
+					<span className={'text-black text-xs'}>Erreur</span>
 				</div>
 			</div>
 		);
-	if (data.status == 404)
+	if (!data)
 		return (
-			<div className={"w-fit h-fit relative"}>
-				<Image src={Calendar} alt={"Calendrier absolute"} />
-				<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
-					<CircleOff width={36} height={36} color={"#000000"} className={"place-self-center"}/>
-					<span className={"text-black text-xs"}>Pas de test</span>
+			<div className={'w-fit h-fit relative'}>
+				<Image src={Calendar} alt={'Calendrier absolute'} />
+				<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
+					<CircleOff width={36} height={36} color={'#000000'} className={'place-self-center'} />
+					<span className={'text-black text-xs'}>Pas de test</span>
 				</div>
 			</div>
 		);
 
 	return (
-		<div className={"w-fit h-fit relative"}>
-			<Image src={Calendar} alt={"Calendrier absolute"} />
-			<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
-				<span className={"text-black text-[36px] font-medium"}>{new Date().getDate()}</span>
-				<span className={"text-black text-xs"}>{data.testOf.firstName}</span>
+		<div className={'w-fit h-fit relative'}>
+			<Image src={Calendar} alt={'Calendrier absolute'} />
+			<div className={'w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center'}>
+				<span className={'text-black text-[36px] font-medium'}>{new Date().getDate()}</span>
+				<span className={'text-black text-xs'}>{data.testOf.firstName}</span>
 			</div>
 		</div>
 	);

components/forms/GradingForm.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+import Image from 'next/image';
+import YourGrade from '@images/your-grade.svg';
+import { Check } from 'lucide-react';
+import { Session } from 'next-auth';
+import { addGrade } from '@/actions/grades';
+
+export function GradingForm({ session, testId }: { session: Session; testId: number }) {
+	const [grade, setGrade] = useState<number>(0);
+	const [hasVoted, setHasVoted] = useState<boolean>(false);
+
+	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+
+		const result = await addGrade(testId, session.user.id, grade, null);
+		if (result.id) {
+			console.log('ok');
+			setHasVoted(true);
+			setGrade(result.grade);
+		} else {
+			console.log('error');
+		}
+	}
+
+	if (hasVoted && grade != 0) {
+		return (
+			<div className={'w-full md:w-[400px]'}>
+				<div className={'flex flex-row justify-evenly'}>
+					<Image src={YourGrade} alt={YourGrade} width={100} />
+					<span className={'w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center'}>{grade}</span>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className={'w-full md:w-[400px]'}>
+			<form onSubmit={handleSubmit}>
+				<div>
+					<input type="range" min="2" max="12" id="gradeSelector" className={'w-full h-4 bg-white range range:bg-white text-white'} onChange={(e) => setGrade(Number(e.target.value) / 2)} />
+				</div>
+				<div className={'flex flex-row justify-evenly'}>
+					<Image src={YourGrade} alt={YourGrade} width={100} />
+					<span className={'w-[54px] h-[54px] bg-accent rounded-[20px] contents-none grid place-content-center'}>{grade}</span>
+					<input type="submit" value={'Envoyer'} id="submit" className={'hidden'}></input>
+					<label htmlFor="submit" className={'w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center'}>
+						<Check width={24} height={24} color={'white'} />
+					</label>
+				</div>
+			</form>
+		</div>
+	);
+}

components/forms/LoginForm.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { signIn } from 'next-auth/react';
+import { useState } from 'react';
+import { Input } from '../ui/input';
+import { Check } from 'lucide-react';
+
+export function LoginForm() {
+	const [password, setPassword] = useState('');
+
+	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault();
+
+		await signIn('credentials', {
+			key: password,
+			callbackUrl: '/play',
+		});
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className={'flex flex-row gap-4 w-full md:w-[400px]'}>
+			<Input type="password" placeholder="Mot de passe" id="password" name="password" value={password} onChange={(e) => setPassword(e.target.value)}></Input>
+			<input type="submit" value="Submit" id="submit" className={'hidden'} />
+			<label htmlFor="submit" className={'w-[54px] h-[54px] bg-secondary rounded-[20px] contents-none grid place-content-center'}>
+				<Check width={24} height={24} color={'white'} />
+			</label>
+		</form>
+	);
+}