-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #40690 from Expensify/revert-30849-getting_two_mag…
…ic_codes_upon_signing_once_30181 [CP Staging] Revert "Fixed getting two magic codes upon signing in once" (cherry picked from commit c57f281)
- Loading branch information
Showing
3 changed files
with
70 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,67 +1,100 @@ | ||
import React from 'react'; | ||
import {View} from 'react-native'; | ||
import React, {useEffect} from 'react'; | ||
import {Keyboard, View} from 'react-native'; | ||
import {withOnyx} from 'react-native-onyx'; | ||
import type {OnyxEntry} from 'react-native-onyx'; | ||
import Button from '@components/Button'; | ||
import FormHelpMessage from '@components/FormHelpMessage'; | ||
import Text from '@components/Text'; | ||
import useKeyboardState from '@hooks/useKeyboardState'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useNetwork from '@hooks/useNetwork'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import useWindowDimensions from '@hooks/useWindowDimensions'; | ||
import * as ErrorUtils from '@libs/ErrorUtils'; | ||
import Navigation from '@libs/Navigation/Navigation'; | ||
import * as Session from '@userActions/Session'; | ||
import CONST from '@src/CONST'; | ||
import ONYXKEYS from '@src/ONYXKEYS'; | ||
import ROUTES from '@src/ROUTES'; | ||
import type {Account} from '@src/types/onyx'; | ||
import ValidateCodeForm from './ValidateCodeForm'; | ||
import type {Account, Credentials} from '@src/types/onyx'; | ||
import {isEmptyObject} from '@src/types/utils/EmptyObject'; | ||
import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink'; | ||
import Terms from './Terms'; | ||
|
||
type ChooseSSOOrMagicCodeOnyxProps = { | ||
/** The credentials of the logged in person */ | ||
credentials: OnyxEntry<Credentials>; | ||
|
||
/** The details about the account that the user is signing in with */ | ||
account: OnyxEntry<Account>; | ||
}; | ||
|
||
type ChooseSSOOrMagicCodeProps = ChooseSSOOrMagicCodeOnyxProps & { | ||
/** Determines if user is switched to using recovery code instead of 2fa code */ | ||
isUsingRecoveryCode: boolean; | ||
|
||
/** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */ | ||
setIsUsingRecoveryCode: (value: boolean) => void; | ||
/** Function that returns whether the user is using SAML or magic codes to log in */ | ||
setIsUsingMagicCode: (value: boolean) => void; | ||
}; | ||
|
||
function ChooseSSOOrMagicCode({account, isUsingRecoveryCode, setIsUsingRecoveryCode}: ChooseSSOOrMagicCodeProps) { | ||
function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: ChooseSSOOrMagicCodeProps) { | ||
const styles = useThemeStyles(); | ||
const {isKeyboardShown} = useKeyboardState(); | ||
const {translate} = useLocalize(); | ||
const {isOffline} = useNetwork(); | ||
const {isSmallScreenWidth} = useWindowDimensions(); | ||
const loginTextAfterMagicCode = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode'); | ||
const loginText = account?.requiresTwoFactorAuth ? loginTextAfterMagicCode : translate('samlSignIn.orContinueWithMagicCode'); | ||
|
||
// This view doesn't have a field for user input, so dismiss the device keyboard if shown | ||
useEffect(() => { | ||
if (!isKeyboardShown) { | ||
return; | ||
} | ||
Keyboard.dismiss(); | ||
}, [isKeyboardShown]); | ||
|
||
return ( | ||
<View> | ||
<Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text> | ||
<Button | ||
isDisabled={isOffline} | ||
success | ||
large | ||
style={[styles.mv3]} | ||
text={translate('samlSignIn.useSingleSignOn')} | ||
onPress={() => { | ||
Navigation.navigate(ROUTES.SAML_SIGN_IN); | ||
}} | ||
/> | ||
<> | ||
<View> | ||
<Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{translate('samlSignIn.welcomeSAMLEnabled')}</Text> | ||
<Button | ||
isDisabled={isOffline} | ||
success | ||
large | ||
style={[styles.mv3]} | ||
text={translate('samlSignIn.useSingleSignOn')} | ||
isLoading={account?.isLoading} | ||
onPress={() => { | ||
Navigation.navigate(ROUTES.SAML_SIGN_IN); | ||
}} | ||
/> | ||
|
||
<View style={[styles.mt5]}> | ||
<Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{loginText}</Text> | ||
</View> | ||
<View style={[styles.mt5]}> | ||
<Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}> | ||
{translate('samlSignIn.orContinueWithMagicCode')} | ||
</Text> | ||
</View> | ||
|
||
<ValidateCodeForm | ||
isVisible | ||
isUsingRecoveryCode={isUsingRecoveryCode} | ||
setIsUsingRecoveryCode={setIsUsingRecoveryCode} | ||
/> | ||
</View> | ||
<Button | ||
isDisabled={isOffline} | ||
style={[styles.mv3]} | ||
large | ||
text={translate('samlSignIn.useMagicCode')} | ||
isLoading={account?.isLoading && account?.loadingForm === (account?.requiresTwoFactorAuth ? CONST.FORMS.VALIDATE_TFA_CODE_FORM : CONST.FORMS.VALIDATE_CODE_FORM)} | ||
onPress={() => { | ||
Session.resendValidateCode(credentials?.login); | ||
setIsUsingMagicCode(true); | ||
}} | ||
/> | ||
{!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />} | ||
<ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} /> | ||
</View> | ||
<View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}> | ||
<Terms /> | ||
</View> | ||
</> | ||
); | ||
} | ||
|
||
ChooseSSOOrMagicCode.displayName = 'ChooseSSOOrMagicCode'; | ||
|
||
export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({account: {key: ONYXKEYS.ACCOUNT}})(ChooseSSOOrMagicCode); | ||
export default withOnyx<ChooseSSOOrMagicCodeProps, ChooseSSOOrMagicCodeOnyxProps>({ | ||
credentials: {key: ONYXKEYS.CREDENTIALS}, | ||
account: {key: ONYXKEYS.ACCOUNT}, | ||
})(ChooseSSOOrMagicCode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters