Oauth Changes

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",

src/api/auth.ts

@@ -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}`,
 		},

src/api/axios.ts

@@ -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/constants.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/roles.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/components/Header/Layout.tsx

@@ -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/components/Header/PrimaryHeader.tsx

@@ -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;

src/components/Header/SecondaryHeader.tsx

@@ -0,0 +1,24 @@
+import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
+import { FC } from 'react';
+import { Route, Routes } from 'react-router-dom';
+import HeaderLayout from './Layout';
+import { ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
+import { CONFIG_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+
+type SecondaryHeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
+
+const SecondaryHeader: FC<SecondaryHeaderProps> = (props) => {
+	return (
+		<Routes>
+			<Route element={<HeaderLayout {...props} />}>
+				<Route path={LOGS_ROUTE} element={<LogsHeader />} />
+				<Route path={QUERY_ROUTE} element={<QueryHeader />} />
+				<Route path={STATS_ROUTE} element={<StatsHeader />} />
+				<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
+				<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
+			</Route>
+		</Routes>
+	);
+};
+
+export default SecondaryHeader;

src/components/Header/SubHeader.tsx

@@ -8,8 +8,7 @@ import TimeRange from './TimeRange';
 import { useLogQueryStyles } from './styles';
 import ReloadUser from './ReloadUser';
 import DocsUser from './UserDocs';
-import CreateUser from './CreateUser';
-// import LimitLog from './LimitLogs';
+
 
 export const StatsHeader: FC = () => {
 	const { classes } = useLogQueryStyles();
@@ -110,7 +109,6 @@ export const UsersManagementHeader: FC = () => {
 				<Box className={innerContainer}>
 					<ReloadUser />
 					<DocsUser />
-					<CreateUser />
 				</Box>
 			</Box>
 		</Box>

src/components/Header/index.tsx

@@ -1,32 +1,7 @@
-import type { HeaderProps as MantineHeaderProps } from '@mantine/core';
-import { FC } from 'react';
-import { Route, Routes } from 'react-router-dom';
-import HeaderLayout from './Layout';
-import { AllRouteHeader, ConfigHeader, LogsHeader, QueryHeader, StatsHeader, UsersManagementHeader } from './SubHeader';
-import {
-	ALL_ROUTE,
-	CONFIG_ROUTE,
-	LOGS_ROUTE,
-	QUERY_ROUTE,
-	STATS_ROUTE,
-	USERS_MANAGEMENT_ROUTE,
-} from '@/constants/routes';
+import PrimaryHeader from "./PrimaryHeader";
+import SecondaryHeader from "./SecondaryHeader";
 
-type HeaderProps = Omit<MantineHeaderProps, 'children' | 'height' | 'className'>;
-
-const Header: FC<HeaderProps> = (props) => {
-	return (
-		<Routes>
-			<Route element={<HeaderLayout {...props} />}>
-				<Route path={LOGS_ROUTE} element={<LogsHeader />} />
-				<Route path={QUERY_ROUTE} element={<QueryHeader />} />
-				<Route path={STATS_ROUTE} element={<StatsHeader />} />
-				<Route path={CONFIG_ROUTE} element={<ConfigHeader />} />
-				<Route path={USERS_MANAGEMENT_ROUTE} element={<UsersManagementHeader />} />
-				<Route path={ALL_ROUTE} element={<AllRouteHeader />} />
-			</Route>
-		</Routes>
-	);
-};
-
-export default Header;
+export {
+    PrimaryHeader,
+    SecondaryHeader
+}

src/components/Header/styles.tsx

@@ -23,22 +23,23 @@ export const useHeaderStyles = createStyles((theme) => {
 			justifyContent: 'center',
 			alignItems: 'center',
 			padding: spacing.md,
-			paddingRight:0,
-			width: NAVBAR_WIDTH,
-			height: "24px",
-
-		},
-		imageSty: {
-
-		},
-		burgerIcon: {
-
-
+			paddingRight: 0,
+			minWidth: NAVBAR_WIDTH,
+			height: '24px',
 		},
+		imageSty: {},
+		burgerIcon: {},
 		navContainer: {
-			width: `calc(100% - ${NAVBAR_WIDTH}px)`,
+			width: `calc(100% )`,
 			justifyContent: 'space-between',
 		},
+		actionBtn: {
+			transition: 'transform .2s ease-in-out',
+			'&:hover ': {
+				transform: 'scale(1.3)',
+				backgroundColor: colors.gray[0],
+			},
+		},
 	};
 });
 

src/components/Mantine/theme.tsx

@@ -1,4 +1,4 @@
-import type { CSSObject, MantineThemeOverride } from '@mantine/core';
+import { type CSSObject, type MantineThemeOverride } from '@mantine/core';
 import { heights, widths, sizing } from './sizing';
 
 const globalStyles = (): CSSObject => {
@@ -235,5 +235,17 @@ export const theme: MantineThemeOverride = {
 				};
 			}
 		},
+
+		PasswordInput: {
+			styles: ({ colors }) => {
+				return {
+					input: {
+						border: `${sizing.px} ${colors.gray[2]} solid`,
+						borderRadius: 'md',
+
+					},
+				};
+			}
+		}
 	},
 };