@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/hooks/useScrollRestoration.tsx

@@ -1,37 +0,0 @@
-/**
- * Currently, the react-router scrollrestoration component only works at the window level.
- * This implementation handle it at the element level, use it in the route that requires it.
- * Inspired from https://github.com/remix-run/react-router/pull/10468
- * Possible this won't work on a remix project.
- */
-
-import { useLayoutEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-const getScrollPosition = (key: string) => {
-  const pos = window.sessionStorage.getItem(key);
-  return Number(pos) || 0;
-};
-
-const setScrollPosition = (key: string, pos: number) => {
-  try {
-    window.sessionStorage.setItem(key, pos.toString());
-  } catch {
-    // eslint-disable-next-line no-console
-    console.log('Session storage full, can not save the scroll position');
-  }
-};
-
-// this currently can only handle one main container
-export const useScrollRestoration = (element: string = 'app-scrollct') => {
-  const key = `scroll-position-${useLocation().key}`;
-
-  //set scroll position on mount, save scroll position on unmount
-  useLayoutEffect(() => {
-    document.getElementById(element).scrollTo(0, getScrollPosition(key));
-
-    return () => {
-      setScrollPosition(key, document.getElementById(element).scrollTop ?? 0);
-    };
-  }, [element, key]);
-};

package/components/logins/Login.tsx

@@ -1,62 +0,0 @@
-import { Box, CircularProgress, Container, Stack, styled } from '@mui/material';
-import { useAppBanner } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import TextDivider from '@cccsaurora/howler-ui/components/elements/display/TextDivider';
-import { useContext } from 'react';
-import OAuthLogin from './auth/OAuthLogin';
-import UserPassLogin from './auth/UserPassLogin';
-
-const LogWrap = styled('div')(() => ({
-  marginTop: '2rem',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center'
-}));
-
-const InjectCss = styled(Stack)(({ theme }) => ({
-  '.login-stack': {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(-4)
-  },
-  '.MuiPaper-root': {
-    width: 'unset',
-    maxWidth: 'unset'
-  }
-}));
-
-const LoginScreen = () => {
-  const banner = useAppBanner();
-  const { config } = useContext(ApiConfigContext);
-  const loading = config.configuration === null;
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <InjectCss direction="column" alignItems="center">
-        <PageCardCentered>
-          <LogWrap>
-            {banner}
-            <Box m={2} />
-            {loading && (
-              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                <CircularProgress />
-              </div>
-            )}
-            {config.configuration?.auth?.internal?.enabled && (
-              <>
-                <UserPassLogin />
-                {config.configuration?.auth?.oauth_providers?.length > 0 && <TextDivider />}
-              </>
-            )}
-
-            {config.configuration?.auth?.oauth_providers?.length > 0 && (
-              <OAuthLogin providers={config.configuration?.auth?.oauth_providers} />
-            )}
-          </LogWrap>
-        </PageCardCentered>
-      </InjectCss>
-    </Container>
-  );
-};
-
-export default LoginScreen;

package/components/logins/auth/OAuthLogin.tsx

@@ -1,49 +0,0 @@
-import { Button, CircularProgress, Stack } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useEffect, useMemo, useState, type FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import useLogin from '../hooks/useLogin';
-
-type OAuthLoginProps = {
-  providers: string[];
-};
-
-const OAuthLogin: FC<OAuthLoginProps> = ({ providers }) => {
-  const [searchParams] = useSearchParams();
-  const { t } = useTranslation();
-  const { doOAuth } = useLogin();
-  const [buttonLoading, setButtonLoading] = useState(false);
-
-  const setNonce = useMyLocalStorageItem(StorageKey.LOGIN_NONCE)[1];
-
-  useEffect(() => {
-    if (searchParams.get('code')) {
-      setButtonLoading(true);
-      doOAuth().finally(() => setButtonLoading(false));
-    }
-  }, [doOAuth, searchParams]);
-
-  const nonce = useMemo(() => Math.pow(Date.now(), 1 + Math.random()).toString(16), []);
-
-  return (
-    <Stack spacing={1}>
-      {providers.map(item => (
-        <Button
-          fullWidth
-          key={item}
-          variant="contained"
-          color="primary"
-          disabled={buttonLoading}
-          href={api.auth.login.uri(new URLSearchParams({ oauth_provider: item, nonce }))}
-          onClick={() => setNonce(nonce)}
-          startIcon={buttonLoading && <CircularProgress size={24} />}
-        >{`${t('route.login.button.oauth')} ${item.replace(/_/g, ' ')}`}</Button>
-      ))}
-    </Stack>
-  );
-};
-
-export default OAuthLogin;

