From 8199b17d86fc7bd0a4738d022f1d6d3fe657913f Mon Sep 17 00:00:00 2001 From: rhahao <26148770+rhahao@users.noreply.github.com> Date: Tue, 4 Feb 2025 06:05:24 +0300 Subject: [PATCH] feat(onboarding): update login layout --- src/components/divider/index.tsx | 3 + .../app_start/vip/email_auth/index.tsx | 93 ------------------- .../useEmailLinkAuth.tsx | 7 +- .../app_start/vip/oauth/button_base/index.tsx | 47 +++------- .../vip/oauth/button_base/index.types.ts | 9 ++ .../vip/oauth/button_base/useButtonBase.tsx | 21 +---- .../app_start/vip/oauth/email/index.tsx | 65 +++++++++---- .../email/useEmail.tsx} | 22 +---- src/features/app_start/vip/oauth/index.tsx | 33 ++++--- src/features/app_start/vip/signin/index.tsx | 6 +- src/features/app_start/vip/startup/index.tsx | 3 - .../app_start/vip/startup/useStartup.tsx | 9 +- src/locales/en/onboarding.json | 12 +-- src/services/recoil/app.ts | 5 - src/states/app.ts | 5 - 15 files changed, 114 insertions(+), 226 deletions(-) delete mode 100644 src/features/app_start/vip/email_auth/index.tsx rename src/features/app_start/vip/{email_auth/useEmailAuth.tsx => oauth/email/useEmail.tsx} (80%) diff --git a/src/components/divider/index.tsx b/src/components/divider/index.tsx index fabfb5ea58..3f123bc424 100644 --- a/src/components/divider/index.tsx +++ b/src/components/divider/index.tsx @@ -38,6 +38,9 @@ const Divider: FC = ({ 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 deleted file mode 100644 index f04980029b..0000000000 --- a/src/features/app_start/vip/email_auth/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Badge, Box, Link } from '@mui/material'; -import { IconError, IconLoading } from '@icons/index'; -import { useAppTranslation } from '@hooks/index'; -import useEmailAuth from './useEmailAuth'; -import Button from '@components/button'; -import InfoMessage from '@components/info-message'; -import TextField from '@components/textfield'; -import Typography from '@components/typography'; -import PageHeader from '@features/app_start/shared/page_header'; - -const EmailAuth = () => { - const { t } = useAppTranslation(); - - const { - isProcessing, - setUserTmpEmail, - handleProviderSignIn, - handleSendLink, - userTmpEmail, - hideMessage, - message, - title, - variant, - devLink, - } = useEmailAuth(); - - return ( - - - - - - setUserTmpEmail(e.target.value)} - sx={{ width: '100%', color: 'var(--black)' }} - className="h4" - /> - - {devLink.length > 0 && ( - - - - - Click{' '} - - here - {' '} - to continue - - - - )} - - - - } - messageHeader={title} - message={message} - onClose={hideMessage} - /> - - - - ); -}; - -export default EmailAuth; diff --git a/src/features/app_start/vip/email_link_authentication/useEmailLinkAuth.tsx b/src/features/app_start/vip/email_link_authentication/useEmailLinkAuth.tsx index 44967e6687..97cbbd1e99 100644 --- 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 index 83cda6bcfb..b51ec2376b 100644 --- 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 ( + + {devLink.length > 0 && ( + + + + + Click{' '} + + here + {' '} + to continue + + + + )} + ); }; diff --git a/src/features/app_start/vip/email_auth/useEmailAuth.tsx b/src/features/app_start/vip/oauth/email/useEmail.tsx similarity index 80% rename from src/features/app_start/vip/email_auth/useEmailAuth.tsx rename to src/features/app_start/vip/oauth/email/useEmail.tsx index 10fd74783a..39c7990e65 100644 --- a/src/features/app_start/vip/email_auth/useEmailAuth.tsx +++ b/src/features/app_start/vip/oauth/email/useEmail.tsx @@ -1,29 +1,20 @@ import { useState } from 'react'; -import { - displayOnboardingFeedback, - setIsEmailAuth, - setIsUserSignIn, -} from '@services/recoil/app'; +import { displayOnboardingFeedback } from '@services/recoil/app'; import useFeedback from '@features/app_start/shared/hooks/useFeedback'; import { useAppTranslation } from '@hooks/index'; import { isEmailValid } from '@services/validator/index'; import { apiRequestPasswordlesssLink } from '@services/api/user'; import { getMessageByCode } from '@services/i18n/translation'; -const useEmailAuth = () => { +const useOAuthEmail = () => { const { t } = useAppTranslation(); - const { hideMessage, message, showMessage, title, variant } = useFeedback(); + const { hideMessage, showMessage } = useFeedback(); const [isProcessing, setIsProcessing] = useState(false); const [userTmpEmail, setUserTmpEmail] = useState(''); const [devLink, setDevLink] = useState(''); - const handleProviderSignIn = () => { - setIsUserSignIn(true); - setIsEmailAuth(false); - }; - const handleSendLink = async () => { if (isProcessing) return; @@ -76,15 +67,10 @@ const useEmailAuth = () => { return { isProcessing, setUserTmpEmail, - handleProviderSignIn, handleSendLink, userTmpEmail, - title, - message, - hideMessage, - variant, devLink, }; }; -export default useEmailAuth; +export default useOAuthEmail; diff --git a/src/features/app_start/vip/oauth/index.tsx b/src/features/app_start/vip/oauth/index.tsx index d6f24af055..4f7a615c20 100644 --- a/src/features/app_start/vip/oauth/index.tsx +++ b/src/features/app_start/vip/oauth/index.tsx @@ -1,22 +1,31 @@ -import Box from '@mui/material/Box'; +import { Box, Stack } from '@mui/material'; +import { useAppTranslation } from '@hooks/index'; +import Divider from '@components/divider'; import OAuthGoogle from './google'; import OAuthYahoo from './yahoo'; import OAuthEmail from './email'; +import Typography from '@components/typography'; const OAuth = () => { + const { t } = useAppTranslation(); + return ( - - - + <> - + + + + + {t('tr_orLabel')} + + + + + + + + + ); }; diff --git a/src/features/app_start/vip/signin/index.tsx b/src/features/app_start/vip/signin/index.tsx index b7e8dfd9f5..736c912f5d 100644 --- a/src/features/app_start/vip/signin/index.tsx +++ b/src/features/app_start/vip/signin/index.tsx @@ -1,4 +1,4 @@ -import { Box } from '@mui/material'; +import { Box, Stack } from '@mui/material'; import { IconError } from '@icons/index'; import { useAppTranslation } from '@hooks/index'; import useSignin from './useSignin'; @@ -29,9 +29,9 @@ const Signin = () => { gap: '24px', }} > - + - + { const { isUserSignIn, isUserMfaVerify, - isEmailAuth, isEmailLinkAuth, isEncryptionCodeOpen, isUserAccountCreated, @@ -37,7 +35,6 @@ const VipStartup = () => { {isUserMfaVerify && } {isUserAccountCreated && } {isCongCreate && } - {isEmailAuth && } {isEmailLinkAuth && } {!isCongCreate && isEncryptionCodeOpen && ( diff --git a/src/features/app_start/vip/startup/useStartup.tsx b/src/features/app_start/vip/startup/useStartup.tsx index 2f1a97e0f2..65e98d1b1c 100644 --- a/src/features/app_start/vip/startup/useStartup.tsx +++ b/src/features/app_start/vip/startup/useStartup.tsx @@ -6,7 +6,6 @@ import { congregationCreateStepState, cookiesConsentState, isCongAccountCreateState, - isEmailAuthState, isEmailLinkAuthenticateState, isEncryptionCodeOpenState, isUserAccountCreatedState, @@ -47,7 +46,6 @@ const useStartup = () => { const setCongID = useSetRecoilState(congIDState); const isEmailLinkAuth = useRecoilValue(isEmailLinkAuthenticateState); - const isEmailAuth = useRecoilValue(isEmailAuthState); const isUserMfaVerify = useRecoilValue(isUserMfaVerifyState); const isUserAccountCreated = useRecoilValue(isUserAccountCreatedState); const isOfflineOverride = useRecoilValue(offlineOverrideState); @@ -205,10 +203,14 @@ const useStartup = () => { const checkLink = async () => { const value = searchParams.get('code') !== null; await setIsEmailLinkAuthenticate(value); + + if (value) { + setIsUserSignIn(false); + } }; checkLink(); - }, [searchParams]); + }, [searchParams, setIsUserSignIn]); useEffect(() => { const checkCookiesConsent = async () => { @@ -228,7 +230,6 @@ const useStartup = () => { }, [setIsUserSignIn, cookiesConsent, isStart, runStartupCheck]); return { - isEmailAuth, isUserSignIn, isUserMfaVerify, isUserAccountCreated, diff --git a/src/locales/en/onboarding.json b/src/locales/en/onboarding.json index 843385fa85..2b7d63681a 100644 --- a/src/locales/en/onboarding.json +++ b/src/locales/en/onboarding.json @@ -16,9 +16,8 @@ "tr_createCongregationAccount": "Create congregation", "tr_unauthorizedRole": "

Your account is all set! To access the Organized app, please ask your congregation’s app administrator to give you permissions and refresh the page in 5 minutes.

Elders can contact us at support@organized-app.com if they need assistance.

", "tr_oauthAccept": "

Learn more about out Terms of Use and Privacy Policy.

", - "tr_signInDesc": "Choose how you want to log in", + "tr_signInDesc": "Use your email to receive a one-time login link or log in with one of the listed providers. If you don't have an account yet, it will be created automatically.", "tr_emailAuth": "Email authentication", - "tr_emailAuthDesc": "Enter your email to get a link for Organized authentication", "tr_emailAuthDescComplete": "You have successfully logged in with your email. Now you can access the app.", "tr_emailAuthSentHeader": "Link has been sent", "tr_emailAuthSent": "Please check your email inbox. If it’s not there, look in your spam folder or request the link again.", @@ -35,7 +34,7 @@ "tr_accountBaptizedBrother": "Baptized brother", "tr_connectCongregation": "Connect to your congregation", "tr_invitationCode": "Invitation code", - "tr_orLabel": "or", + "tr_orLabel": "or log in with", "tr_importantNotice": "Important notice", "tr_registrationSuccess": "Thanks for registration", "tr_congregationCreateLabel": "Your congregation isn’t registered in Organized yet?", @@ -60,11 +59,8 @@ "tr_encryptionCodeInvalid": "The encryption code you provided is incorrect", "tr_activate": "Activate", "tr_next": "Next", - "tr_oauthGoogle": "Continue with Google", - "tr_oauthMicrosoft": "Continue with Microsoft", - "tr_oauthGithub": "Continue with GitHub", - "tr_oauthYahoo": "Continue with Yahoo", - "tr_oauthEmail": "Continue with Email", + "tr_oauthGoogle": "Google", + "tr_oauthYahoo": "Yahoo", "tr_sendLink": "Send Link", "tr_emailNotSupported": "Sorry, this email is invalid or not supported", "tr_selectCountry": "Country", diff --git a/src/services/recoil/app.ts b/src/services/recoil/app.ts index 3da9884381..f93cd87f80 100644 --- a/src/services/recoil/app.ts +++ b/src/services/recoil/app.ts @@ -12,7 +12,6 @@ import { congIDState, isAccountChooseState, isAppLoadState, - isEmailAuthState, isEmailBlockedState, isOnlineState, showReloadState, @@ -152,10 +151,6 @@ export const setOfflineOverride = async (value) => { await promiseSetRecoil(offlineOverrideState, value); }; -export const setIsEmailAuth = async (value) => { - await promiseSetRecoil(isEmailAuthState, value); -}; - export const setEmailBlocked = async (value) => { await promiseSetRecoil(isEmailBlockedState, value); }; diff --git a/src/states/app.ts b/src/states/app.ts index a0014d9e95..7f85413a3b 100644 --- a/src/states/app.ts +++ b/src/states/app.ts @@ -237,11 +237,6 @@ export const isCongPersonAddState = atom({ default: false, }); -export const isEmailAuthState = atom({ - key: 'isEmailAuth', - default: false, -}); - export const isAuthProcessingState = atom({ key: 'isAuthProcessing', default: false,