add OAuth Support (#132)

Also adds new users and roles page.

Part of parseablehq/parseable#410

Author: kartik-gupta-ij

package.json

@@ -22,10 +22,12 @@
 		"@mantine/prism": "^6.0.15",
 		"@monaco-editor/react": "^4.5.1",
 		"@tabler/icons-react": "^2.23.0",
+		"@types/js-cookie": "^3.0.3",
 		"axios": "^1.4.0",
 		"dayjs": "^1.11.8",
 		"http-status-codes": "^2.2.0",
 		"immer": "^10.0.2",
+		"js-cookie": "^3.0.5",
 		"just-compare": "^2.3.0",
 		"ms": "^2.1.3",
 		"react": "^18.2.0",

pnpm-lock.yaml

@@ -1,10 +1,11 @@
 import { Axios } from './axios';
-import {  LOG_STREAM_LIST_URL } from './constants';
+import {  LOGIN_URL } from './constants';
+
 
 export const loginIn = (username: string, password: string) => {
 	const credentials = btoa(`${username}:${password}`);
 
-	return Axios().get(LOG_STREAM_LIST_URL, {
+	return Axios().get(LOGIN_URL, {
 		headers: {
 			Authorization: `Basic ${credentials}`,
 		},

public/AGPLv3_Logo.svg

@@ -2,18 +2,10 @@ import axios from 'axios';
 
 const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
 
-const instance = axios.create({ baseURL, validateStatus: () => true });
+const instance = axios.create({ baseURL, validateStatus: () => true, withCredentials: true });
 
 instance.interceptors.request.use(
 	(request) => {
-		const credentials = localStorage.getItem('credentials');
-
-		if (credentials) {
-			const Authorization = credentials ? `Basic ${credentials}` : null;
-
-			request.headers.Authorization = Authorization;
-		}
-
 		return request;
 	},
 	(error) => {

src/api/auth.ts

@@ -18,6 +18,16 @@ export const USER_URL = (username: string) => `${USERS_LIST_URL}/${username}`;
 export const USER_ROLES_URL = (username: string) => `${USER_URL(username)}/role`;
 export const USER_PASSWORD_URL = (username: string) => `${USER_URL(username)}/generate-new-password`;
 
+// Roles Management
+export const ROLES_LIST_URL = `${API_V1}/role`;
+export const ROLE_URL = (roleName: string) => `${ROLES_LIST_URL}/${roleName}`;
+
+
+//USERS LOGIN
+
+export const LOGIN_URL = `${API_V1}/o/login?redirect=${window.location.origin}`;
+
 // LLM queries
 export const LLM_QUERY_URL = `${API_V1}/llm`;
 export const IS_LLM_ACTIVE_URL = `${LLM_QUERY_URL}/isactive`;
+

src/api/axios.ts

@@ -0,0 +1,18 @@
+import { Axios } from "./axios";
+import { ROLE_URL, ROLES_LIST_URL } from "./constants";
+
+export const getRoles = () => {
+    return Axios().get(ROLES_LIST_URL);
+}
+
+export const deleteRole = (roleName: string) => {
+    return Axios().delete(ROLE_URL(roleName));
+}
+
+export const putRole = (roleName: string, privilege: object[]) => {
+    return Axios().put(ROLE_URL(roleName), privilege);
+}
+
+export const getRole = (roleName: string) => {
+    return Axios().get(ROLE_URL(roleName));
+}

src/api/constants.ts

@@ -1,25 +1,18 @@
-import logoInvert from '@/assets/images/brand/logo-invert.svg';
-import { HOME_ROUTE } from '@/constants/routes';
 import { HEADER_HEIGHT } from '@/constants/theme';
 import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { Box, Image, Header as MantineHeader } from '@mantine/core';
+import { Box, Header as MantineHeader } from '@mantine/core';
 import { FC } from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import {  Outlet } from 'react-router-dom';
 import { useHeaderStyles } from './styles';
 
 type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
 
 const HeaderLayout: FC<HeaderProps> = (props) => {
 	const { classes } = useHeaderStyles();
-	const { container, logoContainer, navContainer, imageSty } = classes;
+	const { container, navContainer } = classes;
 
 	return (
-		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
-			<Box className={logoContainer}>
-				<Link to={HOME_ROUTE}>
-					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
-				</Link>
-			</Box>
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder zIndex={100}>
 			<Box className={navContainer}>
 				<Outlet />
 			</Box>

src/api/roles.ts

@@ -0,0 +1,49 @@
+import logoInvert from '@/assets/images/brand/logo-invert.svg';
+import { HOME_ROUTE } from '@/constants/routes';
+import { HEADER_HEIGHT } from '@/constants/theme';
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { Box, Button, Image, Header as MantineHeader, Tooltip } from '@mantine/core';
+import { FC } from 'react';
+import { Link } from 'react-router-dom';
+import { useHeaderStyles } from './styles';
+
+type PrimaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const PrimaryHeader: FC<PrimaryHeaderProps> = (props) => {
+	const { classes } = useHeaderStyles();
+	const { container, logoContainer, navContainer, imageSty, actionBtn } = classes;
+
+	return (
+		<MantineHeader {...props} className={container} height={HEADER_HEIGHT} p={0} withBorder>
+			<Box className={logoContainer}>
+				<Link to={HOME_ROUTE}>
+					<Image className={imageSty} src={logoInvert} height={24} alt="Parseable Logo" />
+				</Link>
+			</Box>
+			<Box className={navContainer}>
+				<Box
+					display={'flex'}
+					sx={{
+						justifyContent: 'flex-end',
+						alignItems: 'center',
+						width: '100%',
+						paddingLeft: '1rem',
+					}}
+					pr={'xl'}>
+					<Tooltip label="Upgrade to production support" position="bottom">
+						<Button
+							variant="outline"
+							component={'a'}
+							href="mailto:[email protected]?subject=Production%20Support%20Query"
+							target="_blank"
+							className={actionBtn}>
+							<Image height={30} fit="fill" src={'/AGPLv3_Logo.svg'} />
+						</Button>
+					</Tooltip>
+				</Box>
+			</Box>
+		</MantineHeader>
+	);
+};
+
+export default PrimaryHeader;