Implement login, update logo

* Implement new Login component - form, styles, functionality
- Use register css for styles
- Change .register to .accountForm
* Create Dashboard component file
* Change logo from Borum logo to Sphere logo (a sphere) and update alt accordingly

v0.2.0

Author: varunsingh87

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "borum-sphere",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The web app for Borum users to read, update, delete, and create their account and the Borum products that they're using",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.7.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",

package.json

@@ -0,0 +1,11 @@
+export default function Dashboard() {
+    return (
+        <article>
+            <h1>Borum Sphere Dashboard</h1>
+            <h2>Full Name</h2>
+
+            
+            
+        </article>
+    );
+}

public/icon.png

@@ -0,0 +1,64 @@
+import login from "../Register/register.module.css";
+import FormField from "../FormField/formField";
+import { useState } from "react";
+import LogoImage from "../LogoImage";
+
+export default function Login() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+
+	const handleLogin = e => {
+        e.preventDefault();
+        
+		fetch("https://api.bforborum.com/api/login", {
+			method: "POST",
+			headers: {
+				"content-type": "application/x-www-form-urlencoded",
+			},
+			body: `email=${email}&password=${password}`,
+		})
+			.then(response => response.json())
+			.then(response => {
+				if (response.statusCode >= 200 && response.statusCode < 300) {
+				} else {
+					alert(
+						"A system error occurred and you could not be logged in. "
+					);
+				}
+			});
+	};
+
+	return (
+		<main className={login.accountForm}>
+			<h1>Login into Borum</h1>
+            <LogoImage />
+			<form onSubmit={handleLogin} method="post" className={login.form}>
+				<FormField
+					autofocus
+					label="email"
+					format="email"
+					required
+					value={email}
+					onChange={e => setEmail(e.target.value)}
+				/>
+				<FormField
+					label="password"
+					format="password"
+					required
+					value={password}
+					onChange={e => setPassword(e.target.value)}
+				/>
+				<a
+					target="_blank"
+					rel="noreferrer"
+					href="http://forum.bforborum.com/reset_password"
+				>
+					Forgot password? Reset it
+				</a>
+				<button type="submit" className={login.card}>
+					Login
+				</button>
+			</form>
+		</main>
+	);
+}

public/logo192.png

@@ -0,0 +1,3 @@
+export default function LogoImage() {
+	return <img src="/icon.png" height="100" alt="The Borum Sphere logo" />;
+}

public/logo512.png

@@ -1,6 +1,7 @@
 import register from "./register.module.css";
 import FormField from "../FormField/formField";
 import { useState } from "react";
+import LogoImage from "../LogoImage";
 
 export default function Register() {
   const [email, setEmail] = useState("");
@@ -33,19 +34,16 @@ export default function Register() {
           setConfirmPassword("");
           setFirstName("");
           setLastName("");
-          alert("You were successfully registered! Welcome to Borum!");
+          
         } else {
           alert("A system error occurred and you could not be registered. We apologize for the inconvenience. ");
         }
       });
   };
 
   return (
-    <div className={register.register}>
-      <img
-        src="/icon.png"
-        alt="The Borum Logo, a B inside a black-bordered, white rectangle"
-      />
+    <div className={register.accountForm}>
+      <LogoImage />
       <h1>Register for Borum</h1>
       <form onSubmit={handleRegister} method="post" className={register.form}>
         <FormField
@@ -86,13 +84,7 @@ export default function Register() {
           format="password"
           label="Confirm Password"
         />
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="http://forum.bforborum.com/reset_password"
-        >
-          Forgot password? Reset it
-        </a>
+        
         <button type="submit" className={register.card}>
           Register
         </button>

src/Dashboard/dashboard.js

@@ -42,17 +42,21 @@
     Bitstream Vera Sans Mono, Courier New, monospace;
 }
 
-.register {
+.accountForm {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   max-width: 500px;
   width: 90%;
   margin-top: 2rem;
+  border: 1px solid gainsboro;
+  padding: 1em;
+  width: 100%;
+  text-align: center;  
 }
 
-.register h1 {
+.accountForm h1 {
   font-weight: normal;
   font-size: 1.5rem;
 }
@@ -122,10 +126,3 @@
   font-size: 16px;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
-
-.register {
-  border: 1px solid gainsboro;
-  padding: 1em;
-  width: 100%;
-  text-align: center;
-}