From 18649a92f4bc70270424bb88f7c159d0476960ba Mon Sep 17 00:00:00 2001
From: Cy <cy@rosenbol.org>
Date: Sat, 15 Jul 2023 21:04:08 -0400
Subject: [PATCH] singoutbutton

---
 client/src/components/LoginForm.jsx           |  3 +-
 client/src/components/NavBar.jsx              | 22 ++++++++++----
 client/src/components/RegistrationForm.jsx    |  5 ++--
 client/src/pages/ProfilePage.jsx              | 30 +++++++++++++++----
 .../styles/components/LoginForm.module.css    |  6 ++++
 5 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/client/src/components/LoginForm.jsx b/client/src/components/LoginForm.jsx
index 54a7c16..9fbc1e5 100644
--- a/client/src/components/LoginForm.jsx
+++ b/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
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
index d9a8edd..45923f2 100644
--- a/client/src/components/NavBar.jsx
+++ b/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>
   );
diff --git a/client/src/components/RegistrationForm.jsx b/client/src/components/RegistrationForm.jsx
index ed6b802..af88324 100644
--- a/client/src/components/RegistrationForm.jsx
+++ b/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
diff --git a/client/src/pages/ProfilePage.jsx b/client/src/pages/ProfilePage.jsx
index e222454..95db101 100644
--- a/client/src/pages/ProfilePage.jsx
+++ b/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 ****
diff --git a/client/src/styles/components/LoginForm.module.css b/client/src/styles/components/LoginForm.module.css
index 898032f..c6c52bc 100644
--- a/client/src/styles/components/LoginForm.module.css
+++ b/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;