lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-03-14 22:52:45 +01:00
parent e54b1e27f3
commit 0a4359d916
9 changed files with 2515 additions and 2195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+17 -1
View File
@@ -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
+2 -1
View File
@@ -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",
public/couple_holding_hands.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 560 KiB

public/couple_horizon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

src/components/Navbar.tsx
+37 -15
View File
@@ -1,16 +1,16 @@
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 redirect_connexion = () => {
router.push("/login");
};
const redirect_inscription = () => {
router.push("/register");
};
const LeftContent = () => (
<Box flexBasis={"100%"}>
@@ -19,7 +19,7 @@ const LeftContent = () => (
);
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>
@@ -27,10 +27,32 @@ const CenterContent = () => (
);
const RightContent = () => (
<Flex justify={'right'} flexBasis={"100%"}>
<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>
);
}
src/components/layout/Home/HomeHero.tsx
+41 -24
View File
@@ -6,13 +6,51 @@ import {
Heading,
Image,
Text,
} from '@chakra-ui/react';
} from "@chakra-ui/react";
import { useRouter } from "next/router";
export default function HomeHero() {
const router = useRouter();
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&apos;amour. Inscrivez-vous dès
maintenant pour découvrir toutes nos fonctionnalités !
</Text>
<ButtonGroup>
<Button colorScheme={"purple"} onClick={redirect_inscription}>
S&apos;inscrire
</Button>
</ButtonGroup>
</Flex>
);
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
bg={"#FAF9FF"}
px={150}
minH={"100vh"}
align={"center"}
justify={"center"}
>
<Flex gap={10}>
<LeftSide />
<RightSide />
@@ -20,24 +58,3 @@ export default function HomeHero() {
</Flex>
);
}
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&apos;amour.
Inscrivez-vous dès maintenant pour découvrir toutes nos fonctionnalités
!
</Text>
<ButtonGroup>
<Button colorScheme={'purple'}>S&apos;inscrire</Button>
</ButtonGroup>
</Flex>
);
const RightSide = () => (
<Box flexBasis={'100%'}>
<Image borderRadius={20} boxShadow={'lg'} src={'/couple_img.jpg'}
alt="happy couple"/>
</Box>
);
src/pages/login.jsx
+98
View File
@@ -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
+161
View File
@@ -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>
);
}
yarn.lock
+2152 -2147
View File
File diff suppressed because it is too large Load Diff