diff --git a/src/App.tsx b/src/App.tsx index ed0eb06..4f32271 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,204 @@ import './App.css' +import { useAuth, hasAuthParams } from "react-oidc-context"; +import React, {useState} from 'react'; +import { + SettingOutlined, + UserOutlined, +} from '@ant-design/icons'; +import {Breadcrumb, type MenuProps} from 'antd'; +import { Layout, Menu, theme } from 'antd'; +import Home from "./Home.tsx"; +import { Route, Routes, useNavigate} from "react-router"; +import Profile from "./Profile.tsx"; +import {type UserContextType} from './UserContext.tsx'; +import {UserContext} from './UserContext.tsx'; +import type {userObject} from "./UserContext.tsx"; -function App() { +const { Header, Content, Sider } = Layout; - return ( - <> -

HELLOOOO

- - ) +type MenuItem = Required['items'][number]; + + +function getItem( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], +): MenuItem { + return { + key, + icon, + children, + label, + } as MenuItem; } + +const App: React.FC = () => { + const navigate = useNavigate(); + const { + token: {colorBgContainer, borderRadiusLG}, + } = theme.useToken(); + /******************* + SIGNING IN WITH OIDC + *******************/ + const auth = useAuth(); + const hasTriedSignin = React.useRef(false); + // automatically sign-in + React.useEffect(() => { + if (!hasAuthParams() && + !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading && + !hasTriedSignin.current + ) { + auth.signinRedirect(); + hasTriedSignin.current = true; + } + }, [auth]); + + const defaultUser: UserContextType = { + currentUser: { + first_name: "", + last_name: "", + email: "", + organisations: [] + }, + setCurrentUser: () => {} + } + + const [currentUser, setCurrentUser] = useState(defaultUser.currentUser); + /***************************** + GETTING CURRENT USER FROM API + *****************************/ + // const [current_user, setUser] = useState(null); + + React.useEffect(() => { + (async () => { + if (!auth.user) { return } + try { + console.log(auth.user); + const token = auth.user.access_token; + const response = await fetch("/api/v1/user/self/db", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + setCurrentUser(await response.json()); + } catch (e) { + console.error(e); + } + })(); + }, [auth]); + + // const [current_orgs, set_current_orgs] = useState(null); + + + if (!currentUser) { + return( + +
Determining your existing user...
; + + ); + } + + if (auth.isLoading) { + return( + +
Signing you in/out...
; + + ); + } + + if (!auth.isAuthenticated) { + return( + +
Unable to log in
; + + ); + } + + + + const onClick: MenuProps['onClick'] = (e) => { + switch (e.key) { + case 'account': + navigate('/profile'); + break; + case 'logout': + auth.removeUser().then(r => navigate('/profile')); + break; + default: + console.log('Clicked item:', e.key); + } + }; + + + //const organisations: [] = current_user.organisations; + + const side_nav_items: MenuItem[] = currentUser.organisations && [ + getItem('Files', '9', ), + ]; + + const top_nav_items = [ + getItem(currentUser.first_name + " " +currentUser.last_name , 'account1', , [getItem('Account details', 'account'), getItem('Log out', 'logout')]), + getItem("Organisation Settings", 'orgsettings', ), + ]; + return ( + + +
+
+

SR22

+
+ +
+ + + + + + + + + + }/> + {currentUser && }/> } + + + + + + + + + ); + +} + + export default App diff --git a/src/UserContext.tsx b/src/UserContext.tsx index e69de29..44794e7 100644 --- a/src/UserContext.tsx +++ b/src/UserContext.tsx @@ -0,0 +1,24 @@ +import React, { createContext, useContext } from 'react'; + + +export interface userObject { + first_name: string; + last_name: string; + email: string; + organisations: string[]; +} + +export interface UserContextType { + currentUser: userObject; + setCurrentUser: React.Dispatch>; +} + +export const UserContext = createContext(undefined); + +export const useUserContext = () => { + const context: UserContextType | undefined = useContext(UserContext); + if (context === undefined) { + throw new Error('jhfhgtfhgfghfhgf not found'); + } + return context; +}; \ No newline at end of file diff --git a/src/account.tsx b/src/account.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/home.tsx b/src/home.tsx index e69de29..931e63b 100644 --- a/src/home.tsx +++ b/src/home.tsx @@ -0,0 +1,24 @@ +import {Breadcrumb, theme} from "antd"; +import React from "react"; + +const Home: React.FC = () => { + const { + token: { colorBgContainer, borderRadiusLG }, + } = theme.useToken(); + + return (<> + +
+ Bill is a cat. +
+ ) +} + +export default Home; \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index bef5202..6434781 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -2,9 +2,34 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.tsx' +import {AuthProvider, type AuthProviderProps} from "react-oidc-context"; +import {type User, WebStorageStateStore} from "oidc-client-ts"; +import { BrowserRouter } from "react-router"; + +const onSigninCallback = (_user: User | void): void => { + window.history.replaceState( + {}, + document.title, + window.location.pathname + ) +} + +const oidcConfig: AuthProviderProps = { + authority: "https://sso.sr2.uk/realms/sr2", + client_id: "chris-dev", + redirect_uri: "http://localhost:5173", + onSigninCallback: onSigninCallback, + userStore: new WebStorageStateStore({ store: window.localStorage }), +}; createRoot(document.getElementById('root')!).render( - + + + + + + + , ) diff --git a/src/profile.tsx b/src/profile.tsx index e69de29..5618d45 100644 --- a/src/profile.tsx +++ b/src/profile.tsx @@ -0,0 +1,22 @@ +// src/Posts.jsx + +import {useUserContext} from './UserContext'; + +const Profile = () => { + const { currentUser } = useUserContext(); + + if (!currentUser) { + return
Loading...
; + } + + return ( + <> +

User: {currentUser.first_name} {currentUser.last_name}

+

Email: {currentUser.email}

+

Orgs: {currentUser.organisations}

+ + +); +}; + +export default Profile; \ No newline at end of file