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,8 +41,8 @@ export default function LoginForm() {
           <Heading textAlign={'center'} size={'2xl'}>Connexion</Heading>
 
           {/* Email */}
-          <FormControl mt={'100px'} isInvalid={invalidInput}>
-            <Box mb={'1rem'}>
+          <FormControl mb={'1rem'} mt={'100px'} isInvalid={invalidInput}>
+
             <FormLabel>Adresse email</FormLabel>
             <Input
                 isInvalid={invalidInput}
@@ -55,10 +53,11 @@ export default function LoginForm() {
                 placeholder={'adresse@email.com'}
                 required={true}
             />
-            </Box>
+          </FormControl>
 
-            {/* Mot de passe */}
-            <Box mb={'1rem'}>
+          {/* Mot de passe */
+          }
+          <FormControl mb={'1rem'}>
               <FormLabel>Mot de passe</FormLabel>
               <Input
                   isInvalid={invalidInput}
@@ -69,9 +68,10 @@ export default function LoginForm() {
                   placeholder={'Mot de passe'}
                   required={true}
               />
-            </Box>
+          </FormControl>
 
-            {/*Boutons*/}
+          {/*Boutons*/
+          }
           <Flex justify={'center'} mt={'50px'} gap={5}
                 justifyContent={'space-between'}>
             <Button onClick={() => router.push('/')}
@@ -79,9 +79,8 @@ export default function LoginForm() {
             <Button onClick={handleSubmit}
                     w={buttonWidth} colorScheme="purple">Connexion</Button>
           </Flex>
-
-          </FormControl>
       </Container>
-      </Box>
-  );
+</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>
+  );
+
+}

src/models/form/RegisterData.ts

@@ -0,0 +1,10 @@
+export class RegisterData {
+
+  constructor(
+      public firstName: string = "",
+      public lastName: string = "",
+      public email: string = "",
+      public password: string = "",
+      public confirmPassword: string = "",
+  ) {}
+}

src/pages/register.tsx

@@ -12,149 +12,17 @@ import {
 } from '@chakra-ui/react';
 import {useRouter} from 'next/router';
 import {useForm} from 'react-hook-form';
-
-type FormValues = {
-  firstName: string
-  lastName: string
-  email: string
-  password: string
-  confirmPassword: string
-}
+import RegisterForm from '@/components/form/RegisterForm';
 
 export default function Register() {
-  const {
-    handleSubmit,
-    register,
-    formState: {errors, isSubmitting},
-  } = useForm();
-
-  const router = useRouter();
-
-  const redirect_home = () => {
-    router.push('/');
-  };
-
-  const onRegister = async (values: FormValues) => {
-    // Verify password
-    if (values.password !== values.confirmPassword) {
-      alert('Les mots de passe ne correspondent pas');
-      return;
-    }
-
-    // Create User
-    fetch('/api/user/', {
-      method: 'PUT',
-      headers: {'Content-Type': 'application/json'},
-      body: JSON.stringify(values),
-    }).then(res => res.json()).then(data => {
-      if (data.error) throw new Error();
-      alert('Inscription réussie');
-      router.push('/');
-    }).catch(err => console.error(err));
-  };
-
-  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}>
-              <FormControl>
-                <FormLabel>Prénom</FormLabel>
-                <Input
-                  id="firstName"
-                  type="text"
-                  placeholder="Prénom"
-                  {...register('firstName', {
-                    required: 'This is required',
-                  })}
-                />
-              </FormControl>
-              <FormControl>
-                <FormLabel>Nom</FormLabel>
-                <Input
-                  id="lastName"
-                  type="text"
-                  placeholder="Nom"
-                  {...register('lastName', {
-                    required: 'This is required',
-                  })}
-                />
-              </FormControl>
-            </Flex>
-            <FormControl mb={'1rem'}>
-              <FormLabel>Adresse email</FormLabel>
-              <Input
-                id="email"
-                type="email"
-                placeholder="Adresse@email.com"
-                {...register('email', {
-                  required: 'This is required',
-                })}
-              />
-            </FormControl>
-            <FormControl mb={'1rem'}>
-              <FormLabel>Mot de passe</FormLabel>
-              <Input
-                id="password"
-                type="password"
-                placeholder="Mot de passe"
-                {...register('password', {
-                  required: 'This is required',
-                })}
-              />
-            </FormControl>
-            {/* Il y a une margin en trop mais je me suis dit que c'etais mieux d'avoir plus d'expace entre les deux */}
-            <FormControl mb={'1rem'}>
-              <FormLabel>Confirmation du mot de passe</FormLabel>
-              <Input
-                id="confirmPassword"
-                type="password"
-                placeholder="Mot de passe"
-                {...register('confirmPassword', {
-                  required: 'This is required',
-                })}
-              />
-            </FormControl>
-
-            <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&apos;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 gap={10} h={'100vh'} alignItems={'center'}>
+          <Box display={{base: 'none', md: 'block'}} h={'100%'}
+               flexBasis={'100%'} bgImage={'/couple_holding_hands.png'}
+               bgPos={'center'} bgSize={'cover'}/>
+          <RegisterForm/>
         </Flex>
       </Box>
   );