Update login component (team-hack#29)

src/App.tsx

@@ -35,7 +35,6 @@ const App = (): JSX.Element => {
                   </PrivateRoute>
                 </Route>
                 <Route exact path="/login">
-                  <Page title="Login" content="This is the login page" />
                   <Login />
                 </Route>
                 <Route exact path="/signup">

src/components/Login/Login.css

@@ -0,0 +1,51 @@
+.login-page {
+  display: flex;
+  flex-direction: row;
+  height: calc( 100vh - 70px );
+  width: 100%;
+  background: white;
+}
+
+.side-image {
+  width: 50%;
+  height: 100%;
+  background: #c4c4c4;
+}
+
+.login-section {
+  margin: 0;
+  height: 100%;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1em;
+}
+
+.login-form-button {
+  width: 10em;
+  border: none;
+  background: #c4c4c4;
+  padding: 0.5em 0.5em;
+  cursor: pointer;
+}
+
+.login-form-button:hover {
+  background: #444444;
+  color: white;
+  font-weight: bold;
+}
+
+.login-form-input {
+  border-radius: 0;
+  border: 1px solid black;
+  padding: 0.5em;
+}

src/components/Login/Login.tsx

@@ -1,9 +1,57 @@
-import React from "react";
-import { LoginMain } from "./LoginStyled"
+import React, {
+  ChangeEvent,
+  FormEvent,
+  useState
+} from "react";
+
+import { useAuth } from "../../context/AuthProvider";
+import type User from "../../types/User";
+import './Login.css'
+
+import {
+  LoginForm,
+  LoginBtn,
+  LoginInput
+} from './LoginStyled'
+
+const Login = () => {
+  const formState: User = {
+    email: '',
+    password: ''
+  };
+
+  const [form, setForm] = useState(formState);
+  const auth = useAuth();
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setForm( prevState => ({
+      ...prevState,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    auth.login( form );
+  };
 
-const Login = ( ): JSX.Element => {
   return (
-    <LoginMain>THIS IS A TEST</LoginMain>
+    <main className="login-page">
+      <aside className="side-image">some content goes here</aside>
+      <section className="login-section">
+        <h1>Login</h1>
+        <div className="login-container">
+          <LoginForm onSubmit={handleSubmit}>
+            <label htmlFor="email">Email</label> 
+            <LoginInput id="email" type="email" name="email" onChange={handleChange}/>
+            <label htmlFor="password">Password</label>
+            <LoginInput id="password" name="password" type="password" onChange={handleChange}/>
+            <LoginBtn type="submit">Login</LoginBtn>
+          </LoginForm>
+        </div>
+      </section>
+    </main>
   );
 };
 

src/components/Login/LoginStyled.tsx

@@ -1,8 +1,30 @@
 import React from 'react';
 import styled from "styled-components";
 
+export const LoginForm = styled.form`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1em;
+`;
 
-export const LoginMain = styled.h1`
-background-color:blue;
+export const LoginBtn = styled.button`
+  width: 10em;
+  border: none;
+  background: #c4c4c4;
+  padding: 0.5em 0.5em;
+  cursor: pointer;
+  &:hover {
+    background: #444444;
+    color: white;
+    font-weight: bold;
+  }
+`;
 
+export const LoginInput = styled.input`
+  border-radius: 0;
+  border: 1px solid black;
+  padding: 0.5em;
 `;
+