package/components/logins/auth/UserPassLogin.tsx

@@ -1,57 +0,0 @@
-import { Button, Stack, TextField } from '@mui/material';
-import type { FormEvent } from 'react';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import useLogin from '../hooks/useLogin';
-
-const UserPassLogin = () => {
-  const { t } = useTranslation();
-  const { doLogin } = useLogin();
-  const [loading, setLoading] = useState(false);
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-
-  const onSubmit = useCallback(
-    async (event: FormEvent) => {
-      // Not preventDefault here was causing this warning:
-      // Form submission canceled because the form is not connected
-      // The warning seems to go away is not storing user in state.
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (!loading) {
-        setLoading(true);
-        await doLogin({ user: username, password });
-        setLoading(false);
-      }
-    },
-    [loading, doLogin, username, password]
-  );
-
-  return (
-    <form onSubmit={onSubmit}>
-      <Stack spacing={1}>
-        <TextField
-          variant="outlined"
-          size="small"
-          label={t('page.login.username')}
-          disabled={loading}
-          onChange={event => setUsername(event.target.value)}
-        />
-        <TextField
-          variant="outlined"
-          size="small"
-          type="password"
-          label={t('page.login.password')}
-          disabled={loading}
-          onChange={event => setPassword(event.target.value)}
-        />
-        <Button type="submit" variant="contained" color="primary" disabled={loading}>
-          {t('page.login.button')}
-        </Button>
-      </Stack>
-    </form>
-  );
-};
-
-export default UserPassLogin;

package/components/logins/hooks/useLogin.tsx

@@ -1,101 +0,0 @@
-import api, { type HowlerResponse } from '@cccsaurora/howler-ui/api';
-import type { PostLoginBody } from '@cccsaurora/howler-ui/api/auth/login';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import LoginErrorModal from '@cccsaurora/howler-ui/components/elements/display/modals/LoginErrorModal';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import { useCallback, useContext, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import { saveLoginCredential } from '@cccsaurora/howler-ui/utils/localStorage';
-
-const useLogin = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [searchParams] = useSearchParams();
-  const { dispatchApi } = useMyApi();
-  const { setUser } = useAppUser<HowlerUser>();
-  const { showErrorMessage } = useMySnackbar();
-  const { t } = useTranslation();
-  const { showModal } = useContext(ModalContext);
-  const { get, remove } = useMyLocalStorage();
-
-  // Get user information
-  const getUser = useCallback(async () => {
-    try {
-      // We try and retrieve the user
-      const user = await dispatchApi(api.user.whoami.get(), { showError: false, throwError: true });
-
-      // If successful, continue
-      if (user) {
-        setUser({
-          ...user,
-          favourite_analytics: user.favourite_analytics ?? []
-        });
-
-        // Either navigate to the original URL, or just the home page
-        if (get(StorageKey.NEXT_LOCATION)) {
-          navigate(get<string>(StorageKey.NEXT_LOCATION) + (get<string>(StorageKey.NEXT_SEARCH) ?? ''));
-          remove(StorageKey.NEXT_LOCATION);
-          remove(StorageKey.NEXT_SEARCH);
-        } else if (location.pathname === '/login') {
-          navigate('/');
-        }
-        // If the user is null but there's no exception?
-      } else {
-        setUser(null);
-        showErrorMessage(t('user.error.failed'));
-      }
-    } catch (e) {
-      // There's some sort of error with the getting of the user - log them out or throw an error
-      if (e instanceof Error) {
-        if ((e.cause as HowlerResponse<any>)?.api_status_code === 403) {
-          navigate('/logout');
-        } else {
-          showModal(<LoginErrorModal error={e} />, {
-            disableClose: true
-          });
-        }
-      }
-    }
-  }, [dispatchApi, setUser, get, location.pathname, navigate, remove, showErrorMessage, t, showModal]);
-
-  // Generic login flow.
-  const doLogin = useCallback(
-    async (loginData: PostLoginBody) => {
-      // Provide the login data to the API for the server to authenticate
-      const userCredential = await dispatchApi(api.auth.login.post(loginData));
-
-      if (!userCredential) {
-        showErrorMessage(t('user.login.failed'));
-      } else if (saveLoginCredential(userCredential)) {
-        getUser();
-      }
-    },
-    [dispatchApi, getUser, showErrorMessage, t]
-  );
-
-  // OAuth login flow.
-  const doOAuth = useCallback(async () => {
-    const userCredential = await dispatchApi(api.auth.login.get(searchParams));
-    if (saveLoginCredential(userCredential)) {
-      getUser();
-    }
-  }, [dispatchApi, searchParams, getUser]);
-
-  // login service.
-  return useMemo(
-    () => ({
-      doLogin,
-      doOAuth,
-      getUser
-    }),
-    [doLogin, doOAuth, getUser]
-  );
-};
-
-export default useLogin;

