Refactor Register

Took 1 hour 8 minutes

src/components/form/LoginForm.tsx

@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {signIn, SignInResponse,} from 'next-auth/react';
+import {signIn, SignInResponse} from 'next-auth/react';
 
 import {LoginData} from '@/models/form/LoginData';
 
@@ -20,20 +20,18 @@ export default function LoginForm() {
 
   const buttonWidth = {base: '100%', md: 'unset'};
 
-  const handleInput = ({email = loginData.email, password = loginData.password}) => {
+  const handleInput = (data: any) => {
     setInvalidInput(false);
-    setLoginData(new LoginData(email, password));
+    setLoginData({...loginData, ...data});
   };
 
   const handleSubmit = async () => {
-    const {email, password} = loginData;
     await signIn('credentials',
-        {email, password, redirect: false})
-    .then((res) => {
-      const {ok} = res as SignInResponse
+        {...loginData, redirect: false}).then((res) => {
+      const {ok} = res as SignInResponse;
 
-      if (!ok) setInvalidInput(true)
-      else router.push("/")
+      if (!ok) setInvalidInput(true);
+      else router.push('/');
     });
   };
 
@@ -43,22 +41,23 @@ export default function LoginForm() {
           <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>
+          <FormControl mb={'1rem'} mt={'100px'} isInvalid={invalidInput}>
 
-            {/* Mot de passe */}
-            <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}
+            />
+          </FormControl>
+
+          {/* Mot de passe */
+          }
+          <FormControl mb={'1rem'}>
               <FormLabel>Mot de passe</FormLabel>
               <Input
                   isInvalid={invalidInput}
@@ -69,19 +68,19 @@ export default function LoginForm() {
                   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>
-  );
+
+          {/*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>
+      </Container>
+</Box>
+)
+
 }

src/components/form/RegisterForm.tsx

@@ -0,0 +1,120 @@
+import {
+  Box, Button,
+  Flex,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Container,
+} from '@chakra-ui/react';
+import {useRouter} from 'next/router';
+import {useState} from 'react';
+import {RegisterData} from '@/models/form/RegisterData';
+
+export default function RegisterForm() {
+  const router = useRouter();
+  const [registerData, setRegisterData] = useState(new RegisterData());
+  const [invalidInput, setInvalidInput] = useState(false);
+
+  const buttonWidth = {base: '100%', md: 'unset'};
+
+  const handleInput = (data: any) => {
+    setInvalidInput(false);
+    setRegisterData({...registerData, ...data});
+  };
+
+  const handleSubmit = () => {
+    const {password, confirmPassword} = registerData;
+    if (password !== confirmPassword) setInvalidInput(true);
+
+    fetch('/api/user/new', {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(registerData),
+    }).then(() => router.push('/')).catch(() => {
+      setInvalidInput(true);
+      setRegisterData({...registerData, password: '', confirmPassword: ''});
+    });
+  };
+
+  return (
+      <Box flexBasis={"100%"}>
+        <Container>
+          <Heading textAlign={"center"} size={"2xl"}>Inscription</Heading>
+
+          <Flex mt={"100px"} mb={'1rem'} gap={5}>
+            {/*Prénom*/}
+            <FormControl>
+              <FormLabel>Prénom</FormLabel>
+              <Input
+                  id="firstName"
+                  type="text"
+                  value={registerData.firstName}
+                  onChange={(evt) => handleInput({firstName: evt.target.value})}
+                  placeholder="Prénom"
+                  required={true}
+              />
+            </FormControl>
+
+            {/*Nom*/}
+            <FormControl>
+              <FormLabel>Nom</FormLabel>
+              <Input
+                  id="lastName"
+                  type="text"
+                  value={registerData.lastName}
+                  onChange={(evt) => handleInput({lastName: evt.target.value})}
+                  placeholder="Nom"
+                  required={true}
+              />
+            </FormControl>
+          </Flex>
+
+          {/*Email*/}
+          <FormControl mb={'1rem'} isInvalid={invalidInput}>
+            <FormLabel>Adresse email</FormLabel>
+            <Input
+                id="email"
+                type="email"
+                value={registerData.email}
+                onChange={(evt) => handleInput({email: evt.target.value})}
+                placeholder="adresse@email.com"
+            />
+          </FormControl>
+
+          {/*Mot de passe*/}
+          <FormControl mb={'1rem'} isInvalid={invalidInput}>
+            <FormLabel>Mot de passe</FormLabel>
+            <Input
+                id="password"
+                type="password"
+                value={registerData.password}
+                onChange={(evt) => handleInput({password: evt.target.value})}
+                placeholder="Mot de passe"
+            />
+          </FormControl>
+
+          {/*Mot de passe (2)*/}
+          <FormControl mb={'1rem'} isInvalid={invalidInput}>
+            <FormLabel>Confirmation du mot de passe</FormLabel>
+            <Input
+                id="confirmPassword"
+                type="password"
+                value={registerData.confirmPassword}
+                onChange={(evt) => handleInput(
+                    {confirmPassword: evt.target.value})}
+                placeholder="Mot de passe"
+            />
+          </FormControl>
+
+
+          <Flex mt={'50px'} w={'100%'} justify={'space-between'} gap={5}>
+            <Button onClick={() => router.push('/')} w={buttonWidth}>Retour</Button>
+            <Button onClick={handleSubmit} w={buttonWidth} colorScheme="purple">Je
+              m&apos;inscris</Button>
+          </Flex>
+        </Container>
+      </Box>
+  );
+
+}