Create User Login/Logout

Took 3 hours 40 minutes

src/components/Navbar.tsx

@@ -1,58 +1,55 @@
-import { Box, Flex, Text, ButtonGroup, Button } from "@chakra-ui/react";
-import { useRouter } from "next/router";
+import {Box, Flex, Text, ButtonGroup, Button} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+import {signOut, useSession} from 'next-auth/react';
 
 export default function Navbar() {
   const router = useRouter();
+  const {data: session, status} = useSession();
 
-  const redirect_connexion = () => {
-    router.push("/login");
+  const RightSection = () => {
+
+    if (status === "authenticated" && session.user) return (
+        <Flex justify={'right'} flexBasis={'100%'}>
+          <Text>{session.user.email}</Text>
+
+          <ButtonGroup>
+            <Button colorScheme={'purple'} onClick={() => signOut()}>
+              Déconnexion
+            </Button>
+          </ButtonGroup>
+        </Flex>
+    );
+    else return (
+        <Flex justify={'right'} flexBasis={'100%'}>
+          <ButtonGroup>
+            <Button
+                onClick={() => router.push('/register')}>Inscription</Button>
+            <Button colorScheme={'purple'}
+                    onClick={() => router.push('/login')}>
+              Connexion
+            </Button>
+          </ButtonGroup>
+        </Flex>
+    );
   };
 
-  const redirect_inscription = () => {
-    router.push("/register");
-  };
-
-  const LeftContent = () => (
-    <Box flexBasis={"100%"}>
-      <Text>Logo</Text>
-    </Box>
-  );
-
-  const CenterContent = () => (
-    <Flex gap={5} justify={"center"} flexBasis={"100%"}>
-      <Text>A propos</Text>
-      <Text>Contact</Text>
-      <Text>Aide</Text>
-    </Flex>
-  );
-
-  const RightContent = () => (
-    <Flex justify={"right"} flexBasis={"100%"}>
-      <ButtonGroup>
-        <Button onClick={redirect_inscription}>Inscription</Button>
-        <Button colorScheme={"purple"} onClick={redirect_connexion}>
-          Connexion
-        </Button>
-      </ButtonGroup>
-    </Flex>
-  );
-
   return (
-    <Box
-      position={"fixed"}
-      zIndex={9999}
-      top={0}
-      width={"100vw"}
-      backdropFilter={"auto"}
-      backdropBlur={"20px"}
-      px={10}
-      py={2}
-    >
-      <Flex align={"center"}>
-        <LeftContent />
-        <CenterContent />
-        <RightContent />
-      </Flex>
-    </Box>
+      <Box position={'fixed'} zIndex={9999} top={0} width={'100vw'}
+           backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}>
+        <Flex align={'center'}>
+          <Box flexBasis={'100%'}>
+            <Text>Logo</Text>
+          </Box>
+
+          <Flex gap={5} justify={'center'} flexBasis={'100%'}>
+            <Text>A propos</Text>
+            <Text>Contact</Text>
+            <Text>Aide</Text>
+          </Flex>
+
+          <RightSection/>
+        </Flex>
+      </Box>
   );
+
 }

src/components/context/Users.jsx

@@ -1,24 +0,0 @@
-import { createContext, useContext, useState } from "react";
-
-// faudra récuperer les users de la base de données
-
-const UsersContext = createContext(null);
-
-export const UsersProvider = ({ children }) => {
-  const [users, setUsers] = useState(users);
-
-  return (
-    <UserContext.Provider value={{ users, setUsers }}>
-      {children}
-    </UserContext.Provider>
-  );
-};
-
-export const useUser = () => {
-  const usersState = useContext(UsersContext);
-
-  if (!usersState) {
-    throw new Error("useUsers must be used within a UsersProvider");
-  }
-  return usersState;
-};

src/components/form/LoginForm.tsx

@@ -0,0 +1,87 @@
+import {
+  Box, Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Container,
+} from '@chakra-ui/react';
+import {useState} from 'react';
+import {useRouter} from 'next/router';
+import {signIn, SignInResponse,} from 'next-auth/react';
+
+import {LoginData} from '@/models/form/LoginData';
+
+export default function LoginForm() {
+  const router = useRouter();
+  const [loginData, setLoginData] = useState(new LoginData());
+  const [invalidInput, setInvalidInput] = useState(false);
+
+  const buttonWidth = {base: '100%', md: 'unset'};
+
+  const handleInput = ({email = loginData.email, password = loginData.password}) => {
+    setInvalidInput(false);
+    setLoginData(new LoginData(email, password));
+  };
+
+  const handleSubmit = async () => {
+    const {email, password} = loginData;
+    await signIn('credentials',
+        {email, password, redirect: false})
+    .then((res) => {
+      const {ok} = res as SignInResponse
+
+      if (!ok) setInvalidInput(true)
+      else router.push("/")
+    });
+  };
+
+  return (
+      <Box flexBasis={'100%'}>
+        <Container>
+          <Heading textAlign={'center'} size={'2xl'}>Connexion</Heading>
+
+          {/* Email */}
+          <FormControl mt={'100px'} isInvalid={invalidInput}>
+            <Box mb={'1rem'}>
+              <FormLabel>Adresse email</FormLabel>
+              <Input
+                  isInvalid={invalidInput}
+                  id={'email'}
+                  type={'email'}
+                  value={loginData.email}
+                  onChange={(evt) => handleInput({email: evt.target.value})}
+                  placeholder={'adresse@email.com'}
+                  required={true}
+              />
+            </Box>
+
+            {/* Mot de passe */}
+            <Box mb={'1rem'}>
+              <FormLabel>Mot de passe</FormLabel>
+              <Input
+                  isInvalid={invalidInput}
+                  id={'password'}
+                  type={'password'}
+                  value={loginData.password}
+                  onChange={(evt) => handleInput({password: evt.target.value})}
+                  placeholder={'Mot de passe'}
+                  required={true}
+              />
+            </Box>
+
+            {/*Boutons*/}
+            <Flex justify={'center'} mt={'50px'} gap={5}
+                  justifyContent={'space-between'}>
+              <Button onClick={() => router.push('/')}
+                      w={buttonWidth}>Retour</Button>
+              <Button onClick={handleSubmit}
+                      w={buttonWidth} colorScheme="purple">Connexion</Button>
+            </Flex>
+
+          </FormControl>
+        </Container>
+      </Box>
+  );
+}

src/components/layout/Home/HomePresentation.tsx

@@ -21,13 +21,7 @@ export default function HomeHero() {
   );
 
   const LeftSide = () => (
-    <Box flexBasis={"100%"}>
-      <Image
-        boxShadow={"lg"}
-        minH={"100vh"}
-        src={"/couple_funny.png"}
-        alt="funny couple"
-      />
+    <Box flexBasis={"100%"} minH={"100vh"} bgImage={"/couple_funny.png"} bgSize={'cover'} bgPos={"center"}>
     </Box>
   );