Merge pull request #10 from oslabs-beta/fixing_login_freeze

Finishing touches on login, signup, and profile

Author: astholden

app/components/Login.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useState, useCallback } from 'react';
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { DashboardContext } from '../context/DashboardContext';
 
@@ -7,14 +8,15 @@ const { ipcRenderer } = window.require('electron');
 const Login = React.memo(() => {
   const history = useHistory();
   const { updateLandingPage, setAuth, setUser } = useContext(DashboardContext);
-  const [, setState] = useState<{}>();
+  const [failedAuth, setFailedAuthState] = useState<JSX.Element>(<></>);
 
-  const forceUpdate = useCallback(() => setState({}), []);
   const handleSubmit = (e: any) => {
     e.preventDefault();
     const inputFields = e.currentTarget.querySelectorAll('input');
     const email = inputFields[0].value;
     const password = inputFields[1].value;
+    // eslint-disable-next-line no-return-assign
+    inputFields.forEach(input => (input.value = ''));
     const validLogin:
       | boolean
       | string
@@ -30,7 +32,7 @@ const Login = React.memo(() => {
       setAuth(true);
       history.push('/applications');
     } else if (validLogin === 'awaitingApproval') history.push('/awaitingApproval');
-    else forceUpdate();
+    else setFailedAuthState(<p>Sorry your authentication failed please try again.</p>);
   };
 
   return (
@@ -39,13 +41,13 @@ const Login = React.memo(() => {
         <h1>Welcome to Chronos!</h1>
         <h2>Please enter your credentials to login.</h2>
         <form className="form" onSubmit={handleSubmit}>
-          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
           <label className="email">
             <input type="email" name="email" id="email" placeholder="[email protected]" />
           </label>
           <label className="password">
             <input type="password" name="password" id="password" placeholder="enter password" />
           </label>
+          {failedAuth}
           <button className="link" id="submitBtn" type="submit">
             Login
           </button>

app/components/Occupied.tsx

@@ -30,7 +30,7 @@ import PersonIcon from '@material-ui/icons/Person';
 import UpdateIcon from '@material-ui/icons/Update';
 // MODALS
 import AddModal from '../modals/AddModal';
-import AddsModal from '../modals/AddsModal';
+import ProfileContainer from '../containers/ProfileContainer';
 import ServicesModal from '../modals/ServicesModal';
 import Search from '../components/icons/Search';
 
@@ -324,7 +324,7 @@ const Occupied = React.memo(() => {
           </Modal>
 
           <Modal open={addsOpen} onClose={() => setAddsOpen(false)}>
-            <AddsModal setOpen={setAddsOpen} />
+            <ProfileContainer setOpen={setAddsOpen} />
           </Modal>
 
           <Modal open={open} onClose={() => setOpen(false)}>

app/components/SignUp.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react';
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/Home.scss';
@@ -8,13 +9,16 @@ const { ipcRenderer } = window.require('electron');
 const SignUp = React.memo(() => {
   const history = useHistory();
   const { updateLandingPage, setAuth, setUser } = useContext(DashboardContext);
+  const [failedSignUp, setFailedSignUp] = useState<JSX.Element>(<></>);
 
   const handleSubmit = (e: any) => {
     e.preventDefault();
     const inputFields = e.currentTarget.querySelectorAll('input');
     const username = inputFields[0].value;
     const email = inputFields[1].value;
     const password = inputFields[2].value;
+    // eslint-disable-next-line no-return-assign
+    inputFields.forEach(input => (input.value = ''));
 
     const validSignUp:
       | boolean
@@ -30,7 +34,8 @@ const SignUp = React.memo(() => {
       setAuth(true);
       history.push('/applications');
     } else if (validSignUp) history.push('/awaitingApproval');
-    else window.alert('Sorry your sign up cannot be completed at this time. Please try again.');
+    else
+      setFailedSignUp(<p>Sorry your sign up failed. Please try a different email and password.</p>);
   };
 
   return (
@@ -50,7 +55,7 @@ const SignUp = React.memo(() => {
           <label className="password">
             <input type="password" name="password" id="password" placeholder="enter password" />
           </label>
-
+          {failedSignUp}
           <button className="link" id="submitBtn" type="submit">
             Sign Up
           </button>

app/containers/ProfileContainer.tsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import AddsModal from '../modals/AddsModal';
+import SetAuth from '../modals/SetAuth';
+import { DashboardContext } from '../context/DashboardContext';
+
+interface Props {
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ProfileContainer: React.FC<Props> = React.memo(({ setOpen }) => {
+  const { landingPage } = useContext(DashboardContext);
+
+  if (landingPage === 'dashBoard') return <SetAuth setOpen={setOpen} />;
+  return <AddsModal setOpen={setOpen} />;
+});
+
+export default ProfileContainer;

app/modals/AddsModal.tsx

@@ -32,7 +32,7 @@ const AddsModal: React.FC<AddsModalProps> = React.memo(({ setOpen }) => {
     const listItems: Array<JSX.Element> = [];
     for (const pleb in usersObj) {
       listItems.push(
-        <li>
+        <li key={pleb}>
           <span>
             <div>
               <span className="label">Email:</span> {usersObj[pleb].email}{' '}

app/modals/SetAuth.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+import { DashboardContext } from '../context/DashboardContext';
+
+interface Props {
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const SetAuthModal: React.FC<Props> = React.memo(({ setOpen }) => {
+  const { updateLandingPage } = useContext(DashboardContext);
+  const handleClick = () => {
+    updateLandingPage('createAdmin');
+    location.replace('/');
+  };
+
+  return (
+    <div className="add-container">
+      <div className="add-header">
+        <div>
+          <h2>Welcome Back</h2>
+        </div>
+        <form onSubmit={e => e.preventDefault()}>
+          <br />
+          <div />
+          <button onClick={() => setOpen(false)}>Cancel</button>
+          <br />
+          <button className="link" onClick={handleClick}>
+            Add Authentication
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+});
+
+export default SetAuthModal;

settings.json

@@ -1 +1 @@
-{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true,"landingPage":"login"}
+{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true}

tsconfig.json

@@ -9,7 +9,7 @@
     "sourceMap": true,
     "module": "commonjs",
     "allowJs": true,
-    "target": "es6",
+    "target": "es2019",
     "jsx": "react",
     "esModuleInterop": true,
     "resolveJsonModule": true,