From 84b45cd6b11347e66437cd92dc20372d0abd6eb9 Mon Sep 17 00:00:00 2001
From: Joseph Ditton <jditton.atomic@gmail.com>
Date: Wed, 1 Dec 2021 20:18:26 -0700
Subject: adds roles

---
 client/app.jsx                     | 15 +++++++++++----
 client/components/admin/_admin.jsx | 21 +++++++++++++++++++++
 client/components/home/_home.jsx   | 17 ++++++++++++++---
 client/components/router.jsx       |  2 ++
 client/utils/parse_jwt.js          |  5 +++++
 client/utils/roles_context.js      |  3 +++
 6 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 client/components/admin/_admin.jsx
 create mode 100644 client/utils/parse_jwt.js
 create mode 100644 client/utils/roles_context.js

(limited to 'client')

diff --git a/client/app.jsx b/client/app.jsx
index e1e4c03..90ceb37 100644
--- a/client/app.jsx
+++ b/client/app.jsx
@@ -6,6 +6,8 @@ import { AuthContext } from './utils/auth_context';
 import { useApi } from './utils/use_api';
 import { useJwtRefresh } from './utils/use_jwt_refresh';
 import './app.css';
+import { RolesContext } from './utils/roles_context';
+import { parseJwt } from './utils/parse_jwt';
 
 export const App = () => {
   const [authToken, setAuthToken] = useState(null);
@@ -26,16 +28,21 @@ export const App = () => {
     setLoading(false);
   }, []);
 
-  // before displaying anything try getting a token using cookies,
+  const jwtPayload = parseJwt(authToken);
+  console.log(jwtPayload);
+
+  // don't display anything while trying to get user token
   // can display a loading screen here if desired
   if (loading) return null;
 
   return (
     <AuthContext.Provider value={[authToken, setAuthToken]}>
       <ApiContext.Provider value={api}>
-        <HashRouter>
-          <Router />
-        </HashRouter>
+        <RolesContext.Provider value={jwtPayload.roles}>
+          <HashRouter>
+            <Router />
+          </HashRouter>
+        </RolesContext.Provider>
       </ApiContext.Provider>
     </AuthContext.Provider>
   );
diff --git a/client/components/admin/_admin.jsx b/client/components/admin/_admin.jsx
new file mode 100644
index 0000000..aff544c
--- /dev/null
+++ b/client/components/admin/_admin.jsx
@@ -0,0 +1,21 @@
+import { useState, useContext, useEffect } from 'react';
+import { ApiContext } from '../../utils/api_context';
+
+export const Admin = () => {
+  const [users, setUsers] = useState([]);
+  const api = useContext(ApiContext);
+
+  useEffect(async () => {
+    const { users } = await api.get('/users');
+    setUsers(users);
+  }, []);
+
+  return (
+    <div className="p-4">
+      <h2 className="text-3xl">Users</h2>
+      {users.map((user) => (
+        <div>{user.name}</div>
+      ))}
+    </div>
+  );
+};
diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx
index 00a7ab3..7ec9335 100644
--- a/client/components/home/_home.jsx
+++ b/client/components/home/_home.jsx
@@ -1,10 +1,16 @@
 import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 import { ApiContext } from '../../utils/api_context';
 import { AuthContext } from '../../utils/auth_context';
+import { RolesContext } from '../../utils/roles_context';
+import { Button } from '../common/button';
 
 export const Home = () => {
   const [, setAuthToken] = useContext(AuthContext);
   const api = useContext(ApiContext);
+  const roles = useContext(RolesContext);
+
+  const navigate = useNavigate();
 
   const [loading, setLoading] = useState(true);
   const [user, setUser] = useState(null);
@@ -26,11 +32,16 @@ export const Home = () => {
   }
 
   return (
-    <div>
+    <div className="p-4">
       <h1>Welcome {user.name}</h1>
-      <button type="button" onClick={logout}>
+      <Button type="button" onClick={logout}>
         Logout
-      </button>
+      </Button>
+      {roles.includes('admin') && (
+        <Button type="button" onClick={() => navigate('/admin')}>
+          Admin
+        </Button>
+      )}
     </div>
   );
 };
diff --git a/client/components/router.jsx b/client/components/router.jsx
index ccdb83a..08bb41f 100644
--- a/client/components/router.jsx
+++ b/client/components/router.jsx
@@ -4,6 +4,7 @@ import { Home } from './home/_home';
 import { AuthContext } from '../utils/auth_context';
 import { SignIn } from './sign_in/_sign_in';
 import { SignUp } from './sign_up/_sign_up';
+import { Admin } from './admin/_admin';
 
 export const Router = () => {
   const [authToken] = useContext(AuthContext);
@@ -14,6 +15,7 @@ export const Router = () => {
         path="/"
         element={authToken ? <Home /> : <Navigate replace to="signin" />} // no token means not logged in
       />
+      <Route path="admin" element={<Admin />} />
       <Route path="signin" element={<SignIn />} />
       <Route path="signup" element={<SignUp />} />
     </Routes>
diff --git a/client/utils/parse_jwt.js b/client/utils/parse_jwt.js
new file mode 100644
index 0000000..38b4bf9
--- /dev/null
+++ b/client/utils/parse_jwt.js
@@ -0,0 +1,5 @@
+export const parseJwt = (token) => {
+  if (!token) return {};
+  const jwtPayload = JSON.parse(window.atob(token.split('.')[1]));
+  return jwtPayload;
+};
diff --git a/client/utils/roles_context.js b/client/utils/roles_context.js
new file mode 100644
index 0000000..089de6a
--- /dev/null
+++ b/client/utils/roles_context.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RolesContext = createContext({});
-- 
cgit v1.2.3-70-g09d2