feat: OAuth and role management changes (#123)

part of parseablehq/parseable#410

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,17 +2,11 @@ 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;
 	},

src/api/constants.ts

@@ -1,6 +1,5 @@
 const API_V1 = 'api/v1';
-
-
+// const baseURL = process.env.REACT_APP_API_URL || '/';
 // Streams Management
 export const LOG_STREAM_LIST_URL = `${API_V1}/logstream`;
 export const LOG_STREAMS_SCHEMA_URL = (streamName: string) => `${LOG_STREAM_LIST_URL}/${streamName}/schema`;
@@ -17,4 +16,14 @@ export const ABOUT_URL = `${API_V1}/about`;
 export const USERS_LIST_URL = `${API_V1}/user`;
 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`;
+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}`;

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/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,7 @@ export const UsersManagementHeader: FC = () => {
 				<Box className={innerContainer}>
 					<ReloadUser />
 					<DocsUser />
-					<CreateUser />
+					{/* <CreateUser /> */}
 				</Box>
 			</Box>
 		</Box>

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',
+
+					},
+				};
+			}
+		}
 	},
 };

src/components/Navbar/index.tsx

@@ -16,20 +16,22 @@ import {
 } from '@tabler/icons-react';
 import { FC, useEffect } from 'react';
 import { useNavbarStyles } from './styles';
-import { useLocation, useParams } from 'react-router-dom';
+import {  useLocation, useParams } from 'react-router-dom';
 import { useGetLogStreamList } from '@/hooks/useGetLogStreamList';
 import { notifications } from '@mantine/notifications';
 import { useNavigate } from 'react-router-dom';
 import { DEFAULT_FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context';
 import useMountedState from '@/hooks/useMountedState';
 import dayjs from 'dayjs';
-import { useDisclosure, useLocalStorage } from '@mantine/hooks';
-import { LOGIN_ROUTE, USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
+import { useDisclosure } from '@mantine/hooks';
+import {  USERS_MANAGEMENT_ROUTE } from '@/constants/routes';
 import { useDeleteLogStream } from '@/hooks/useDeleteLogStream';
 import InfoModal from './infoModal';
 import { useGetUserRole } from '@/hooks/useGetUserRoles';
 import { getStreamsSepcificAccess, getUserSepcificStreams } from './rolesHandler';
 import { LogStreamData } from '@/@types/parseable/api/stream';
+import Cookies from 'js-cookie';
+const baseURL = import.meta.env.VITE_PARSEABLE_URL ?? '/';
 
 const links = [
 	{ icon: IconZoomCode, label: 'Query', pathname: '/query', requiredAccess: ['Query', 'GetSchema'] },
@@ -45,9 +47,7 @@ const Navbar: FC<NavbarProps> = (props) => {
 	const { streamName } = useParams();
 	const location = useLocation();
 
-	const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
-	const [, , removeCredentials] = useLocalStorage({ key: 'credentials' });
-	const [, , removeUsername] = useLocalStorage({ key: 'username' });
+	const username =  Cookies.get('username') 
 
 	const {
 		state: { subNavbarTogle },
@@ -75,14 +75,10 @@ const Navbar: FC<NavbarProps> = (props) => {
 	}, [subNavbarTogle.get()]);
 
 	const onSignOut = () => {
-		removeCredentials();
-		removeUsername();
-		navigate(
-			{
-				pathname: LOGIN_ROUTE,
-			},
-			{ replace: true },
-		);
+		Cookies.remove('session');
+		Cookies.remove('username');
+
+		window.location.href=`${baseURL}api/v1/o/logout?redirect=${window.location.origin}/login`;
 	};
 
 	const {
@@ -172,7 +168,6 @@ const Navbar: FC<NavbarProps> = (props) => {
 		}
 	}, [deleteData]);
 
-	//isAdmin
 	const { data: roles, getRoles, resetData } = useGetUserRole();
 	useEffect(() => {
 		if (username) {
@@ -184,8 +179,8 @@ const Navbar: FC<NavbarProps> = (props) => {
 	}, [username]);
 
 	useEffect(() => {
-		if (streams && streams.length > 0 && roles && roles.length > 0) {
-			const userStreams = getUserSepcificStreams(roles, streams as any);
+		if(streams && streams.length > 0 && roles){
+			const userStreams = getUserSepcificStreams(roles,streams as any);
 			setUserSepecficStreams(userStreams as any);
 		}
 	}, [roles, streams]);