feat(onboarding): update login layout

sws2apps · Feb 4, 2025 · 8199b17 · 8199b17
1 parent a1a51dd
commit 8199b17
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 226 deletions.
diff --git a/src/components/divider/index.tsx b/src/components/divider/index.tsx
@@ -38,6 +38,9 @@ const Divider: FC<CustomDividerProps> = ({
               borderColor: color,
               borderRightWidth: height,
               borderBottomWidth: height,
+              '::before, ::after': {
+                borderTop: `1px solid ${color}`,
+              },
               ...sx,
             }
       }

diff --git a/src/features/app_start/vip/email_auth/index.tsx b/src/features/app_start/vip/email_auth/index.tsx
diff --git a/src/features/app_start/vip/email_link_authentication/useEmailLinkAuth.tsx b/src/features/app_start/vip/email_link_authentication/useEmailLinkAuth.tsx
@@ -9,7 +9,6 @@ import { apiUpdatePasswordlessInfo } from '@services/api/user';
 import {
   displayOnboardingFeedback,
   setIsCongAccountCreate,
-  setIsEmailAuth,
   setIsEmailLinkAuthenticate,
   setIsEncryptionCodeOpen,
   setIsUnauthorizedRole,
@@ -49,9 +48,8 @@ const useEmailLinkAuth = () => {
   const code = searchParams.get('code');
 
   const handleReturn = async () => {
-    await setIsUserSignIn(false);
     await setIsEmailLinkAuthenticate(false);
-    await setIsEmailAuth(true);
+    await setIsUserSignIn(true);
     setSearchParams('');
   };
 
@@ -61,7 +59,7 @@ const useEmailLinkAuth = () => {
   ) => {
     setSearchParams('');
     setIsEmailLinkAuthenticate(false);
-    setIsEmailAuth(false);
+    setIsUserSignIn(false);
 
     if (data.app_settings) {
       await dbAppSettingsUpdate({
@@ -193,7 +191,6 @@ const useEmailLinkAuth = () => {
   };
 
   useEffect(() => {
-    setIsEmailAuth(false);
     setIsUserSignIn(false);
     setIsCongAccountCreate(false);
   }, []);

diff --git a/src/features/app_start/vip/oauth/button_base/index.tsx b/src/features/app_start/vip/oauth/button_base/index.tsx
@@ -1,39 +1,27 @@
-import { ReactElement } from 'react';
-import { AuthProvider } from 'firebase/auth';
 import { Box, Button } from '@mui/material';
 import { IconLoading } from '@icons/index';
-import Typography from '@components/typography';
+import { OAuthButtonBaseProps } from './index.types';
 import useButtonBase from './useButtonBase';
+import Typography from '@components/typography';
 
-const OAuthButtonBase = ({
-  logo,
-  text,
-  provider,
-  isEmail,
-}: {
-  logo: ReactElement;
-  text: string;
-  provider?: AuthProvider;
-  isEmail?: boolean;
-}) => {
-  const { handleAction, isAuthProcessing, currentProvider } = useButtonBase({
-    provider,
-    isEmail,
-  });
+const OAuthButtonBase = (props: OAuthButtonBaseProps) => {
+  const { logo, text, provider } = props;
+
+  const { isAuthProcessing, currentProvider, handleOAuthAction } =
+    useButtonBase(props);
 
   return (
     <Button
       disableRipple
+      fullWidth
       sx={{
         display: 'flex',
         minHeight: '44px',
-        padding: '4px var(--radius-none) 4px 8px',
+        padding: '12px',
         alignItems: 'center',
-        gap: 'var(--radius-none)',
+        gap: '8px',
         border: '1px solid var(--accent-350)',
         borderRadius: 'var(--radius-l)',
-        width: '100%',
-        textAlign: 'left',
         '&:hover': {
           border: '1px solid var(--accent-main)',
           background: 'var(--accent-100)',
@@ -45,22 +33,11 @@ const OAuthButtonBase = ({
         '&:active': {
           background: 'var(--accent-200)',
         },
-        '& svg': {
-          padding: '0px 8px',
-          boxSizing: 'content-box',
-        },
       }}
-      onClick={handleAction}
+      onClick={handleOAuthAction}
     >
       {logo}
-      <Box
-        sx={{
-          display: 'flex',
-          flex: '1 0 0',
-          padding: '4px 8px',
-          alignItems: 'center',
-        }}
-      >
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Typography className="h4" color="var(--black)">
           {text}
         </Typography>

diff --git a/src/features/app_start/vip/oauth/button_base/index.types.ts b/src/features/app_start/vip/oauth/button_base/index.types.ts
@@ -1,3 +1,12 @@
+import { ReactElement } from 'react';
+import { AuthProvider } from 'firebase/auth';
+
+export type OAuthButtonBaseProps = {
+  logo: ReactElement;
+  text: string;
+  provider?: AuthProvider;
+};
+
 export type NextStepType = {
   createCongregation?: boolean;
   unauthorized?: boolean;

diff --git a/src/features/app_start/vip/oauth/button_base/useButtonBase.tsx b/src/features/app_start/vip/oauth/button_base/useButtonBase.tsx
@@ -4,7 +4,6 @@ import {
   congregationCreateStepState,
   currentProviderState,
   isAuthProcessingState,
-  isEmailAuthState,
   isEncryptionCodeOpenState,
   isUnauthorizedRoleState,
   isUserAccountCreatedState,
@@ -19,27 +18,26 @@ import { getMessageByCode } from '@services/i18n/translation';
 import { apiSendAuthorization } from '@services/api/user';
 import { dbAppSettingsUpdate } from '@services/dexie/settings';
 import { APP_ROLES, VIP_ROLES } from '@constants/index';
-import { NextStepType } from './index.types';
+import { NextStepType, OAuthButtonBaseProps } from './index.types';
 import { UserLoginResponseType } from '@definition/api';
 import { settingsState } from '@states/settings';
 import useAppTranslation from '@hooks/useAppTranslation';
 import useFeedback from '@features/app_start/shared/hooks/useFeedback';
 
-const useButtonBase = ({ provider, isEmail }) => {
+const useButtonBase = ({ provider }: OAuthButtonBaseProps) => {
   const { t } = useAppTranslation();
 
   const { showMessage, hideMessage } = useFeedback();
 
   const [isAuthProcessing, setIsAuthProcessing] = useRecoilState(
     isAuthProcessingState
   );
-  const [isUserSignIn, setIsUserSignIn] = useRecoilState(isUserSignInState);
 
+  const setIsUserSignIn = useSetRecoilState(isUserSignInState);
   const setUserMfaVerify = useSetRecoilState(isUserMfaVerifyState);
   const setIsUserAccountCreated = useSetRecoilState(isUserAccountCreatedState);
   const setIsUnauthorizedRole = useSetRecoilState(isUnauthorizedRoleState);
   const setIsEncryptionCodeOpen = useSetRecoilState(isEncryptionCodeOpenState);
-  const setIsEmailAuth = useSetRecoilState(isEmailAuthState);
   const setTokenDev = useSetRecoilState(tokenDevState);
   const setCurrentStep = useSetRecoilState(congregationCreateStepState);
   const setCongID = useSetRecoilState(congIDState);
@@ -239,18 +237,7 @@ const useButtonBase = ({ provider, isEmail }) => {
     }
   };
 
-  const handleEmailAuth = () => {
-    setIsEmailAuth(true);
-    if (isUserSignIn) setIsUserSignIn(false);
-  };
-
-  const handleAction = () => {
-    if (isEmail) handleEmailAuth();
-
-    if (!isEmail) handleOAuthAction();
-  };
-
-  return { handleAction, isAuthProcessing, currentProvider };
+  return { handleOAuthAction, isAuthProcessing, currentProvider };
 };
 
 export default useButtonBase;
diff --git a/src/features/app_start/vip/oauth/email/index.tsx b/src/features/app_start/vip/oauth/email/index.tsx
@@ -1,28 +1,57 @@
-import { Box } from '@mui/material';
-import { IconMail } from '@icons/index';
-import Typography from '@components/typography';
-import OAuthButtonBase from '../button_base';
+import { Badge, Box, Link, Stack } from '@mui/material';
+import { IconLoading } from '@icons/index';
 import { useAppTranslation } from '@hooks/index';
+import useOAuthEmail from './useEmail';
+import Button from '@components/button';
+import TextField from '@components/textfield';
+import Typography from '@components/typography';
 
 const OAuthEmail = () => {
   const { t } = useAppTranslation();
 
+  const {
+    userTmpEmail,
+    setUserTmpEmail,
+    devLink,
+    handleSendLink,
+    isProcessing,
+  } = useOAuthEmail();
+
   return (
-    <Box
-      sx={{
-        marginTop: { mobile: '0px', laptop: '8px' },
-        display: 'flex',
-        flexDirection: 'column',
-        gap: { mobile: '16px', laptop: '32px' },
-      }}
-    >
-      <Typography sx={{ textAlign: 'center' }}>{t('tr_orLabel')}</Typography>
-      <OAuthButtonBase
-        isEmail={true}
-        text={t('tr_oauthEmail')}
-        logo={<IconMail color="var(--black)" />}
+    <Stack spacing="16px">
+      <TextField
+        label={t('tr_email')}
+        value={userTmpEmail}
+        onChange={(e) => setUserTmpEmail(e.target.value)}
+        sx={{ width: '100%', color: 'var(--black)' }}
+        className="h4"
       />
-    </Box>
+
+      <Button
+        variant="main"
+        disabled={userTmpEmail.length === 0}
+        onClick={handleSendLink}
+        sx={{ padding: '8px 32px', minHeight: '44px' }}
+        startIcon={isProcessing ? <IconLoading width={22} height={22} /> : null}
+      >
+        {t('tr_sendLink')}
+      </Button>
+
+      {devLink.length > 0 && (
+        <Box sx={{ display: 'flex', gap: '20px' }}>
+          <Badge badgeContent={'dev'} color="error" />
+          <Box>
+            <Typography>
+              Click{' '}
+              <Link href={devLink} underline="none">
+                here
+              </Link>{' '}
+              to continue
+            </Typography>
+          </Box>
+        </Box>
+      )}
+    </Stack>
   );
 };