mirror of
https://github.com/LucasVbr/meeting-app.git
synced 2026-05-13 17:21:53 +00:00
feat(login / register page): Added login and register page
This commit is contained in:
Laurian-Dufrechou
+43
-21
@@ -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 (
|
||||
<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 router = useRouter();
|
||||
|
||||
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 = () => (
|
||||
<Flex gap={5} justify={'center'} flexBasis={"100%"}>
|
||||
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%"}>
|
||||
const RightContent = () => (
|
||||
<Flex justify={"right"} flexBasis={"100%"}>
|
||||
<ButtonGroup>
|
||||
<Button>Inscription</Button>
|
||||
<Button colorScheme={'purple'}>Connexion</Button>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<Flex bg={'#FAF9FF'} px={150} minH={'100vh'} align={'center'}
|
||||
justify={'center'}>
|
||||
<Flex gap={10}>
|
||||
<LeftSide/>
|
||||
<RightSide/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
const redirect_inscription = () => {
|
||||
router.push("/register");
|
||||
};
|
||||
|
||||
const LeftSide = () => (
|
||||
<Flex justify={'center'} direction={'column'} flexBasis={'100%'}>
|
||||
<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
|
||||
rencontrer des personnes intéressantes et de trouver l'amour.
|
||||
Inscrivez-vous dès maintenant pour découvrir toutes nos fonctionnalités
|
||||
!
|
||||
const LeftSide = () => (
|
||||
<Flex justify={"center"} direction={"column"} flexBasis={"100%"}>
|
||||
<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 rencontrer des
|
||||
personnes intéressantes et de trouver l'amour. Inscrivez-vous dès
|
||||
maintenant pour découvrir toutes nos fonctionnalités !
|
||||
</Text>
|
||||
<ButtonGroup>
|
||||
<Button colorScheme={'purple'}>S'inscrire</Button>
|
||||
<Button colorScheme={"purple"} onClick={redirect_inscription}>
|
||||
S'inscrire
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Flex>
|
||||
);
|
||||
);
|
||||
|
||||
const RightSide = () => (
|
||||
<Box flexBasis={'100%'}>
|
||||
<Image borderRadius={20} boxShadow={'lg'} src={'/couple_img.jpg'}
|
||||
alt="happy couple"/>
|
||||
const RightSide = () => (
|
||||
<Box flexBasis={"100%"}>
|
||||
<Image
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user