diff options
author | Joseph Ditton <jditton.atomic@gmail.com> | 2021-12-01 20:18:26 -0700 |
---|---|---|
committer | Joseph Ditton <jditton.atomic@gmail.com> | 2021-12-01 20:18:26 -0700 |
commit | 84b45cd6b11347e66437cd92dc20372d0abd6eb9 (patch) | |
tree | 6e42b5861278485c67159dc57c225983e3fd69f8 /client | |
parent | d803aaaf1be441f55fe674c3b0c6793e77a9203f (diff) | |
download | locchat-84b45cd6b11347e66437cd92dc20372d0abd6eb9.tar.gz locchat-84b45cd6b11347e66437cd92dc20372d0abd6eb9.zip |
adds roles
Diffstat (limited to 'client')
-rw-r--r-- | client/app.jsx | 15 | ||||
-rw-r--r-- | client/components/admin/_admin.jsx | 21 | ||||
-rw-r--r-- | client/components/home/_home.jsx | 17 | ||||
-rw-r--r-- | client/components/router.jsx | 2 | ||||
-rw-r--r-- | client/utils/parse_jwt.js | 5 | ||||
-rw-r--r-- | client/utils/roles_context.js | 3 |
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({}); |