Implement dashboard

* Implement reactExtensions service - module containing one method, setFormElement
- Function composition method for easily setting states with event handlers
* Implement ChangePassword component
* Implement FullName component
* Implement Email component
* Implement inlineFormElements CSS module
* Add above components to dashboard
* Update copyright to 2021

Author: varunsingh87

src/ChangePassword/changePassword.js

@@ -0,0 +1,43 @@
+import FormField from "../FormField/formField";
+import { useState } from "react";
+import changePassword from "../Register/register.module.css";
+import { setFormElement } from "../reactExtensions";
+
+export default function ChangePassword(props) {
+    const [currentPassword, setCurrentPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [confirmNewPassword, setConfirmNewPassword] = useState("");
+
+	return (
+		<form className={changePassword.form}>
+			<FormField
+				labelContent="Current Password"
+				label="currpass"
+				format="password"
+				required
+				value={currentPassword}
+				onChange={setFormElement(setCurrentPassword)}
+			/>
+			<FormField
+				labelContent="New Password"
+				label="newpass"
+				format="password"
+				required
+				value={newPassword}
+				onChange={setFormElement(setNewPassword)}
+			/>
+			<FormField
+				labelContent="Confirm New Password"
+				label="confnewpass"
+				format="password"
+				required
+				value={confirmNewPassword}
+				onChange={setFormElement(setConfirmNewPassword)}
+			/>
+
+			<button type="submit" className={changePassword.card}>
+				Change my Password
+			</button>
+		</form>
+	);
+}

src/Dashboard/dashboard.js

@@ -1,11 +1,16 @@
-export default function Dashboard() {
-    return (
-        <article>
-            <h1>Borum Sphere Dashboard</h1>
-            <h2>Full Name</h2>
+import ChangePassword from "../ChangePassword/changePassword";
+import FullName from "../InlineFormElements/FullName/fullName";
+import Email from "../InlineFormElements/Email/email";
+import dashboard from "./dashboard.module.css";
 
-            
-            
-        </article>
-    );
-}
+export default function Dashboard() {
+	return (
+		<article>
+			<h1>Borum Sphere Dashboard</h1>
+			<FullName />
+			<Email />
+			<ChangePassword />
+			<button className={dashboard.signOut}>Sign out of all accounts</button>
+		</article>
+	);
+}

src/Dashboard/dashboard.module.css

@@ -0,0 +1,14 @@
+.signOut {
+    font-size: 2em;
+    margin-bottom: 1em;
+    background: white;
+    border: 1px solid blue;
+    padding: 1em;
+    border-radius: 25px;
+}
+
+.signOut:hover {
+    color: red;
+    cursor: pointer;
+    border: 1px solid red;
+}

src/FormField/formField.js

@@ -1,30 +1,30 @@
 import formField from "./formField.module.css";
 
 export default function FormField({
-  autofocus = false,
-  label,
-  format = "text",
-  required = false,
-  value = "",
-  onChange = () => {},
+	autofocus = false,
+	label,
+	labelContent = () =>
+		label[0].toUpperCase() + label.substring(1).toLowerCase(),
+	format = "text",
+	required = false,
+	value = "",
+	onChange = () => {},
 }) {
-  return (
-    <fieldset>
-      <legend>
-        <label htmlFor={label}>
-          {label[0].toUpperCase() + label.substring(1).toLowerCase()}
-        </label>
-      </legend>
-      <input
-        className={formField.field}
-        required={required}
-        autoFocus={autofocus}
-        type={format}
-        id={label}
-        name={label}
-        value={value}
-        onChange={onChange}
-      />
-    </fieldset>
-  );
+	return (
+		<fieldset>
+			<legend>
+				<label htmlFor={label}>{labelContent}</label>
+			</legend>
+			<input
+				className={formField.field}
+				required={required}
+				autoFocus={autofocus}
+				type={format}
+				id={label}
+				name={label}
+				value={value}
+				onChange={onChange}
+			/>
+		</fieldset>
+	);
 }

src/InlineFormElements/Email/email.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { setFormElement } from "../../reactExtensions";
+import inlineFormElements from "../inlineFormElements.module.css";
+
+export default function Email(props) {
+	const [email, setEmail] = useState(sessionStorage.getItem("email"));
+
+	const onEmailSaveClick = e => {
+		fetch("https://api.bforborum.com/api/login", {
+			method: "PUT",
+			body: `email=${email}`,
+		});
+	};
+
+	return (
+		<div className={inlineFormElements.inlineFormElement}>
+			<label>Email</label>
+			<p contentEditable="true" onChange={setFormElement(setEmail)}>{email}</p>
+            <button onClick={onEmailSaveClick}>Save</button>
+		</div>
+	);
+}

src/InlineFormElements/FullName/fullName.js

@@ -0,0 +1,38 @@
+import inlineFormElements from "../inlineFormElements.module.css";
+
+export default function FullName(props) {
+	const firstName = sessionStorage.getItem("firstName") ?? "";
+	const lastName = sessionStorage.getItem("lastName") ?? "";
+	const fullName = firstName + " " + lastName;
+
+	const saveNewName = () => {
+		fetch("https://api.bforborum.com/api/login", {
+			method: "PUT",
+			headers: {
+				authorization: `Basic ${sessionStorage.getItem("apiKey")}`,
+				"content-type": "application/x-www-form-urlencoded",
+			},
+			body: `firstName=${firstName}&lastName=${lastName}`,
+		})
+			.then(response => response.json())
+			.then(response => {
+				if (
+					response.statusCode < 200 ||
+					response.statusCode >= 300 ||
+					!response.ok
+				) {
+					alert(
+						"Your first name and last name could not be updated because of a system error"
+					);
+				}
+			});
+	};
+
+	return (
+		<div className={inlineFormElements.inlineFormElement}>
+			<label>Full Name</label>
+            <h2 contentEditable="true" suppressContentEditableWarning="true">{fullName}</h2>
+			<button onClick={saveNewName}>Save</button>
+		</div>
+	);
+}

src/InlineFormElements/inlineFormElements.module.css

@@ -0,0 +1,19 @@
+.inlineFormElement {
+    display: flex;
+    align-items: center;
+}
+
+.inlineFormElement label {
+    width: 100px;
+    text-align: left;
+}
+
+.inlineFormElement [contentEditable="true"] {
+    width: 500px;
+}
+
+.inlineFormElement button {
+    background: none;
+    border: none;
+    color: rgb(0, 255, 13);
+}

src/Layout/layout.js

@@ -15,7 +15,7 @@ export default function Layout(props) {
           Powered by{" "}
           <img src="/vercel.svg" alt="Vercel Logo" className={layout.logo} />
         </a>
-        <p>&copy; 2020 Borum Tech</p>
+        <p>&copy; 2021 Borum Tech</p>
         <ul className={layout.legalLinks}>
           {/* <li className={layout.privacyPolicy}>
             <Link href="/legal/PrivacyPolicy">

src/reactExtensions.js

@@ -0,0 +1,5 @@
+const setFormElement = setter => {
+	return event => setter(event.currentTarget.value);
+};
+
+export { setFormElement };