feat(login / register page): Added login and register page

package-lock.json

@@ -19,7 +19,8 @@
         "framer-motion": "^10.0.2",
         "next": "13.2.3",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "18.2.0",
+        "react-hook-form": "^7.43.5"
       },
       "devDependencies": {
         "@types/node": "^18.15.1",
@@ -4599,6 +4600,21 @@
         }
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.5.tgz",
+      "integrity": "sha512-YcaXhuFHoOPipu5pC7ckxrLrialiOcU91pKu8P+isAcXZyMgByUK9PkI9j5fENO4+6XU5PwWXRGMIFlk9u9UBQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -20,7 +20,8 @@
     "framer-motion": "^10.0.2",
     "next": "13.2.3",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.5"
   },
   "devDependencies": {
     "@types/node": "^18.15.1",

src/components/Navbar.tsx

@@ -1,36 +1,58 @@
-import {Box, Flex, Text, ButtonGroup, Button} from '@chakra-ui/react';
+import { Box, Flex, Text, ButtonGroup, Button } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 
 export default function Navbar() {
-  return (
+  const router = useRouter();
-      <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>
-  );
-}
 
-const LeftContent = () => (
+  const redirect_connexion = () => {
+    router.push("/login");
+  };
+
+  const redirect_inscription = () => {
+    router.push("/register");
+  };
+
+  const LeftContent = () => (
     <Box flexBasis={"100%"}>
       <Text>Logo</Text>
     </Box>
-);
+  );
 
-const CenterContent = () => (
+  const CenterContent = () => (
-    <Flex gap={5} justify={'center'} flexBasis={"100%"}>
+    <Flex gap={5} justify={"center"} flexBasis={"100%"}>
       <Text>A propos</Text>
       <Text>Contact</Text>
       <Text>Aide</Text>
     </Flex>
-);
+  );
 
-const RightContent = () => (
+  const RightContent = () => (
-    <Flex justify={'right'} flexBasis={"100%"}>
+    <Flex justify={"right"} flexBasis={"100%"}>
       <ButtonGroup>
-        <Button>Inscription</Button>
+        <Button onClick={redirect_inscription}>Inscription</Button>
-        <Button colorScheme={'purple'}>Connexion</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>
+  );
+}

src/components/layout/Home/HomeHero.tsx

@@ -6,38 +6,55 @@ import {
   Heading,
   Image,
   Text,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
 
 export default function HomeHero() {
+  const router = useRouter();
 
-  return (
+  const redirect_inscription = () => {
-      <Flex bg={'#FAF9FF'} px={150} minH={'100vh'} align={'center'}
+    router.push("/register");
-            justify={'center'}>
+  };
-        <Flex gap={10}>
-          <LeftSide/>
-          <RightSide/>
-        </Flex>
-      </Flex>
-  );
-}
 
-const LeftSide = () => (
+  const LeftSide = () => (
-    <Flex justify={'center'} direction={'column'} flexBasis={'100%'}>
+    <Flex justify={"center"} direction={"column"} flexBasis={"100%"}>
-      <Heading mb={'2.5rem'}>Prêt(e) à trouver votre âme sœur ?</Heading>
+      <Heading mb={"2.5rem"}>Prêt(e) à trouver votre âme sœur ?</Heading>
-      <Text mb={'2rem'}>Notre site de rencontre vous offre la possibilité de
+      <Text mb={"2rem"}>
-        rencontrer des personnes intéressantes et de trouver l&apos;amour.
+        Notre site de rencontre vous offre la possibilité de rencontrer des
-        Inscrivez-vous dès maintenant pour découvrir toutes nos fonctionnalités
+        personnes intéressantes et de trouver l&apos;amour. Inscrivez-vous dès
-        !
+        maintenant pour découvrir toutes nos fonctionnalités !
       </Text>
       <ButtonGroup>
-        <Button colorScheme={'purple'}>S&apos;inscrire</Button>
+        <Button colorScheme={"purple"} onClick={redirect_inscription}>
+          S&apos;inscrire
+        </Button>
       </ButtonGroup>
     </Flex>
-);
+  );
 
-const RightSide = () => (
+  const RightSide = () => (
-    <Box flexBasis={'100%'}>
+    <Box flexBasis={"100%"}>
-      <Image borderRadius={20} boxShadow={'lg'} src={'/couple_img.jpg'}
+      <Image
-             alt="happy couple"/>
+        borderRadius={20}
+        boxShadow={"lg"}
+        src={"/couple_img.jpg"}
+        alt="happy couple"
+      />
     </Box>
-);
+  );
+
+  return (
+    <Flex
+      bg={"#FAF9FF"}
+      px={150}
+      minH={"100vh"}
+      align={"center"}
+      justify={"center"}
+    >
+      <Flex gap={10}>
+        <LeftSide />
+        <RightSide />
+      </Flex>
+    </Flex>
+  );
+}

src/pages/login.jsx

@@ -0,0 +1,98 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Image,
+  Input,
+  Spacer,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+export default function Login() {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm();
+
+  const router = useRouter();
+
+  const onLogin = async (values) => {
+    alert(JSON.stringify(values, null, 2));
+    // faut voir ce qu'on fait quand on se connecte
+  };
+
+  const redirect_home = () => {
+    router.push("/");
+  };
+
+  const RightSide = () => (
+    <Flex
+      justify={"center"}
+      direction={"column"}
+      flexBasis={"100%"}
+      align={"center"}
+    >
+      <Heading mb={"2.5rem"}>Connexion</Heading>
+      <Box w={"25vw"}>
+        <form onSubmit={handleSubmit(onLogin)}>
+          <FormControl isInvalid={errors.name}>
+            <Box mb={"1rem"}>
+              <FormLabel>Adresse email</FormLabel>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Adresse@email.com"
+                {...register("email", {
+                  required: "This is required",
+                })}
+              />
+            </Box>
+            <Box mb={"1rem"}>
+              <FormLabel>Mot de passe</FormLabel>
+              <Input
+                id="pwd"
+                type="password"
+                placeholder="Mot de passe"
+                {...register("pwd", {
+                  required: "This is required",
+                })}
+              />
+            </Box>
+            <Flex mt={"1rem"} w={"100%"}>
+              <Button onClick={redirect_home}>Retour</Button>
+              <Spacer />
+              <Button colorScheme="purple" type="submit">
+                Connexion
+              </Button>
+            </Flex>
+          </FormControl>
+        </form>
+      </Box>
+    </Flex>
+  );
+
+  const LeftSide = () => (
+    <Box flexBasis={"100%"}>
+      <Image
+        h={"100vh"}
+        w={"100%"}
+        src={"/couple_horizon.png"}
+        alt="couple looking at horizon"
+      />
+    </Box>
+  );
+
+  return (
+    <Box>
+      <Flex gap={10}>
+        <LeftSide />
+        <RightSide />
+      </Flex>
+    </Box>
+  );
+}

src/pages/register.jsx

@@ -0,0 +1,161 @@
+import {
+  Box,
+  Button,
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Heading,
+  Image,
+  Input,
+  Spacer,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+export default function Register() {
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm();
+
+  const router = useRouter();
+
+  const redirect_home = () => {
+    router.push("/");
+  };
+
+  const onRegister = async (values) => {
+    alert(JSON.stringify(values, null, 2));
+    // if (values.pwd !== values.pwd_bis) {
+    //   alert("Les mots de passe ne correspondent pas");
+    //   return;
+    // }
+    // try {
+    //   const response = await fetch("/api/user/", {
+    //     method: "POST",
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //     },
+    //     body: JSON.stringify(values),
+    //   });
+    //   const data = await response.json();
+    //   if (data.error) {
+    //     alert(data.message);
+    //   } else {
+    //     console.log(data);
+    //     alert("Inscription réussie");
+    //     router.push("/");
+    //   }
+    // } catch (error) {
+    //   console.log(error);
+    // }
+  };
+
+  const RightSide = () => (
+    <Flex
+      justify={"center"}
+      direction={"column"}
+      flexBasis={"100%"}
+      align={"center"}
+    >
+      <Heading mb={"2.5rem"}>Inscription</Heading>
+      <Box w={"25vw"}>
+        <form onSubmit={handleSubmit(onRegister)}>
+          <FormControl isInvalid={errors.name}>
+            <Flex mb={"1rem"} gap={5}>
+              <Box>
+                <FormLabel>Prénom</FormLabel>
+                <Input
+                  id="prenom"
+                  type="text"
+                  placeholder="Prénom"
+                  {...register("prenom", {
+                    required: "This is required",
+                  })}
+                />
+              </Box>
+              <Box>
+                <FormLabel>Nom</FormLabel>
+                <Input
+                  id="nom"
+                  type="text"
+                  placeholder="Nom"
+                  {...register("nom", {
+                    required: "This is required",
+                  })}
+                />
+              </Box>
+            </Flex>
+            <Box mb={"1rem"}>
+              <FormLabel>Adresse email</FormLabel>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Adresse@email.com"
+                {...register("email", {
+                  required: "This is required",
+                })}
+              />
+            </Box>
+            <Box mb={"1rem"}>
+              <FormLabel>Mot de passe</FormLabel>
+              <Input
+                id="pwd"
+                type="password"
+                placeholder="Mot de passe"
+                {...register("pwd", {
+                  required: "This is required",
+                })}
+              />
+            </Box>
+            {/* Il y a une margin en trop mais je me suis dit que c'etais mieux d'avoir plus d'expace entre les deux */}
+            <Box mb={"1rem"}>
+              <FormLabel>Confirmation du mot de passe</FormLabel>
+              <Input
+                id="pwd_bis"
+                type="password"
+                placeholder="Mot de passe"
+                {...register("pwd_bis", {
+                  required: "This is required",
+                })}
+              />
+            </Box>
+
+            <FormErrorMessage>
+              {errors.name && errors.name.message}
+            </FormErrorMessage>
+          </FormControl>
+          <Flex mt={"1rem"} w={"100%"}>
+            <Button onClick={redirect_home}>Retour</Button>
+            <Spacer />
+            <Button colorScheme="purple" type="submit" isLoading={isSubmitting}>
+              Je m'inscris
+            </Button>
+          </Flex>
+        </form>
+      </Box>
+    </Flex>
+  );
+
+  const LeftSide = () => (
+    <Box flexBasis={"100%"}>
+      <Image
+        h={"100vh"}
+        w={"100%"}
+        src={"/couple_holding_hands.png"}
+        alt="couple holding hands"
+      />
+    </Box>
+  );
+
+  return (
+    <Box>
+      <Flex gap={10}>
+        <LeftSide />
+        <RightSide />
+      </Flex>
+    </Box>
+  );
+}