Merge pull request #36 from bliutech/test

signout button

client/src/components/LoginForm.jsx

@@ -3,6 +3,7 @@ import styles from "../styles/components/LoginForm.module.css";
 import { useState } from "react";
 import { useCookies } from "react-cookie";
 import { getUser } from "../api/user";
+import { useContext } from "react";
 
 function Login() {
   document.title = "Login";
@@ -63,7 +64,7 @@ function Login() {
           placeholder="Show Password"
           onClick={() => handleToggle()}
         ></input>
-        <text id={styles.regis}> Show password?</text>
+        <text id={styles.regis}> Show password</text>
       </span>
       <p></p>
       <input

client/src/components/NavBar.jsx

@@ -1,8 +1,12 @@
 import { Link } from "react-router-dom";
 import React from "react";
 import styles from "../styles/components/NavBar.module.css";
+import { useCookies } from "react-cookie";
 
 function NavBar() {
+  const [cookies, setCookie, removeCookie] = useCookies("");
+  const auth = cookies.name > 0;
+
   return (
     <div id={styles.navBar}>
       <div id={styles.bar}>
@@ -27,11 +31,19 @@ function NavBar() {
             Profile
           </Link>
         </li>
-        <li>
-          <Link id={styles.navLink} to="/login">
-            <text className={styles.regis}>Login/Register</text>
-          </Link>
-        </li>
+        {auth ? (
+          <li>
+            <Link id={styles.navLink} to="/login">
+              <text> Sign out</text>
+            </Link>
+          </li>
+        ) : (
+          <li>
+            <Link id={styles.navLink} to="/login">
+              <text className={styles.regis}>Login/Register</text>
+            </Link>
+          </li>
+        )}
       </div>
     </div>
   );

client/src/components/RegistrationForm.jsx

@@ -5,12 +5,11 @@ import { useCookies } from "react-cookie";
 import "../styles/index.css";
 import styles from "../styles/components/RegistrationForm.module.css";
 import { createUser, getUser } from "../api/user";
-import { useState, createContext, useContext } from "react";
+import { useState } from "react";
 
 function Registration() {
   document.title = "Registration";
 
-  const UserContext = createContext();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [cookies, setCookie, removeCookie] = useCookies("");
@@ -70,7 +69,7 @@ function Registration() {
           placeholder="Show Password"
           onClick={() => handleToggle()}
         ></input>
-        <text id={styles.regis}> Show password?</text>
+        <text id={styles.regis}> Show password</text>
       </span>
       <p></p>
       <input

client/src/pages/ProfilePage.jsx

@@ -1,17 +1,35 @@
 import { useState } from "react";
 import { useCookies } from "react-cookie";
+import { Link } from "react-router-dom";
+import styles from "../styles/components/LoginForm.module.css";
+import { useNavigate } from "react-router-dom";
+import React from "react";
 
 function ProfilePage() {
+  const navigate = useNavigate();
   document.title = "Account";
   const [cookies, setCookie, removeCookie] = useCookies("");
-  const [auth, setAuth] = useState(false);
-  // if (true) {
-  //     setCookie("name", "cy");
-  // }
 
-  return <p></p>;
+  function handleSignout() {
+    removeCookie("name");
+    navigate("/");
+  }
+
+  return (
+    <div>
+      <p>{cookies.name}'s account</p>
+      <li>
+        <input
+          type="button"
+          id={styles.button}
+          placeholder="Signout"
+          onClick={() => handleSignout()}
+        ></input>
+      </li>
+    </div>
+  );
 }
 
 export default ProfilePage;
 
-// **** PLEASE ADD A BUTTON TO SIGN UP ****
+// **** button needs prettyification ****

client/src/styles/components/LoginForm.module.css

@@ -49,6 +49,12 @@
     cursor: pointer;
 }
 
+#button {
+    font-size: 20px;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 :root {
     /* generic */
     --gutterSm: 0.4rem;