package/components/routes/404.tsx

@@ -1,24 +0,0 @@
-import { LinkOff } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const NotFoundPage: FC = () => {
-  const { t } = useTranslation();
-  return (
-    <PageCenter width="75%">
-      <Box pt={6} textAlign="center" fontSize={200}>
-        <LinkOff color="secondary" fontSize="inherit" />
-      </Box>
-      <Box pb={2}>
-        <Typography variant="h2">{t('page.404.title')}</Typography>
-      </Box>
-      <Box>
-        <Typography variant="h5">{t('page.404.description')}</Typography>
-      </Box>
-    </PageCenter>
-  );
-};
-
-export default NotFoundPage;

package/components/routes/ErrorBoundary.tsx

@@ -1,44 +0,0 @@
-import { ExpandMore } from '@mui/icons-material';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
-import React, { type PropsWithChildren } from 'react';
-import ErrorOccured from './ErrorOccured';
-
-class ErrorBoundary extends React.Component<PropsWithChildren<{}>, { hasError: boolean; error: Error }> {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true, error: error };
-  }
-
-  componentDidCatch(error: Error): void {
-    this.setState({ hasError: true, error: error });
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <Box pt={6} textAlign="center" fontSize={20}>
-          <ErrorOccured />
-          <Accordion elevation={0}>
-            <AccordionSummary expandIcon={<ExpandMore />} aria-controls="panel1-content" id="panel1-header">
-              <Typography align="center" sx={{ width: '100%', fontSize: '1.2rem' }} variant="h5">
-                {this.state.error.message}
-              </Typography>
-            </AccordionSummary>
-            <AccordionDetails>
-              <code>
-                <Typography variant="h6">{this.state.error.stack}</Typography>
-              </code>
-            </AccordionDetails>
-          </Accordion>
-        </Box>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;

package/components/routes/ErrorOccured.tsx

@@ -1,28 +0,0 @@
-import { Error } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-
-const ErrorOccured: FC = () => {
-  const { t } = useTranslation();
-  const pluginStore = usePluginStore();
-  return (
-    <PageCenter width="75%">
-      <Box pt={6} textAlign="center" fontSize={200}>
-        <Error fontSize="inherit" style={{ color: '#f44336' }} />
-      </Box>
-      <Box pb={2}>
-        <Typography variant="h2">{t('page.error.title')}</Typography>
-      </Box>
-      <Box>
-        <Typography variant="h5">{t('page.error.description')}</Typography>
-      </Box>
-      {howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.support`))}
-    </PageCenter>
-  );
-};
-
-export default ErrorOccured;

package/components/routes/Logout.tsx

@@ -1,56 +0,0 @@
-import { Box, Container, Stack, Typography, styled } from '@mui/material';
-import { useAppBanner, useAppLayout } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';
-import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import type { FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const LogWrap = styled('div')(() => ({
-  marginTop: '2rem',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center'
-}));
-
-const InjectCss = styled(Stack)(({ theme }) => ({
-  '.login-stack': {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(-4)
-  },
-  '.MuiPaper-root': {
-    width: 'unset',
-    maxWidth: 'unset'
-  }
-}));
-
-const Logout: FC = () => {
-  const { t } = useTranslation();
-  const banner = useAppBanner();
-  const layout = useAppLayout();
-  const localStorage = useMyLocalStorage();
-
-  // hide topnav and leftnav on logout.
-  layout.hideMenus();
-
-  // There is probably more stuff to be done to properly logout a user.
-  setTimeout(() => {
-    localStorage.clear();
-    window.location.replace('/');
-  }, 2000);
-
-  return (
-    <Container component="main" maxWidth="xs">
-      <InjectCss direction="column" alignItems="center">
-        <PageCardCentered>
-          <LogWrap>
-            {banner}
-            <Box m={2} />
-            <Typography>{t('page.logout')}</Typography>
-          </LogWrap>
-        </PageCardCentered>
-      </InjectCss>
-    </Container>
-  );
-};
-
-export default Logout;