Merge branch 'dev' of https://github.com/LucasVbr/projet-web4 into dev

src/components/CardUser.jsx

@@ -0,0 +1,29 @@
+import { CardBody, Card, Image, Flex, Box } from "@chakra-ui/react";
+import Carousel from "./Carousel";
+
+export default function CardUser(props){
+    const {user} = props;
+    // const data_user = props;
+    const borderRad = "1.5rem";
+
+    return (
+        <Card 
+          borderRadius={borderRad}
+          width={"30vw"}
+          height={"100vh"}
+          padding={"0px"}
+            >
+            <Carousel
+            images = {user.images}
+            borderRadiusImg = {borderRad}
+            height = {"60vh"}
+            />
+            <Flex>
+                <Box>
+
+                </Box>
+            </Flex>
+        </Card>
+    );
+    
+}

src/components/Carousel.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Box, IconButton, useBreakpointValue } from '@chakra-ui/react';
+// Here we have used react-icons package for the icons
+import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi';
+// And react-slick as our Carousel Lib
+import Slider from 'react-slick';
+
+// Settings for the slider
+const settings = {
+  dots: true,
+  arrows: false,
+  fade: true,
+  infinite: true,
+  autoplay: true,
+  speed: 500,
+  autoplaySpeed: 5000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+};
+
+export default function Carousel(props) {
+
+
+    const { height, borderRadiusImg } = props;
+  // As we have used custom buttons, we need a reference variable to
+  // change the state
+  const [slider, setSlider] = React.useState();
+
+  // These are the breakpoints which changes the position of the
+  // buttons as the screen size changes
+  const top = useBreakpointValue({ base: '90%', md: '50%' });
+  const side = useBreakpointValue({ base: '30%', md: '10px' });
+
+  // These are the images used in the slide
+//   const cards = [
+//     'https://images.unsplash.com/photo-1612852098516-55d01c75769a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//     'https://images.unsplash.com/photo-1627875764093-315831ac12f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//     'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+//   ];
+
+    const cards = props.images;
+
+  return (
+    <Box
+      position={'relative'}
+      height={height}
+      width={'full'}
+      overflow={'hidden'}>
+      {/* CSS files for react-slick */}
+      <link
+        rel="stylesheet"
+        type="text/css"
+        charSet="UTF-8"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+      />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+      />
+      {/* Left Icon */}
+      <IconButton
+        aria-label="left-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        position="absolute"
+        left={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickPrev()}>
+        <BiLeftArrowAlt />
+      </IconButton>
+      {/* Right Icon */}
+      <IconButton
+        aria-label="right-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        position="absolute"
+        right={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickNext()}>
+        <BiRightArrowAlt />
+      </IconButton>
+      {/* Slider */}
+      <Slider {...settings} ref={(slider) => setSlider(slider)}>
+        {cards.map((url, index) => (
+          <Box
+            key={index}
+            borderRadius={borderRadiusImg}
+            height={'6xl'}
+            // position="relative"
+            // backgroundPosition="center"
+            // backgroundRepeat="no-repeat"
+            // backgroundSize="cover"
+            backgroundImage={`url(${url})`}
+          />
+        ))}
+      </Slider>
+    </Box>
+  );
+}

src/components/layout/Home/HomePresentation.tsx

@@ -0,0 +1,47 @@
+import {
+  Box,
+  Flex,
+  Heading,
+  Image,
+  Text,
+} from "@chakra-ui/react";
+
+export default function HomeHero() {
+
+  const RightSide = () => (
+    <Flex justify={"center"} direction={"column"} flexBasis={"100%"} px={75}>
+      <Heading mb={"2.5rem"} style={{color:'#FAF9FF'}}>Un match, un chat, un date ! </Heading>
+      <Text mb={"2rem"} style={{color:'#FAF9FF'}}>
+        Faites des rencontres en France, où que vous soyez.
+        La taille de notre communauté et la popularité du site vous permettront de trouver des profils correspondant
+        à vos recherches et de vivre votre rencontre en ligne en toute sérénité. Choisissez une ville ou une région et
+        découvrez les profils des célibataires inscrits qui se trouvent à quelques kilomètres de chez vous.
+      </Text>
+    </Flex>
+  );
+
+  const LeftSide = () => (
+    <Box flexBasis={"100%"}>
+      <Image
+        boxShadow={"lg"}
+        minH={"100vh"}
+        src={"/couple_funny.png"}
+        alt="funny couple"
+      />
+    </Box>
+  );
+
+  return (
+    <Flex
+      bg={"#805AD5"}
+      minH={"100vh"}
+      align={"center"}
+      justify={"center"}
+    >
+      <Flex gap={10}>
+        <LeftSide />
+        <RightSide />
+      </Flex>
+    </Flex>
+  );
+}

src/pages/api/user/readUser.ts

@@ -4,7 +4,20 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient();
 
 export default async function readUser(req: NextApiRequest, res: NextApiResponse) {
-  const users = await prisma.user.findMany()
   
+  const {email, password} = req.query
+  
+  if(!email) {
+    const users = await prisma.user.findMany()
     return res.status(200).send({message: "readUser", users});
   }
+  
+  const user = await prisma.user.findUnique({where :{"email" : email}})
+  
+  if (user?.password == password) {
+    res.status(200).send({message: "User found", user});
+  }
+
+  res.status(400).send({message: "Mot de passe incorrect"});
+
+}

src/pages/index.tsx

@@ -2,6 +2,8 @@ import Head from 'next/head';
 import Navbar from '@/components/Navbar';
 import {Box, Image} from '@chakra-ui/react';
 import HomeHero from '@/components/layout/Home/HomeHero';
+import HomePresentation from '@/components/layout/Home/HomePresentation';
+
 
 export default function Home() {
   return (
@@ -15,6 +17,7 @@ export default function Home() {
 
         <Navbar/>
         <HomeHero/>
+        <HomePresentation/>
 
         <Box minH={'100vh'}>
         </Box>

src/pages/login.jsx

@@ -0,0 +1,114 @@
+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) => {
+    try {
+      const response = await fetch(`/api/user/?email=${values.email}&password=${values.password}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      const data = await response.json();
+      if (data.error) {
+        alert(data.message);
+      } else {
+        console.log(data);
+        alert("connexion réussie");
+        // router.push("/");
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  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="password"
+                type="password"
+                placeholder="Mot de passe"
+                {...register("password", {
+                  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/test_card.jsx

@@ -0,0 +1,23 @@
+import CardUser from "../components/CardUser";
+
+export default function Test_card(){
+
+    const user = {
+        name: "dujardin",
+        surname: "jean",
+        age:19,
+        aPropos: "Je suis une personne fictive, pas tres fictive",
+        images: [
+            "401446.webp"
+        ],
+        passions : [
+            "Sport",
+            "Piscine",
+            "Formule1",
+        ]
+    }
+
+    return(
+        <CardUser user={user}/>
+    )
+}