@inventreedb/ui 0.0.1 → 0.0.2

package/src/functions/auth.tsx

@@ -1,574 +0,0 @@
-import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
-import { apiUrl } from '@lib/functions/Api';
-import { type AuthProvider, FlowEnum } from '@lib/types/Auth';
-import { t } from '@lingui/core/macro';
-import { notifications, showNotification } from '@mantine/notifications';
-import axios from 'axios';
-import type { AxiosRequestConfig } from 'axios';
-import type { Location, NavigateFunction } from 'react-router-dom';
-import { api, setApiDefaults } from '../App';
-import { useServerApiState } from '../states/ApiState';
-import { useLocalState } from '../states/LocalState';
-import { useUserState } from '../states/UserState';
-import { fetchGlobalStates } from '../states/states';
-import { showLoginNotification } from './notifications';
-import { generateUrl } from './urls';
-
-export function followRedirect(navigate: NavigateFunction, redirect: any) {
-  let url = redirect?.redirectUrl ?? '/home';
-
-  if (redirect?.queryParams) {
-    // Construct and appand query parameters
-    url = `${url}?${new URLSearchParams(redirect.queryParams).toString()}`;
-  }
-
-  navigate(url);
-}
-
-/**
- * sends a request to the specified url from a form. this will change the window location.
- * @param {string} path the path to send the post request to
- * @param {object} params the parameters to add to the url
- * @param {string} [method=post] the method to use on the form
- *
- * Source https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit/133997#133997
- */
-
-function post(path: string, params: any, method = 'post') {
-  const form = document.createElement('form');
-  form.method = method;
-  form.action = path;
-
-  for (const key in params) {
-    if (
-      params.hasOwn?.(key) ||
-      Object.prototype.hasOwnProperty.call(params, key)
-    ) {
-      const hiddenField = document.createElement('input');
-      hiddenField.type = 'hidden';
-      hiddenField.name = key;
-      hiddenField.value = params[key];
-
-      form.appendChild(hiddenField);
-    }
-  }
-
-  document.body.appendChild(form);
-  form.submit();
-}
-
-/**
- * Attempt to login using username:password combination.
- * If login is successful, an API token will be returned.
- * This API token is used for any future API requests.
- */
-export const doBasicLogin = async (
-  username: string,
-  password: string,
-  navigate: NavigateFunction
-) => {
-  const { getHost } = useLocalState.getState();
-  const { clearUserState, setAuthenticated, fetchUserState } =
-    useUserState.getState();
-  const { setAuthContext } = useServerApiState.getState();
-
-  if (username.length == 0 || password.length == 0) {
-    return;
-  }
-
-  clearCsrfCookie();
-  await ensureCsrf();
-
-  let loginDone = false;
-  let success = false;
-
-  const host: string = getHost();
-
-  // Attempt login with
-  await api
-    .post(
-      apiUrl(ApiEndpoints.auth_login),
-      {
-        username: username,
-        password: password
-      },
-      {
-        baseURL: host
-      }
-    )
-    .then((response) => {
-      setAuthContext(response.data?.data);
-      if (response.status == 200 && response.data?.meta?.is_authenticated) {
-        setAuthenticated(true);
-        loginDone = true;
-        success = true;
-      }
-    })
-    .catch((err) => {
-      if (err?.response?.status == 401) {
-        setAuthContext(err.response.data?.data);
-        const mfa_flow = err.response.data.data.flows.find(
-          (flow: any) => flow.id == FlowEnum.MfaAuthenticate
-        );
-        if (mfa_flow && mfa_flow.is_pending == true) {
-          success = true;
-          navigate('/mfa');
-        }
-      } else if (err?.response?.status == 409) {
-        notifications.show({
-          title: t`Already logged in`,
-          message: t`There is a conflicting session on the server for this browser. Please logout of that first.`,
-          color: 'red',
-          autoClose: false
-        });
-      }
-    });
-
-  if (loginDone) {
-    await fetchUserState();
-    // see if mfa registration is required
-    await fetchGlobalStates(navigate);
-    observeProfile();
-  } else if (!success) {
-    clearUserState();
-  }
-  return success;
-};
-
-/**
- * Logout the user from the current session
- *
- * @arg deleteToken: If true, delete the token from the server
- */
-export const doLogout = async (navigate: NavigateFunction) => {
-  const { clearUserState, isLoggedIn } = useUserState.getState();
-
-  // Logout from the server session
-  if (isLoggedIn() || !!getCsrfCookie()) {
-    await authApi(apiUrl(ApiEndpoints.auth_session), undefined, 'delete').catch(
-      () => {}
-    );
-    showLoginNotification({
-      title: t`Logged Out`,
-      message: t`Successfully logged out`
-    });
-  }
-
-  clearUserState();
-  clearCsrfCookie();
-  navigate('/login');
-};
-
-export const doSimpleLogin = async (email: string) => {
-  const { getHost } = useLocalState.getState();
-  const mail = await axios
-    .post(
-      apiUrl(ApiEndpoints.user_simple_login),
-      {
-        email: email
-      },
-      {
-        baseURL: getHost(),
-        timeout: 2000
-      }
-    )
-    .then((response) => response.data)
-    .catch((_error) => {
-      return false;
-    });
-  return mail;
-};
-
-function observeProfile() {
-  // overwrite language and theme info in session with profile info
-
-  const user = useUserState.getState().getUser();
-  const { language, setLanguage, userTheme, setTheme } =
-    useLocalState.getState();
-  if (user) {
-    if (user.profile?.language && language != user.profile.language) {
-      showNotification({
-        title: t`Language changed`,
-        message: t`Your active language has been changed to the one set in your profile`,
-        color: 'blue',
-        icon: 'language'
-      });
-      setLanguage(user.profile.language, true);
-    }
-
-    if (user.profile?.theme) {
-      // extract keys of usertheme and set them to the values of user.profile.theme
-      const newTheme = Object.keys(userTheme).map((key) => {
-        return {
-          key: key as keyof typeof userTheme,
-          value: user.profile.theme[key] as string
-        };
-      });
-      const diff = newTheme.filter(
-        (item) => userTheme[item.key] !== item.value
-      );
-      if (diff.length > 0) {
-        showNotification({
-          title: t`Theme changed`,
-          message: t`Your active theme has been changed to the one set in your profile`,
-          color: 'blue'
-        });
-        setTheme(newTheme);
-      }
-    }
-  }
-}
-
-export async function ensureCsrf() {
-  const cookie = getCsrfCookie();
-  if (cookie == undefined) {
-    await api.get(apiUrl(ApiEndpoints.auth_session)).catch(() => {});
-  }
-}
-
-export function handleReset(
-  navigate: NavigateFunction,
-  values: { email: string }
-) {
-  ensureCsrf();
-  api.post(apiUrl(ApiEndpoints.user_reset), values).then((val) => {
-    if (val.status === 200) {
-      notifications.show({
-        title: t`Mail delivery successful`,
-        message: t`Check your inbox for a reset link. This only works if you have an account. Check in spam too.`,
-        color: 'green',
-        autoClose: false
-      });
-      navigate('/login');
-    } else {
-      notifications.show({
-        title: t`Reset failed`,
-        message: t`Check your input and try again.`,
-        color: 'red'
-      });
-    }
-  });
-}
-
-export function handleMfaLogin(
-  navigate: NavigateFunction,
-  location: Location<any>,
-  values: { code: string },
-  setError: (message: string | undefined) => void
-) {
-  const { setAuthenticated, fetchUserState } = useUserState.getState();
-  const { setAuthContext } = useServerApiState.getState();
-
-  authApi(apiUrl(ApiEndpoints.auth_login_2fa), undefined, 'post', {
-    code: values.code
-  })
-    .then((response) => {
-      setError(undefined);
-      setAuthContext(response.data?.data);
-      setAuthenticated();
-
-      fetchUserState().finally(() => {
-        observeProfile();
-        followRedirect(navigate, location?.state);
-      });
-    })
-    .catch((err) => {
-      if (err?.response?.status == 409) {
-        notifications.show({
-          title: t`Already logged in`,
-          message: t`There is a conflicting session on the server for this browser. Please logout of that first.`,
-          color: 'red',
-          autoClose: false
-        });
-      } else {
-        const errors = err.response?.data?.errors;
-        let msg = t`An error occurred`;
-
-        if (errors) {
-          msg = errors.map((e: any) => e.message).join(', ');
-        }
-        setError(msg);
-      }
-    });
-}
-
-/**
- * Check login state, and redirect the user as required.
- *
- * The user may be logged in via the following methods:
- * - An existing API token is stored in the session
- * - An existing CSRF cookie is stored in the browser
- */
-export const checkLoginState = async (
-  navigate: any,
-  redirect?: any,
-  no_redirect?: boolean
-) => {
-  setApiDefaults();
-
-  if (redirect == '/') {
-    redirect = '/home';
-  }
-
-  const { isLoggedIn, fetchUserState } = useUserState.getState();
-
-  // Callback function when login is successful
-  const loginSuccess = () => {
-    showLoginNotification({
-      title: t`Logged In`,
-      message: t`Successfully logged in`
-    });
-
-    observeProfile();
-
-    fetchGlobalStates(navigate);
-    followRedirect(navigate, redirect);
-  };
-
-  if (isLoggedIn()) {
-    // Already logged in
-    loginSuccess();
-    return;
-  }
-
-  // Not yet logged in, but we might have a valid session cookie
-  // Attempt to login
-  await fetchUserState();
-
-  if (isLoggedIn()) {
-    loginSuccess();
-  } else if (!no_redirect) {
-    navigate('/login', { state: redirect });
-  }
-};
-
-/*
- * Return the value of the CSRF cookie, if available
- */
-export function getCsrfCookie() {
-  const cookieValue = document.cookie
-    .split('; ')
-    .find((row) => row.startsWith('csrftoken='))
-    ?.split('=')[1];
-
-  return cookieValue;
-}
-
-/*
- * Clear out the CSRF and session cookies (force session logout)
- */
-export function clearCsrfCookie() {
-  document.cookie =
-    'csrftoken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-}
-
-export async function ProviderLogin(
-  provider: AuthProvider,
-  process: 'login' | 'connect' = 'login'
-) {
-  await ensureCsrf();
-  post(generateUrl(apiUrl(ApiEndpoints.auth_provider_redirect)), {
-    provider: provider.id,
-    callback_url: generateUrl('/logged-in'),
-    process: process,
-    csrfmiddlewaretoken: getCsrfCookie()
-  });
-}
-
-/**
- * Makes an API request with session tokens using the provided URL, configuration, method, and data.
- *
- * @param url - The URL to which the request is sent.
- * @param config - Optional Axios request configuration.
- * @param method - The HTTP method to use for the request. Defaults to 'get'.
- * @param data - Optional data to be sent with the request.
- * @returns A promise that resolves to the response of the API request.
- */
-export function authApi(
-  url: string,
-  config: AxiosRequestConfig | undefined = undefined,
-  method: 'get' | 'patch' | 'post' | 'put' | 'delete' = 'get',
-  data?: any
-) {
-  const requestConfig = config || {};
-
-  // set method
-  requestConfig.method = method;
-
-  // set data
-  if (data) {
-    requestConfig.data = data;
-  }
-
-  // use normal api
-  return api(url, requestConfig);
-}
-
-export const getTotpSecret = async (setTotpQr: any) => {
-  await authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'get').catch(
-    (err) => {
-      if (err.status == 404 && err.response.data.meta.secret) {
-        setTotpQr(err.response.data.meta);
-      } else {
-        const msg = err.response.data.errors[0].message;
-        showNotification({
-          title: t`Failed to set up MFA`,
-          message: msg,
-          color: 'red'
-        });
-      }
-    }
-  );
-};
-
-export function handleVerifyTotp(
-  value: string,
-  navigate: NavigateFunction,
-  location: Location<any>
-) {
-  return () => {
-    authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'post', {
-      code: value
-    }).then(() => {
-      followRedirect(navigate, location?.state);
-    });
-  };
-}
-
-export function handlePasswordReset(
-  key: string | null,
-  password: string,
-  navigate: NavigateFunction
-) {
-  function success() {
-    notifications.show({
-      title: t`Password set`,
-      message: t`The password was set successfully. You can now login with your new password`,
-      color: 'green',
-      autoClose: false
-    });
-    navigate('/login');
-  }
-
-  function passwordError(values: any) {
-    notifications.show({
-      title: t`Reset failed`,
-      message: values?.errors.map((e: any) => e.message).join('\n'),
-      color: 'red'
-    });
-  }
-
-  // Set password with call to backend
-  api
-    .post(
-      apiUrl(ApiEndpoints.user_reset_set),
-      {
-        key: key,
-        password: password
-      },
-      { headers: { Authorization: '' } }
-    )
-    .then((val) => {
-      if (val.status === 200) {
-        success();
-      } else {
-        passwordError(val.data);
-      }
-    })
-    .catch((err) => {
-      if (err.response?.status === 400) {
-        passwordError(err.response.data);
-      } else if (err.response?.status === 401) {
-        success();
-      } else {
-        passwordError(err.response.data);
-      }
-    });
-}
-
-export function handleVerifyEmail(
-  key: string | undefined,
-  navigate: NavigateFunction
-) {
-  // Set password with call to backend
-  api
-    .post(apiUrl(ApiEndpoints.auth_email_verify), {
-      key: key
-    })
-    .then((val) => {
-      if (val.status === 200) {
-        navigate('/login');
-      }
-    });
-}
-
-export function handleChangePassword(
-  pwd1: string,
-  pwd2: string,
-  current: string,
-  navigate: NavigateFunction
-) {
-  const { clearUserState } = useUserState.getState();
-
-  function passwordError(values: any) {
-    let message: any =
-      values?.new_password ||
-      values?.new_password2 ||
-      values?.new_password1 ||
-      values?.current_password ||
-      values?.error ||
-      t`Password could not be changed`;
-
-    // If message is array
-    if (!Array.isArray(message)) {
-      message = [message];
-    }
-
-    message.forEach((msg: string) => {
-      notifications.show({
-        title: t`Error`,
-        message: msg,
-        color: 'red'
-      });
-    });
-  }
-
-  // check if passwords match
-  if (pwd1 !== pwd2) {
-    passwordError({ new_password2: t`The two password fields didn’t match` });
-    return;
-  }
-
-  // Set password with call to backend
-  api
-    .post(apiUrl(ApiEndpoints.auth_pwd_change), {
-      current_password: current,
-      new_password: pwd2
-    })
-    .then((val) => {
-      passwordError(val.data);
-    })
-    .catch((err) => {
-      if (err.status === 401) {
-        notifications.show({
-          title: t`Password Changed`,
-          message: t`The password was set successfully. You can now login with your new password`,
-          color: 'green',
-          autoClose: false
-        });
-        clearUserState();
-        clearCsrfCookie();
-        navigate('/login');
-      } else {
-        // compile errors
-        const errors: { [key: string]: string[] } = {};
-        for (const val of err.response.data.errors) {
-          if (!errors[val.param]) {
-            errors[val.param] = [];
-          }
-          errors[val.param].push(val.message);
-        }
-        passwordError(errors);
-      }
-    });
-}

package/src/functions/conversion.tsx

@@ -1,42 +0,0 @@
-/*
- * Determine if the provided value is "true":
- *
- * Many settings stored on the server are true/false,
- * but stored as string values, "true" / "false".
- *
- * This function provides a wrapper to ensure that the return type is boolean
- */
-export function isTrue(value: any): boolean {
-  if (value === true) {
-    return true;
-  }
-
-  if (value === false) {
-    return false;
-  }
-
-  const s = String(value).trim().toLowerCase();
-
-  return ['true', 'yes', '1', 'on', 't', 'y'].includes(s);
-}
-
-/*
- * Resolve a nested item in an object.
- * Returns the resolved item, if it exists.
- *
- * e.g. resolveItem(data, "sub.key.accessor")
- *
- * Allows for retrieval of nested items in an object.
- */
-export function resolveItem(obj: any, path: string): any {
-  const properties = path.split('.');
-  return properties.reduce((prev, curr) => prev?.[curr], obj);
-}
-
-export function identifierString(value: string): string {
-  // Convert an input string e.g. "Hello World" into a string that can be used as an identifier, e.g. "hello-world"
-
-  value = value || '-';
-
-  return value.toLowerCase().replace(/[^a-z0-9]/g, '-');
-}

package/src/functions/events.tsx

@@ -1,6 +0,0 @@
-// Helper function to cancel event propagation
-export function cancelEvent(event: any) {
-  event?.preventDefault();
-  event?.stopPropagation();
-  event?.nativeEvent?.stopImmediatePropagation();
-}