Make header buttons dynamic

6 files changed, 71 insertions, 42 deletions

diff --git a/src/App.css b/src/App.css
index 475d50a..3b3879c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -9,3 +9,12 @@
   align-items: center;
   justify-content: space-between;
 }
+
+.App > header h1 {
+  font-weight: 500;
+}
+
+.App > header a {
+  color: #000;
+  text-decoration: none;
+}
diff --git a/src/App.js b/src/App.js
index 44045ab..db67184 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,33 +6,57 @@ import Records from "./routes/Records";
 import SignUp from "./routes/SignUp.js";
 import Login from "./routes/Login";
 import Button from "./uikit/Button";
+import { Link } from "react-router-dom";
+import { useAuth } from "./hooks/useAuth";
 
+function ButtonRow() {
+  let auth = useAuth();
+
+    return <div style={{ display: "flex" }}>
+      { auth.isAuthenticated() ? <><Button
+        className="LoginButton"
+        primary
+        onClick={() => (document.location = "/zones")}
+      >
+        Zones
+      </Button>
+      <Button
+        className="LoginButton"
+        secondary
+        onClick={() => auth.signout(() => {})}
+      >
+        Log Out
+      </Button>
+   </> : <>
+      <Button
+        className="LoginButton"
+        primary
+        onClick={() => (document.location = "/login")}
+      >
+        Login
+      </Button>
+      <Button
+        className="LoginButton"
+        secondary
+        onClick={() => (document.location = "/signup")}
+      >
+        Sign Up
+      </Button>
+      </>}
+    </div>;
+}
 function App() {
   return (
     <div className="App">
-      <header>
-        <h1>
-          HOSTS<b>dot</b>TXT
-        </h1>
-
-        <div style={{ display: "flex" }}>
-          <Button
-            className="LoginButton"
-            primary
-            onClick={() => (document.location = "/login")}
-          >
-            Login
-          </Button>
-          <Button
-            className="LoginButton"
-            secondary
-            onClick={() => (document.location = "/signup")}
-          >
-            Sign Up
-          </Button>
-        </div>
-      </header>
       <BrowserRouter>
+        <header>
+          <Link to="/">
+            <h1>
+              HOSTS<b>dot</b>TXT
+            </h1>
+          </Link>
+          <ButtonRow />
+        </header>
         <Routes>
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<SignUp />} />
diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
index aad8edf..5685909 100644
--- a/src/hooks/useAuth.js
+++ b/src/hooks/useAuth.js
@@ -19,7 +19,11 @@ export function AuthProvider({ children }) {
     callback();
   };
 
-  let value = { token, signin, signout };
+  let isAuthenticated = () => {
+    return token != null && !isExpired(token);
+  };
+
+  let value = { token, signin, signout, isAuthenticated };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
diff --git a/src/routes/Home.js b/src/routes/Home.js
index b602c25..32d1766 100644
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -11,9 +11,6 @@ export default function Home() {
 
   return (
     <div>
-      <Button primary onClick={() => (document.location = "/zones")}>
-        Zones
-      </Button>
       <div>
         {metrics != null && (
           <p>
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 9125f7d..9ae8d84 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -5,7 +5,6 @@ import Button from "../uikit/Button.js";
 import Input from "../uikit/Input.js";
 import { useAuth } from "../hooks/useAuth";
 import { useFeatures } from "../hooks/useFeatures";
-import { isExpired } from "react-jwt";
 import { styled } from "@stitches/react";
 import { debounce } from "lodash";
 import { Link } from "react-router-dom";
@@ -64,10 +63,10 @@ function Login(props) {
   let from = location.state?.from?.pathname || "/zones";
 
   useEffect(() => {
-    if (auth.token && !isExpired(auth.token)) {
+    if (auth.isAuthenticated()) {
       navigate(from, { replace: true });
     }
-  }, [auth.token, from, navigate]);
+  }, [auth, from, navigate]);
 
   const handleSubmit = () => {
     fetch("/api/v1/users/login", {
@@ -115,7 +114,6 @@ function Login(props) {
 
   return (
     <Flex>
-      <Title>HOSTSdotTXT</Title>
       <LoginCard>
         <Subtitle>Log In</Subtitle>
         <StyledLabel htmlFor="email">Email</StyledLabel>
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 5b64cc0..8cd02d8 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -7,7 +7,6 @@ import { useAuth } from "../hooks/useAuth.js";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useFeatures } from "../hooks/useFeatures.js";
 import { Link } from "react-router-dom";
-import { isExpired } from "react-jwt";
 
 const Flex = styled("div", {
   display: "flex",
@@ -59,6 +58,15 @@ export function SignUp() {
   const auth = useAuth();
   const features = useFeatures();
   const navigate = useNavigate();
+  let location = useLocation();
+
+  let from = location.state?.from?.pathname || "/zones";
+
+  useEffect(() => {
+    if (auth.isAuthenticated()) {
+      navigate(from, { replace: true });
+    }
+  }, [auth.token, from, navigate]);
 
   const checkPasswordsMatch = debounce((e) => {
     const password = document.getElementById("password").value;
@@ -118,20 +126,9 @@ export function SignUp() {
     });
   };
 
-  let location = useLocation();
-
-  let from = location.state?.from?.pathname || "/zones";
-
-  useEffect(() => {
-    if (auth.token && !isExpired(auth.token)) {
-      navigate(from, { replace: true });
-    }
-  }, [auth.token, from, navigate]);
-
   if (!features.signup) {
     return (
       <Flex>
-        <Title>HOSTSdotTXT</Title>
         <LoginCard>
           <Subtitle>Sign Up</Subtitle>
           <center>