Merge pull request #56 from Boyadjie/auth/feat/register/succes

feat(#45): add login page (main)

app/login/login.module.css

@@ -0,0 +1,7 @@
+.container {
+  padding: 0 2rem;
+  p {
+    font-size: 14px;
+    color: #1b1b2e;
+  }
+}

app/login/page.tsx

@@ -1,9 +1,23 @@
+'use client';
+import ConnectionWith from '../../src/components/authentication/ConnectionWith';
 import {LoginForm} from '../../src/components/authentication/LoginForm';
+import LoginIllustration from '../../src/components/authentication/LoginIllustration';
+import TextAndRoute from '../../src/components/authentication/TextAndRoute';
+import Title from '../../src/components/authentication/Title';
+import styles from './login.module.css';
 
 export default function register() {
   return (
-    <div>
+    <div className={styles.container}>
+      <Title iconUrl="icons/user.svg" text="LOGIN" />
+      <LoginIllustration />
       <LoginForm />
+      <ConnectionWith />
+      <TextAndRoute
+        text="Don't have an account?"
+        route="/register"
+        routeText="Register"
+      />
     </div>
   );
 }

src/components/authentication/LoginForm.tsx

@@ -8,6 +8,7 @@ import {useRouter} from 'next/navigation';
 
 import {auth} from '../../firebase';
 import {Input} from './Inputs/InputManager';
+import styles from './styles/loginForm.module.css';
 
 type FormValues = {
   email: string;
@@ -52,38 +53,37 @@ export const LoginForm: React.FC = () => {
   };
 
   return (
-    <div>
-      <div>
-        <h1>Login</h1>
-      </div>
-
-      <form onSubmit={handleSubmit}>
-        <div>
-          <Input
-            required={true}
-            type="email"
-            name="email"
-            placeholder="Mail address"
-            value={formValues.email}
-            onChange={handleInputChange}
-          />
-        </div>
-        <div>
+    <div className={styles.container}>
+      <form onSubmit={handleSubmit} className={styles.formContainer}>
+        <Input
+          required={true}
+          type="email"
+          name="email"
+          placeholder="Mail address"
+          value={formValues.email}
+          onChange={handleInputChange}
+          startIconUrl="icons/mail.svg"
+        />
+        <div className={styles.gluedChilds}>
           <Input
             type="password"
             name="password"
             value={formValues.password}
             placeholder="Password"
             onChange={handleInputChange}
+            startIconUrl="icons/lock.svg"
+            endIconUrl={['icons/eye.svg', 'icons/eye-slash.svg']}
           />
-        </div>
-        <div>
-          <Link href="/forgotpassword">Forgot Password?</Link>
+          <Link className={styles.forgotPassword} href="/forgotpassword">
+            Forgot Password?
+          </Link>
         </div>
         <div id="formError">
           {responseErr ? 'Email or Password Invalid' : ''}
         </div>
-        <button type="submit">Submit</button>
+        <button className={styles.submitButton} type="submit">
+          Login
+        </button>
       </form>
     </div>
   );

src/components/authentication/LoginIllustration.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import styles from './styles/LoginIllustration.module.css';
+
+const LoginIllustration = () => {
+  return (
+    <div className={styles.container}>
+      <Image
+        src="/illustrations/auth/character.svg"
+        alt="login illustration"
+        width={245}
+        height={213}
+        className={styles.character}
+      />
+      <Image
+        src="/illustrations/auth/orangeBase.svg"
+        alt="login illustration"
+        width={320}
+        height={33}
+        className={styles.base}
+      />
+    </div>
+  );
+};
+
+export default LoginIllustration;

src/components/authentication/styles/LoginIllustration.module.css

@@ -0,0 +1,42 @@
+.container {
+  margin: 1rem 0 0 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .character {
+    position: relative;
+    z-index: 1;
+    animation: fade-in 0.5s ease;
+  }
+
+  .base {
+    position: relative;
+    top: -34px;
+    z-index: 0;
+    animation: slide-in 0.6s ease;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/components/authentication/styles/loginForm.module.css

@@ -0,0 +1,43 @@
+.formContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+  padding: 1rem 0;
+
+  .gluedChilds {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+}
+
+.submitButton {
+  display: flex;
+  width: 280px;
+  height: 40px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: #ff8a44 solid 1px;
+  border-radius: 268.657px;
+  background: var(--Primary-Colors-Highlight-color, #ff8a44);
+  color: white;
+  font-size: 14px;
+}
+.submitButton:active {
+  background: white;
+  color: #ff8a44;
+}
+
+.forgotPassword {
+  margin: 0;
+  padding: 0;
+  text-decoration: underline;
+  width: 100%;
+  font-size: 14px;
+  color: grey;
+  text-align: end;
+}

src/components/authentication/styles/textAndRoute.module.css

@@ -4,8 +4,11 @@
   flex-direction: row;
   justify-content: center;
   width: 100%;
+  opacity: 0.6;
+  color: #1b1b2e;
 
   button {
+    opacity: 1;
     border: none;
     background: none;
   }