feat(client): Add ui to manage clients

src/api/api.js

@@ -490,3 +490,50 @@ export const fetchSimilarLicenses = async text => {
 	const response = await axios.post(url, { text }, { headers });
 	return response.data;
 };
+
+export const fetchOidcClients = async () => {
+	const url = `${import.meta.env.VITE_BASE_URL}/oidcClients`;
+
+	const headers = {
+		accept: 'application/json',
+	};
+
+	if (isApiAuthenticated('oidcClients', 'get')) {
+		const token = await GetToken();
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+
+	const response = await axios.get(url, { headers });
+	return response.data;
+};
+
+export const postOidcClient = async data => {
+	const url = `${import.meta.env.VITE_BASE_URL}/oidcClients`;
+
+	const headers = {};
+
+	if (isApiAuthenticated('oidcClients', 'post')) {
+		const token = await GetToken();
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+
+	const response = await axios.post(url, data, { headers });
+	return response.data;
+};
+
+export const deleteOidcClient = async data => {
+	const url = `${import.meta.env.VITE_BASE_URL}/oidcClients`;
+
+	const headers = {};
+
+	if (isApiAuthenticated('oidcClients', 'delete')) {
+		const token = await GetToken();
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+
+	const response = await axios.delete(url, {
+		headers,
+		data,
+	});
+	return response.data;
+};

src/components/Navbar.jsx

@@ -12,13 +12,15 @@ import { MdOutlineAssignmentTurnedIn } from 'react-icons/md';
 import { PiMathOperationsFill } from 'react-icons/pi';
 import { IoIosLogIn } from 'react-icons/io';
 import { FaUserCircle } from 'react-icons/fa';
-import { GetTokenSync, Signout } from '../contexts/AuthContext.jsx';
+import { GetTokenSync, Signout, GetUser } from '../contexts/AuthContext.jsx';
 import AppLogo from '../assets/images/logo.png';
+import { FaUser } from 'react-icons/fa';
 
 export default function LicenseDBNavbar() {
 	const location = useLocation();
 	const [route, setRoute] = useState('');
 	const isLoggedIn = GetTokenSync() !== null;
+	const user = GetUser();
 	useEffect(() => {
 		setRoute(
 			location.pathname.split('/')?.[1] === ''
@@ -58,17 +60,25 @@ export default function LicenseDBNavbar() {
 								Dashboard
 							</Nav.Link>
 						</Nav.Item>
-						<Nav.Item>
-							<Nav.Link
-								to="/user"
-								eventKey="user"
-								as={Link}
-								className="ps-2"
-							>
-								<BiUserCircle size={20} className="mb-1" />{' '}
-								Users
-							</Nav.Link>
-						</Nav.Item>
+						{isLoggedIn &&
+							['ADMIN', 'SUPER_ADMIN'].indexOf(
+								user.user_level,
+							) !== -1 && (
+								<Nav.Item>
+									<Nav.Link
+										to="/user"
+										eventKey="user"
+										as={Link}
+										className="ps-2"
+									>
+										<BiUserCircle
+											size={20}
+											className="mb-1"
+										/>{' '}
+										Users
+									</Nav.Link>
+								</Nav.Item>
+							)}
 						<Nav.Item>
 							<Nav.Link
 								to="/license"
@@ -93,20 +103,41 @@ export default function LicenseDBNavbar() {
 								Obligation
 							</Nav.Link>
 						</Nav.Item>
-						<Nav.Item>
-							<Nav.Link
-								to="/operation"
-								eventKey="operation"
-								as={Link}
-								className="ps-2"
-							>
-								<PiMathOperationsFill
-									size={20}
-									className="mb-1"
-								/>{' '}
-								Operation
-							</Nav.Link>
-						</Nav.Item>
+						{isLoggedIn &&
+							['ADMIN', 'SUPER_ADMIN'].indexOf(
+								user.user_level,
+							) !== -1 && (
+								<Nav.Item>
+									<Nav.Link
+										to="/operation"
+										eventKey="operation"
+										as={Link}
+										className="ps-2"
+									>
+										<PiMathOperationsFill
+											size={20}
+											className="mb-1"
+										/>{' '}
+										Operation
+									</Nav.Link>
+								</Nav.Item>
+							)}
+						{isLoggedIn &&
+							['ADMIN', 'SUPER_ADMIN'].indexOf(
+								user.user_level,
+							) !== -1 && (
+								<Nav.Item>
+									<Nav.Link
+										to="/clients"
+										eventKey="clients"
+										as={Link}
+										className="ps-2"
+									>
+										<FaUser size={20} className="mb-1" />{' '}
+										Manage Clients
+									</Nav.Link>
+								</Nav.Item>
+							)}
 						<div className="d-flex justify-content-center">
 							{!isLoggedIn ? (
 								<Link to="/signin">

src/components/Sidebar.jsx

@@ -16,6 +16,7 @@ import { Signout, GetTokenSync, GetUser } from '../contexts/AuthContext.jsx';
 import AppLogo from '../assets/images/logo.png';
 import SettingsSubMenu from './settingsSubMenu';
 import '../styles/sideBar.css';
+import { FaUser } from 'react-icons/fa';
 
 export default function LicenseDBSidebar() {
 	const location = useLocation();
@@ -137,6 +138,21 @@ export default function LicenseDBSidebar() {
 							</Nav.Link>
 						</Nav.Item>
 					)}
+				{isLoggedIn &&
+					['ADMIN', 'SUPER_ADMIN'].indexOf(user.user_level) !==
+						-1 && (
+						<Nav.Item>
+							<Nav.Link
+								to="/clients"
+								eventKey="clients"
+								as={Link}
+								className="ps-2"
+							>
+								<FaUser size={20} className="mb-1" /> Manage
+								Clients
+							</Nav.Link>
+						</Nav.Item>
+					)}
 			</Nav>
 		</Container>
 	);

src/components/textDiffModal.jsx

@@ -31,12 +31,12 @@ const TextDiffModal = ({
 			</Modal.Header>
 
 			<Modal.Body>
-					<ReactDiffViewer
-						oldValue={oldText || ''}
-						newValue={newText || ''}
-						splitView={true}
-						compareMethod={DiffMethod.WORDS}
-					/>
+				<ReactDiffViewer
+					oldValue={oldText || ''}
+					newValue={newText || ''}
+					splitView={true}
+					compareMethod={DiffMethod.WORDS}
+				/>
 			</Modal.Body>
 
 			<Modal.Footer>

src/contexts/AuthContext.jsx

@@ -41,12 +41,12 @@ export function AuthProvider({ children }) {
 
 			const { data } = await axios.post(url, userCredentialsPayload);
 			const { access_token, refresh_token, expires_at } = data.data;
-			
+
 			const expiresAtMs = new Date(expires_at).getTime();
 			localStorage.setItem('licensedb.token', access_token);
 			localStorage.setItem('licensedb.refresh_token', refresh_token);
 			localStorage.setItem('licensedb.expires_at', expiresAtMs);
-			
+
 			const user = await fetchUserProfile(access_token);
 			localStorage.setItem(
 				'licensedb.user',

src/index.jsx

@@ -19,6 +19,7 @@ import CreateLicense from './pages/createLicense';
 import CreateObligation from './pages/createObligation';
 import CreateUser from './pages/createUser';
 import Operation from './pages/operations';
+import OidcClientManager from './pages/oidcClients';
 import ObligationSettings from './pages/settings/obligationSettings';
 import { AuthProvider } from './contexts/AuthContext';
 import OAuthRedirect from './pages/oAuthRedirect';
@@ -133,6 +134,16 @@ const router = createBrowserRouter(
 						</MainLayout>
 					),
 				},
+				{
+					path: 'clients',
+					element: (
+						<MainLayout>
+							<ProtectedRoute access={['ADMIN', 'SUPER_ADMIN']}>
+								<OidcClientManager />
+							</ProtectedRoute>
+						</MainLayout>
+					),
+				},
 				{
 					path: '/signin',
 					element: <Signin />,

src/pages/license.jsx

@@ -109,7 +109,10 @@ function License() {
 			maxWidth: '30%',
 			cell: row => (
 				<div className="license-text">
-					<span>{row.text?.substr(0, 50) ?? ''}{(row.text ?? '').length > 50 && '...'}</span>
+					<span>
+						{row.text?.substr(0, 50) ?? ''}
+						{(row.text ?? '').length > 50 && '...'}
+					</span>
 				</div>
 			),
 		},

src/pages/obligation.jsx

@@ -89,7 +89,10 @@ function Obligation() {
 				textAlign: 'left',
 			},
 			cell: row => (
-				<span className="single-line-preview">{row.text?.substr(0, 100) ?? ''}{(row.text ?? '').length > 100 && '...'}</span>
+				<span className="single-line-preview">
+					{row.text?.substr(0, 100) ?? ''}
+					{(row.text ?? '').length > 100 && '...'}
+				</span>
 			),
 		},
 		{