Log in and Signup pages added

package.json

@@ -8,6 +8,8 @@
     "node-sass": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0"
   },
   "scripts": {

src/components/App.js

@@ -16,8 +16,8 @@ const App = () => {
         ProfilePicture: {
           Set: false,
           ProfileImage:
-            "https://cdn.nerdschalk.com/wp-content/uploads/2020/09/how-to-remove-profile-picture-on-zoom-12.png?width=150"
-        }
+            "https://cdn.nerdschalk.com/wp-content/uploads/2020/09/how-to-remove-profile-picture-on-zoom-12.png?width=150",
+        },
       },
       Experience: [],
       Education: [],
@@ -38,7 +38,7 @@ const App = () => {
   const SetSection = (Section, Content) => {
     setAppState({
       ...appState,
-      Resume: { ...appState.Resume, [Section]: Content }
+      Resume: { ...appState.Resume, [Section]: Content },
     });
   };
   const SetSwitch = () => {
@@ -50,16 +50,16 @@ const App = () => {
           ...appState.Resume.About,
           ProfilePicture: {
             ...appState.Resume.About.ProfilePicture,
-            Set: !(appState.Resume.About.ProfilePicture.Set)
-          }
-        }
-      }
-    })
+            Set: !appState.Resume.About.ProfilePicture.Set,
+          },
+        },
+      },
+    });
   };
   const ImageHandler = (e) => {
     const reader = new FileReader();
     reader.onload = () => {
-      if(reader.readyState === 2){
+      if (reader.readyState === 2) {
         setAppState({
           ...appState,
           Resume: {
@@ -68,15 +68,15 @@ const App = () => {
               ...appState.Resume.About,
               ProfilePicture: {
                 ...appState.Resume.About.ProfilePicture,
-                ProfileImage: reader.result
-              }
-            }
-          }
-        })
+                ProfileImage: reader.result,
+              },
+            },
+          },
+        });
       }
-    }
-    reader.readAsDataURL(e.target.files[0])
-  }
+    };
+    reader.readAsDataURL(e.target.files[0]);
+  };
   return (
     <div className="rezume">
       <Header

src/components/Header/Header.js

@@ -1,12 +1,13 @@
 import React from "react";
 import NavLink from "./_NavLink";
+import { Link } from "react-router-dom";
 
 const Header = ({ ChangePage, CurrentPage, Resume }) => {
   return (
     <nav className="navbar navbar-expand navbar-dark justify-content-between rezume-header">
       <span className="navbar-brand mb-0 h1 col-1">Rezume</span>
       <ul className="navbar-nav">
-        {Object.keys(Resume).map(NavItem => (
+        {Object.keys(Resume).map((NavItem) => (
           <NavLink
             Name={NavItem}
             Active={CurrentPage === NavItem}
@@ -15,6 +16,9 @@ const Header = ({ ChangePage, CurrentPage, Resume }) => {
           />
         ))}
       </ul>
+      <Link to="/login" className="btn btn-primary btn-sm col-1">
+        Login
+      </Link>
       <a
         href="https://rezyume.co/"
         target="_blank"

src/index.js

@@ -1,13 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./components/App";
-
 import "./styles/App.scss";
+import App from "./components/App.js";
+import Login from "./pages/LoginPage";
+import Signup from "./pages/SignupPage";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root"));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
+ReactDOM.render(
+  <Router>
+    <Routes>
+      <Route exact path="/" element={<App />}></Route>
+      <Route path="/login" element={<Login />}></Route>
+      <Route path="/signup" element={<Signup />}></Route>
+    </Routes>
+  </Router>,
+  document.getElementById("root")
+);
 serviceWorker.unregister();

src/pages/LoginPage/index.js

@@ -0,0 +1,58 @@
+import React from "react";
+import "./index.scss";
+import { Link } from "react-router-dom";
+
+function Login() {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [emailError, setEmailError] = React.useState("");
+  const [passwordError, setPasswordError] = React.useState("");
+
+  function handleSubmit() {
+    if (email === "") {
+      setEmailError("Required");
+    } else {
+      setEmailError("");
+    }
+    if (password === "") {
+      setPasswordError("No Password provided");
+    } else {
+      setPasswordError("");
+    }
+  }
+
+  return (
+    <div className="container">
+      <form className="loginform">
+        <h1>Log In</h1>
+        <input
+          className="inputEmail"
+          type="email"
+          placeholder="Email"
+          autocomplete="off"
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <p className="alert">{emailError}</p>
+        <input
+          className="inputPassword"
+          type="password"
+          placeholder="Password"
+          autocomplete="off"
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+        <p className="alert">{passwordError}</p>
+        <input
+          className="inputSubmit"
+          type="submit"
+          value="Login"
+          onClick={handleSubmit}
+        />
+        <Link to="/Signup">New User ?</Link>
+      </form>
+    </div>
+  );
+}
+
+export default Login;

src/pages/LoginPage/index.scss

@@ -0,0 +1,47 @@
+.loginform {
+  background-color: #003100;
+  padding: 2rem;
+  height: 400px;
+}
+.inputSubmit {
+  background-color: #0000ff;
+  color: white;
+  margin-left: 1rem;
+  border-radius: 10px;
+  width: 100px;
+  outline-width: 0;
+  margin-right: 20px;
+  margin-top: 20px;
+}
+
+.Submit-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+}
+h1 {
+  color: greenyellow;
+}
+.alert {
+  color: red;
+  text-align: left;
+  margin: 0px;
+  margin-left: 12rem;
+  padding: 0px;
+}
+.inputEmail {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+}
+.inputPassword {
+  margin-bottom: 0px;
+  border-radius: 10px;
+  outline-width: 0;
+  width: 350px;
+  padding: 0.4rem;
+  margin-top: 20px;
+}