Registration design changes

package.json

@@ -72,6 +72,7 @@
         "json-refs": "^3.0.15",
         "lodash": "^4.17.21",
         "logrocket": "^8.1.2",
+        "logrocket-react": "^5.0.1",
         "luxon": "^3.4.3",
         "material-ui-popup-state": "^5.0.10",
         "mnemonist": "^0.39.8",

src/app/guards/LegalGuard.tsx

@@ -3,6 +3,7 @@ import ClickToAccept from 'directives/ClickToAccept';
 import FullPageWrapper from 'app/FullPageWrapper';
 import { FormattedMessage } from 'react-intl';
 import { BaseComponentProps } from 'types';
+import { Box } from '@mui/material';
 import useDirectiveGuard from './hooks';
 
 const SELECTED_DIRECTIVE = 'clickToAccept';
@@ -37,11 +38,17 @@ function LegalGuard({ children }: BaseComponentProps) {
     if (status !== 'fulfilled') {
         return (
             <FullPageWrapper>
-                <ClickToAccept
-                    directive={directive}
-                    status={status}
-                    mutate={mutate}
-                />
+                <Box
+                    sx={{
+                        p: 2,
+                    }}
+                >
+                    <ClickToAccept
+                        directive={directive}
+                        status={status}
+                        mutate={mutate}
+                    />
+                </Box>
             </FullPageWrapper>
         );
     } else {

src/app/guards/OnboardGuard.tsx

@@ -5,6 +5,8 @@ import { createOnboardingStore } from 'directives/Onboard/Store/create';
 import { useMemo } from 'react';
 import { OnboardingStoreNames } from 'stores/names';
 import { BaseComponentProps } from 'types';
+import CustomerQuote from 'directives/Onboard/CustomerQuote';
+import { Grid } from '@mui/material';
 import useDirectiveGuard from './hooks';
 
 const SELECTED_DIRECTIVE = 'betaOnboard';
@@ -34,14 +36,26 @@ function OnboardGuard({ children, forceDisplay, grantsMutate }: Props) {
         return null;
     } else if (forceDisplay || status !== 'fulfilled') {
         return (
-            <FullPageWrapper fullWidth={true}>
-                <LocalZustandProvider createStore={localStore}>
-                    <BetaOnboard
-                        directive={directive}
-                        status={status}
-                        mutate={grantsMutate}
-                    />
-                </LocalZustandProvider>
+            <FullPageWrapper fullWidth>
+                <Grid
+                    container
+                    sx={{
+                        p: 2,
+                    }}
+                >
+                    <Grid item xs={0} md={6}>
+                        <CustomerQuote />
+                    </Grid>
+                    <Grid item xs={12} md={6}>
+                        <LocalZustandProvider createStore={localStore}>
+                            <BetaOnboard
+                                directive={directive}
+                                status={status}
+                                mutate={grantsMutate}
+                            />
+                        </LocalZustandProvider>
+                    </Grid>
+                </Grid>
             </FullPageWrapper>
         );
     } else {

src/app/guards/RegistrationProgress.tsx

@@ -0,0 +1,37 @@
+import { LinearProgress, Stack, Typography } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { RegistrationProgressProps } from './types';
+
+const totalSteps = 2;
+
+function RegistrationProgress({
+    loading,
+    status,
+    step,
+}: RegistrationProgressProps) {
+    const intl = useIntl();
+
+    if (status === 'outdated') {
+        return null;
+    }
+
+    return (
+        <Stack sx={{ pb: 1, width: '100%' }}>
+            <Typography>
+                {intl.formatMessage(
+                    { id: 'login.progress.indicator' },
+                    {
+                        step,
+                        totalSteps,
+                    }
+                )}
+            </Typography>
+            <LinearProgress
+                variant={loading ? 'indeterminate' : 'determinate'}
+                value={Math.floor(((step - 1) / totalSteps) * 100)}
+            />
+        </Stack>
+    );
+}
+
+export default RegistrationProgress;

src/app/guards/types.ts

@@ -0,0 +1,7 @@
+import { DirectiveStates } from 'directives/types';
+
+export interface RegistrationProgressProps {
+    status: DirectiveStates;
+    step: 1 | 2;
+    loading?: boolean;
+}

src/components/collection/Selector/List/Header/Toggle/MenuContent.tsx

@@ -18,6 +18,11 @@ interface Props {
     updateScope: (event: SyntheticEvent, newScope: Scopes) => void;
 }
 
+// TODO (accessibility) this menu is not acessible and we have some options
+//  - wait for https://github.com/mui/material-ui/issues/43330 to be fixed
+//  - Write some tricky CSS in the parent that allows things to look the way they do but have all the items have a `MenuItem` around them
+//  - fork MUI's Menu just for these and disable the up/down keyboard interactions
+//  - Overhaul the entire approach to this menu and redesign it to somehow not need menu... let's not do this one
 function ScopeMenuContent({
     closeMenu,
     initialScope,

src/components/login/Providers/buttons/SSO.tsx

@@ -1,37 +1,46 @@
-import { Box, Button, useTheme } from '@mui/material';
+import { Button, Typography, useTheme } from '@mui/material';
 import { loginButtonStyling } from 'context/Theme';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { unauthenticatedRoutes } from 'app/routes';
-import { Lock } from 'iconoir-react';
-import MessageWithLink from 'components/content/MessageWithLink';
+import { Lock, OpenNewWindow } from 'iconoir-react';
+import { HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { LoginProps } from '../types';
 
 function SSOButton({ isRegister }: LoginProps) {
+    const intl = useIntl();
     const theme = useTheme();
 
+    let href: string = unauthenticatedRoutes.sso.login.fullPath;
+    let endIcon: ReactNode | undefined;
+    let startIcon: ReactNode | undefined = <Lock />;
+    let labelMessageId: string = 'cta.login.sso';
+    let target: HTMLAttributeAnchorTarget = '_self';
     if (isRegister) {
-        return (
-            <Box
-                sx={{
-                    ...loginButtonStyling[theme.palette.mode],
-                    borderWidth: 0,
-                }}
-            >
-                <MessageWithLink messageID="login.sso.register.message.help" />
-            </Box>
+        endIcon = (
+            <Typography>
+                <OpenNewWindow />
+            </Typography>
         );
+        href = intl.formatMessage({
+            id: 'login.sso.register.message.help.docPath',
+        });
+        startIcon = undefined;
+        labelMessageId = 'login.sso.register.message.help';
+        target = '_blank';
     }
 
     return (
         <Button
+            endIcon={endIcon}
             fullWidth
-            startIcon={<Lock />}
-            sx={loginButtonStyling[theme.palette.mode]}
+            href={href}
             size="large"
+            startIcon={startIcon}
+            target={target}
             variant="text"
-            href={unauthenticatedRoutes.sso.login.fullPath}
+            sx={loginButtonStyling[theme.palette.mode]}
         >
-            <FormattedMessage id="cta.login.sso" />
+            {intl.formatMessage({ id: labelMessageId })}
         </Button>
     );
 }

src/components/login/Providers/index.tsx

@@ -1,5 +1,5 @@
 import { Divider, Stack } from '@mui/material';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { getLoginSettings } from 'utils/env-utils';
 import LoginButton from './LoginButton';
 import { LoginProvidersProps } from './types';
@@ -13,6 +13,7 @@ function LoginProviders({
     isRegister,
     providers = ['google', 'github', 'azure'],
 }: LoginProvidersProps) {
+    const intl = useIntl();
     const { login } = useLoginHandler(grantToken, isRegister);
 
     return (
@@ -35,7 +36,11 @@ function LoginProviders({
             {loginSettings.showSSO ? (
                 <>
                     <Divider flexItem>
-                        <FormattedMessage id="login.separator" />
+                        {intl.formatMessage({
+                            id: isRegister
+                                ? 'login.sso.separator'
+                                : 'login.separator',
+                        })}
                     </Divider>
                     <SSOButton isRegister={isRegister} />
                 </>

src/components/login/SSO/index.tsx

@@ -10,7 +10,7 @@ import { supabaseClient } from 'context/GlobalProviders';
 import React, { useState } from 'react';
 import AlertBox from 'components/shared/AlertBox';
 import { useSnackbar, VariantType } from 'notistack';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useNavigate } from 'react-router';
 
 import { hasLength } from 'utils/misc-utils';
@@ -109,14 +109,14 @@ const SSOForm = ({ grantToken }: DefaultLoginProps) => {
     return (
         <Stack direction="column" spacing={3} style={{ width: '100%' }}>
             <Typography>
-                <FormattedMessage id="login.sso.header" />
+                {intl.formatMessage({ id: 'login.sso.header' })}
             </Typography>
             {submitError ? (
                 <Box>
                     <AlertBox severity="error" short>
                         <Typography>{submitError}</Typography>
                         <Typography>
-                            <FormattedMessage id="error.tryAgain" />
+                            {intl.formatMessage({ id: 'error.tryAgain' })}
                         </Typography>
                     </AlertBox>
                 </Box>
@@ -126,11 +126,11 @@ const SSOForm = ({ grantToken }: DefaultLoginProps) => {
                 <form
                     onSubmit={handlers.submit}
                     style={{
-                        width: '100%',
+                        alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center',
                         justifyContent: 'center',
+                        width: '100%',
                     }}
                 >
                     <TextField
@@ -154,11 +154,13 @@ const SSOForm = ({ grantToken }: DefaultLoginProps) => {
 
                     <Button
                         disabled={loading}
+                        fullWidth
                         name="SSO Sign In"
+                        size="large"
                         type="submit"
                         sx={{ mt: 3 }}
                     >
-                        <FormattedMessage id="cta.login.sso" />
+                        {intl.formatMessage({ id: 'cta.login.sso' })}
                     </Button>
                 </form>
             </Box>

src/context/Theme.tsx

@@ -328,6 +328,20 @@ export const editorToolBarSx: SxProps<Theme> = {
     alignItems: 'center',
 };
 
+export const hiddenButAccessibleInput: SxProps<Theme> = {
+    position: 'fixed',
+    opacity: 0,
+    pointerEvents: 'none',
+};
+
+export const hiddenButAccessibleRadio: SxProps<Theme> = {
+    '& .MuiRadio-root, & .MuiRadio-root input': {
+        position: 'fixed',
+        opacity: 0,
+        pointerEvents: 'none',
+    },
+};
+
 export const defaultBoxShadow =
     'rgb(50 50 93 / 7%) 0px 3px 6px -1px, rgb(0 0 0 / 10%) 0px -2px 4px -1px, rgb(0 0 0 / 10%) 0px 2px 4px -1px';
 

src/directives/AcceptGrant.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, LinearProgress, Stack, Typography } from '@mui/material';
 import {
     PostgrestError,
     PostgrestSingleResponse,
@@ -103,8 +103,11 @@ function AcceptGrant({
         }
     };
 
+    // TODO (RegistrationProgress) get this wired up to know what step it is and use the RegistrationProgress component
     return (
         <Stack spacing={2}>
+            {saving ? <LinearProgress variant="indeterminate" /> : null}
+
             {serverError ? (
                 <AlertBox
                     severity="error"

src/directives/Actions.tsx

@@ -0,0 +1,41 @@
+import { Button, Toolbar } from '@mui/material';
+import SafeLoadingButton from 'components/SafeLoadingButton';
+import { supabaseClient } from 'context/GlobalProviders';
+import { useIntl } from 'react-intl';
+import { ActionsProps } from './types';
+
+const Actions = ({ primaryMessageId, saving }: ActionsProps) => {
+    const intl = useIntl();
+
+    return (
+        <Toolbar
+            disableGutters
+            sx={{
+                justifyContent: 'space-between',
+                width: '100%',
+            }}
+        >
+            <Button
+                disabled={saving}
+                variant="outlined"
+                onClick={async () => {
+                    await supabaseClient.auth.signOut();
+                }}
+            >
+                {intl.formatMessage({ id: 'cta.cancel' })}
+            </Button>
+            <SafeLoadingButton
+                type="submit"
+                variant="contained"
+                loading={saving}
+                disabled={saving}
+            >
+                {intl.formatMessage({
+                    id: primaryMessageId,
+                })}
+            </SafeLoadingButton>
+        </Toolbar>
+    );
+};
+
+export default Actions;