summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorJoseph Ditton <jditton.atomic@gmail.com>2021-12-01 20:18:26 -0700
committerJoseph Ditton <jditton.atomic@gmail.com>2021-12-01 20:18:26 -0700
commit84b45cd6b11347e66437cd92dc20372d0abd6eb9 (patch)
tree6e42b5861278485c67159dc57c225983e3fd69f8 /client
parentd803aaaf1be441f55fe674c3b0c6793e77a9203f (diff)
downloadlocchat-84b45cd6b11347e66437cd92dc20372d0abd6eb9.tar.gz
locchat-84b45cd6b11347e66437cd92dc20372d0abd6eb9.zip
adds roles
Diffstat (limited to 'client')
-rw-r--r--client/app.jsx15
-rw-r--r--client/components/admin/_admin.jsx21
-rw-r--r--client/components/home/_home.jsx17
-rw-r--r--client/components/router.jsx2
-rw-r--r--client/utils/parse_jwt.js5
-rw-r--r--client/utils/roles_context.js3
6 files changed, 56 insertions, 7 deletions
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({});