ILEX-83 Connect the sign-in form to the ORCID and integrate user authentication in the application state

mock/mutator/customClient.ts

@@ -1,6 +1,6 @@
 import Axios, { AxiosRequestConfig } from 'axios';
- 
-export const AXIOS_INSTANCE = Axios.create({ baseURL: '.' }); // use your own URL here or environment variable
+import { API_CONFIG } from '../../src/config';
+export const AXIOS_INSTANCE = Axios.create({ baseURL: API_CONFIG.BASE_URL });
 
 // add a second `options` argument here if you want to pass extra options to each generated query
 export const customInstance = <T>(
@@ -12,7 +12,9 @@ export const customInstance = <T>(
     ...config,
     ...options,
     cancelToken: source.token,
-  }).then(({ data }) => data).catch(error => console.log("Error ", error));
+  }).then(({ data }) => data).catch(error => {
+    throw error;
+  });
 
   // @ts-ignore
   promise.cancel = () => {
@@ -30,4 +32,4 @@ export type BodyType<BodyData> = BodyData;
 
 // Or, in case you want to wrap the body type (optional)
 // (if the custom instance is processing data before sending it, like changing the case for example)
-export type BodyType<BodyData> = CamelCase<BodyData>;
+export type BodyType<BodyData> = CamelCase<BodyData>;

package.json

@@ -17,17 +17,18 @@
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.15",
     "@mui/x-tree-view": "^7.5.0",
-    "body-parser" : "^1.20.3",
-    "cors" : "^2.8.5",
+    "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
     "d3": "^7.1.1",
-    "dotenv": "16.4.7",
     "date-fns": "^3.6.0",
-    "express" : "^4.21.2",
+    "dotenv": "16.4.7",
+    "express": "^4.21.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
     "react-rte": "^0.16.5",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "yup": "^1.6.1"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",

src/App.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Box, ThemeProvider } from "@mui/material";
 import {
@@ -24,6 +25,7 @@ import ForgotPassword from "./components/Auth/ForgotPassword";
 import SingleOrganization from "./components/SingleOrganization";
 import TermActivity from "./components/term_activity/TermActivity";
 import OrganizationsCurieEditor from "./components/CurieEditor/OrganizationCurieEditor";
+import { handleOrcidLogin } from "./api/endpoints";
 
 const PageContainer = ({ children }) => {
 	return (
@@ -116,6 +118,20 @@ const Layout = ({ children }) => {
 	const authPaths = ["/login", "/register", "/forgot", "/reset"];
 	const location = useLocation();
 	const isAuthPath = authPaths.includes(location.pathname);
+
+	useEffect(() => {
+		const params = new URLSearchParams(location.search);
+		const code = params.get("code");
+		if (code) {(async () => {
+			try {
+				const response = await handleOrcidLogin(code);
+				localStorage.setItem("token", response.token);
+			} catch (error) {
+				console.log("error: ", error)
+			}})();
+		}
+	}, [location]);
+
 	// Determine whether to show the footer based on the current route
 	const showFooter = location.pathname !== "/";
 	return (
@@ -134,6 +150,7 @@ const Layout = ({ children }) => {
 };
 
 function App() {
+
 	return (
 		<ThemeProvider theme={theme}>
 			<CssBaseline />

src/api/custom-axios-instance.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { API_CONFIG } from "../../config/config.js";
+import { API_CONFIG } from "../config.ts";
 
 export const customAxiosInstance = axios.create({
   baseURL: API_CONFIG.BASE_SCICRUNCH_URL,
@@ -14,4 +14,4 @@ customAxiosInstance.interceptors.request.use((config) => {
     api_key: process.env.API_KEY, // Load API key from .env
   };
   return config;
-});
+});

src/api/endpoints/apiActions.ts

@@ -0,0 +1,42 @@
+import { AxiosRequestConfig } from 'axios';
+import { customInstance } from '../../../mock/mutator/customClient';
+import { API_CONFIG } from '../../config';
+
+
+type SecondParameter<T extends (...args: any) => any> = Parameters<T>[1];
+
+export const createPostRequest = <T = any, D = any>(endpoint: string, contentType = "application/json") => {
+  return (data?: D, options?: SecondParameter<typeof customInstance>) => {
+    return customInstance<T>(
+      {
+        url: API_CONFIG.BASE_URL + endpoint,
+        method: "POST",
+        data: data,
+        headers: {
+          "Content-Type": contentType,
+        },
+      },
+      options,
+    )
+  }
+}
+
+export const createGetRequest = <T = any, P = any>(endpoint: string, contentType?: string) => {
+  return (params?: P, options?: SecondParameter<typeof customInstance>, signal?: AbortSignal) => {
+    const config: AxiosRequestConfig = {
+      url: API_CONFIG.BASE_URL + endpoint,
+      method: "GET",
+      params,
+      signal,
+    }
+
+    if (contentType) {
+      config.headers = {
+        ...config.headers,
+        "Content-Type": contentType,
+      }
+    }
+
+    return customInstance<T>(config, options)
+  }
+}

src/api/endpoints/apiService.ts

@@ -0,0 +1,19 @@
+import { createPostRequest } from "./apiActions";
+import { API_CONFIG } from "../../config";
+
+export interface LoginRequest {
+  username: string
+  password: string
+}
+
+export interface RegisterRequest {
+  username: string
+  password: string
+  firstName: string
+  lastName: string
+  email: string
+  organization: string
+}
+
+export const login = createPostRequest<any, LoginRequest>(API_CONFIG.REAL_API.SIGNIN, "application/x-www-form-urlencoded")
+export const register = createPostRequest<any, RegisterRequest>(API_CONFIG.REAL_API.NEWUSER_ILX, "application/x-www-form-urlencoded")

src/api/endpoints/index.ts

@@ -344,21 +344,32 @@ export const addMessateToVariantDiscussion = async (group, variantID, message) =
     });
 }
 
-export const handleLogin = async (email: string, password: string) => {
+export const handleLogin = async (username: string, password: string) => {
   try {
     const { postOpsUserLogin } = useApi()
-    const response = await postOpsUserLogin({
-      email,
-      password,
-    });
+    const response = await postOpsUserLogin({ username: username, password: password });
     console.log("Login successful:", response);
-    return response.data;
+    return response;
   } catch (error) {
     console.error("Login failed:", error);
     throw error;
   }
 };
 
+export const handleOrcidLogin = async (code: string) => {
+  const response = await fetch("https://uri.olympiangods.org/u/ops/orcid-login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    // body: JSON.strijiuigngify({ code }),
+  });
+
+  if (!response.ok) {
+    throw new Error("ORCID authentication failed");
+  }
+
+  return response.json();
+};
+
 export const handleRegister = async (
   firstName: string,
   lastName: string,

src/api/endpoints/interLexURIStructureAPI.ts

@@ -20,6 +20,7 @@ import type {
 } from '@tanstack/react-query'
 import { customInstance } from '../../../mock/mutator/customClient';
 import type { ErrorType } from '../../../mock/mutator/customClient';
+import { API_CONFIG } from '../../config';
 
 type AwaitedInput<T> = PromiseLike<T> | T;
 
@@ -483,16 +484,32 @@ export const useGetOpsUserLogin = <TData = Awaited<ReturnType<typeof getOpsUserL
 
 
 
-export const postOpsUserLogin = (
+// export const postOpsUserLogin = (
 
- options?: SecondParameter<typeof customInstance>,) => {
+//  options?: SecondParameter<typeof customInstance>,) => {
 
 
-      return customInstance<void>(
-      {url: `https://uri.olympiangods.org/u/ops/user-login`, method: 'POST'
-    },
-      options);
-    }
+//       return customInstance<void>(
+//       {url: `https://uri.olympiangods.org/u/ops/user-login`, method: 'POST'
+//     },
+//       options);
+//     }
+export const postOpsUserLogin = (
+  userData: { username: string; password: string },
+  options?: SecondParameter<typeof customInstance>
+) => {
+  return customInstance<void>(
+    {
+      url: `${API_CONFIG.BASE_URL}${API_CONFIG.REAL_API.SIGNIN}`,
+      method: 'POST',
+      data: userData,
+      headers: {
+        'Content-Type': "application/x-www-form-urlencoded",
+      },
+    },
+    options
+  );
+};