@cccsaurora/howler-ui 2.14.0-dev.263 → 2.14.0-dev.265

package/components/hooks/useScrollRestoration.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,56 @@
+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;