added full keycloak support. Partial Quantum backend support, Moved to

.env for config

- removed the globalVars variable for a lack of need
- changed the documentation page for test of multilevel navigation
- added machines page to route
- cleaned up dependencies for build
- changed config to split imports

src/Api/ConvertBackendCalls.tsx

@@ -1,19 +1,20 @@
 import axios, { AxiosError } from "axios";
 import type { ConvertSchema } from "Types/ApiCalls/ConvertBackendCallsTypes";
 
-const openbableBackendRoot = "http://localhost:1654";
-
 export async function ConvertMoleculeToStandart(
   data: ConvertSchema,
 ): Promise<string | AxiosError> {
   try {
-    const response = await axios.post(openbableBackendRoot + "/convert", {
-      text: data.inputText,
-      format: data.inputFormat,
-      convert_3d: data.make_3d,
-      add_hydrogen: data.add_h,
-      optimize_geometry: data.optimize,
-    });
+    const response = await axios.post(
+      import.meta.env.VITE_MOLECULAR_BACKEND_URL + "/convert",
+      {
+        text: data.inputText,
+        format: data.inputFormat,
+        convert_3d: data.make_3d,
+        add_hydrogen: data.add_h,
+        optimize_geometry: data.optimize,
+      },
+    );
 
     // Response from the FastAPI JSONResponse
     return response.data.molfile;
@@ -32,7 +33,9 @@ export async function GetInFormats(): Promise<
   { [key: string]: string } | AxiosError
 > {
   try {
-    const response = await axios.get(openbableBackendRoot + "/informats");
+    const response = await axios.get(
+      import.meta.env.VITE_MOLECULAR_BACKEND_URL + "/informats",
+    );
     return response.data;
   } catch (error) {
     //Error handling

src/Api/Keycloak/Keycloak.tsx

@@ -1,28 +1,97 @@
 import axios from "axios";
-import { keycloakURI } from "GlobalVars";
-import Keycloak from "keycloak-js";
+import Keycloak, { type KeycloakProfile } from "keycloak-js";
+import { routes } from "Routes/Routes";
 
 const keycloak = new Keycloak({
-  url: keycloakURI,
-  realm: "dev-realm",
+  url: import.meta.env.VITE_KEYCLOAK_URL
+    ? import.meta.env.VITE_KEYCLOAK_URL
+    : "",
+  realm: "quant_sim-realm",
   clientId: "react-frontend",
 });
 
-const api = axios.create({
-  baseURL: `${keycloak.authServerUrl}/realms/${keycloak.realm}`,
-});
-
 export default keycloak;
 
 export async function getProfile(keycloak: Keycloak) {
   return keycloak.loadUserProfile();
 }
 
-export const handleSubmit = async (profile) => {
+export const updateUserData = async (
+  profile: KeycloakProfile,
+): Promise<KeycloakProfile | undefined> => {
   try {
-    await api.put("/account", profile);
-    alert("Profile updated!");
+    await keycloak.updateToken(30);
+    const response = await axios.post(
+      `${keycloak.authServerUrl}/realms/${keycloak.realm}/account/`,
+      {
+        firstName: profile.firstName,
+        lastName: profile.lastName,
+        email: profile.email,
+        username: profile.username,
+        attributes: profile.attributes || {},
+      },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${keycloak.token}`,
+        },
+        withCredentials: true, // Important: allows credentials in CORS
+      },
+    );
+    if (response.status === 204) {
+      // Refresh the local profile after successful update
+      const updatedProfile = await keycloak.loadUserProfile();
+      return updatedProfile;
+    }
   } catch (err) {
     console.error(err);
   }
 };
+
+export const updatePasswordWithRedirect = async (
+  successRedirectUrl?: string,
+) => {
+  try {
+    await keycloak.updateToken(30);
+
+    // Trigger the UPDATE_PASSWORD required action
+    // This will redirect the user to Keycloak's password change page
+    return keycloak.login({
+      action: "UPDATE_PASSWORD",
+      redirectUri:
+        successRedirectUrl ||
+        window.location.origin +
+          "/" +
+          import.meta.env.VITE_BASE_PATH +
+          "/" +
+          routes.SettingsPage.path +
+          "?password_updated=true",
+      // Optional: Force re-authentication
+      prompt: "login",
+    });
+  } catch (error) {
+    console.error("Failed to initiate password update:", error);
+    throw error;
+  }
+};
+
+export const SendEmailVerification = async () => {
+  try {
+    await keycloak.updateToken(30);
+
+    // Trigger the UPDATE_PASSWORD required action
+    // This will redirect the user to Keycloak's password change page
+    return keycloak.login({
+      action: "VERIFY_EMAIL",
+      redirectUri:
+        window.location.origin +
+        import.meta.env.VITE_BASE_PATH +
+        "/" +
+        routes.SettingsPage.path +
+        "?email_sent=true",
+    });
+  } catch (error) {
+    console.error("Failed to initiate password update:", error);
+    throw error;
+  }
+};

src/Api/QuantumBackend/UserManagement.tsx

@@ -0,0 +1,52 @@
+import keycloak from "Api/Keycloak/Keycloak";
+import axios from "axios";
+import type { UserData } from "Types/User/User";
+
+export const GetCurrentUserInfo = async (): Promise<UserData | undefined> => {
+  try {
+    // Trigger the UPDATE_PASSWORD required action
+    // This will redirect the user to Keycloak's password change page
+    const response = await axios.get(
+      `${import.meta.env.VITE_QUANTUM_BACKEND_URL}/user`,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${keycloak.token}`,
+        },
+        withCredentials: true, // Important: allows credentials in CORS
+      },
+    );
+    if (response.status === 200) {
+      return response.data;
+    }
+  } catch (error) {
+    console.error("Error Getting User Data", error);
+    throw error;
+  }
+};
+
+export const UpdateCurrentUserInfo = async (
+  profile_picture_path: string,
+): Promise<UserData | undefined> => {
+  try {
+    // Trigger the UPDATE_PASSWORD required action
+    // This will redirect the user to Keycloak's password change page
+    const response = await axios.put(
+      `${import.meta.env.VITE_QUANTUM_BACKEND_URL}/user`,
+      { profile_picture_path: profile_picture_path },
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${keycloak.token}`,
+        },
+        withCredentials: true, // Important: allows credentials in CORS
+      },
+    );
+    if (response.status === 200) {
+      return response.data;
+    }
+  } catch (error) {
+    console.error("Error Getting User Data", error);
+    throw error;
+  }
+};