Skip to content

Refactor resend link page #5116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Oct 5, 2021
5 changes: 4 additions & 1 deletion src/languages/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default {
continue: 'Continue',
firstName: 'First name',
lastName: 'Last name',
phone: 'Phone',
phoneNumber: 'Phone number',
email: 'Email',
and: 'and',
Expand Down Expand Up @@ -342,8 +343,10 @@ export default {
},
resendValidationForm: {
linkHasBeenResent: 'Link has been re-sent',
weSentYouMagicSignInLink: ({loginType}) => `We've sent a magic sign in link to your ${loginType}.`,
weSentYouMagicSignInLink: ({login}) => `We've sent a magic sign in link to ${login}. Check your Inbox and your Spam folder and wait 5-10 minutes before trying again.`,
resendLink: 'Resend link',
unvalidatedAccount: 'This account exists but isn\'t validated, please check your inbox for your magic link.',
newAccount: ({login, loginType}) => `Welcome ${login}, it's always great to see a new face around here! Please check your ${loginType} for a magic link to validate your account.`,
},
detailsPage: {
localTime: 'Local time',
Expand Down
5 changes: 4 additions & 1 deletion src/languages/es.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default {
continue: 'Continuar',
firstName: 'Primer nombre',
lastName: 'Apellido',
phone: 'teléfono',
phoneNumber: 'Número de teléfono',
email: 'Email',
and: 'y',
Expand Down Expand Up @@ -342,8 +343,10 @@ export default {
},
resendValidationForm: {
linkHasBeenResent: 'El enlace se ha reenviado',
weSentYouMagicSignInLink: ({loginType}) => `Hemos enviado un enlace mágico de inicio de sesión a tu ${loginType}.`,
weSentYouMagicSignInLink: ({login}) => `Hemos enviado un enlace mágico de inicio de sesión a ${login}. Verifica tu bandeja de entrada y tu carpeta de correo no deseado y espera de 5 a 10 minutos antes de intentarlo de nuevo.`,
resendLink: 'Reenviar enlace',
unvalidatedAccount: 'Esta cuenta existe pero no está validada, por favor busca el enlace mágico en tu bandeja de entrada',
newAccount: ({login, loginType}) => `¡Bienvenido ${login}, es genial ver una cara nueva por aquí! En tu ${loginType} encontrarás un enlace para validar tu cuenta, por favor, revísalo`,
},
detailsPage: {
localTime: 'Hora local',
Expand Down
5 changes: 4 additions & 1 deletion src/pages/SetPasswordPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ class SetPasswordPage extends Component {
render() {
return (
<SafeAreaView style={[styles.signInPage]}>
<SignInPageLayout welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}>
<SignInPageLayout
shouldShowWelcomeText
welcomeText={this.props.translate('setPasswordPage.passwordFormTitle')}
>
<View style={[styles.mb4]}>
<NewPasswordForm
password={this.state.password}
Expand Down
55 changes: 44 additions & 11 deletions src/pages/signin/ResendValidationForm.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {View} from 'react-native';
import {TouchableOpacity, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import PropTypes from 'prop-types';
import _ from 'underscore';
Expand All @@ -9,9 +9,11 @@ import Button from '../../components/Button';
import Text from '../../components/Text';
import {reopenAccount, resendValidationLink, resetPassword} from '../../libs/actions/Session';
import ONYXKEYS from '../../ONYXKEYS';
import ChangeExpensifyLoginLink from './ChangeExpensifyLoginLink';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import compose from '../../libs/compose';
import redirectToSignIn from '../../libs/actions/SignInRedirect';
import Avatar from '../../components/Avatar';
import {getDefaultAvatar} from '../../libs/OptionsListUtils';

const propTypes = {
/* Onyx Props */
Expand All @@ -32,6 +34,9 @@ const propTypes = {

/** Whether or not the account is closed */
closed: PropTypes.bool,

/** Whether or not the account already exists */
accountExists: PropTypes.bool,
}),

...withLocalizePropTypes,
Expand Down Expand Up @@ -80,31 +85,59 @@ class ResendValidationForm extends React.Component {
}

render() {
const isNewAccount = !this.props.account.accountExists;
const isOldUnvalidatedAccount = this.props.account.accountExists && !this.props.account.validated;
const isSMSLogin = Str.isSMSLogin(this.props.credentials.login);
const login = isSMSLogin ? this.props.toLocalPhone(Str.removeSMSDomain(this.props.credentials.login)) : this.props.credentials.login;
const loginType = (isSMSLogin ? this.props.translate('common.phone') : this.props.translate('common.email')).toLowerCase();
let message = '';

if (isNewAccount) {
message = this.props.translate('resendValidationForm.newAccount', {
login,
loginType,
});
} else if (isOldUnvalidatedAccount) {
message = this.props.translate('resendValidationForm.unvalidatedAccount');
} else {
message = this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
login,
});
}

return (
<>
<View>
<View style={[styles.mt3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}>
<Avatar
source={getDefaultAvatar(this.props.credentials.login)}
imageStyles={[styles.mr2]}
/>
<Text style={[styles.textStrong]}>
{login}
</Text>
</View>
<View style={[styles.mv5]}>
<Text>
{this.props.translate('resendValidationForm.weSentYouMagicSignInLink', {
loginType: (Str.isSMSLogin(this.props.credentials.login)
? this.props.translate('common.phoneNumber').toLowerCase()
: this.props.translate('common.email')).toLowerCase(),
})}
{message}
</Text>
</View>
{!_.isEmpty(this.state.formSuccess) && (
<Text style={[styles.formSuccess]}>
{this.state.formSuccess}
</Text>
)}
<View style={[styles.mt4]}>
<View style={[styles.mb4, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
<TouchableOpacity onPress={() => redirectToSignIn()}>
<Text>
{this.props.translate('common.back')}
</Text>
</TouchableOpacity>
<Button
success
style={[styles.mb2]}
text={this.props.translate('resendValidationForm.resendLink')}
isLoading={this.props.account.loading}
onPress={this.validateAndSubmitForm}
/>
<ChangeExpensifyLoginLink />
</View>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/signin/SignInPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ class SignInPage extends Component {
<SafeAreaView style={[styles.signInPage]}>
<SignInPageLayout
welcomeText={welcomeText}
shouldShowWelcomeText={showLoginForm}
shouldShowWelcomeText={showLoginForm || showPasswordForm || !showResendValidationLinkForm}
shouldShowWelcomeScreenshot={showLoginForm}
>
{showLoginForm && <LoginForm />}
Expand Down
11 changes: 8 additions & 3 deletions src/pages/signin/SignInPageLayout/SignInPageLayoutNarrow.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const propTypes = {
* on form type (set password, sign in, etc.) */
welcomeText: PropTypes.string.isRequired,

/** Whether to show welcome text on a particular page */
shouldShowWelcomeText: PropTypes.bool.isRequired,

...withLocalizePropTypes,
};

Expand Down Expand Up @@ -47,9 +50,11 @@ const SignInPageLayoutNarrow = props => (
height={variables.componentSizeLarge}
/>
</View>
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
{props.welcomeText}
</Text>
{props.shouldShowWelcomeText && (
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
{props.welcomeText}
</Text>
)}
{props.children}
</View>
</View>
Expand Down
11 changes: 8 additions & 3 deletions src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ const propTypes = {
/* Flag to check medium screen with device */
isMediumScreenWidth: PropTypes.bool.isRequired,

/** Whether to show welcome text on a particular page */
shouldShowWelcomeText: PropTypes.bool.isRequired,

...withLocalizePropTypes,
};

Expand All @@ -45,9 +48,11 @@ const SignInPageLayoutWide = props => (
height={variables.componentSizeLarge}
/>
</View>
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
{props.welcomeText}
</Text>
{props.shouldShowWelcomeText && (
<Text style={[styles.mv5, styles.textLabel, styles.h3]}>
{props.welcomeText}
</Text>
)}
<View>
{props.children}
</View>
Expand Down
21 changes: 20 additions & 1 deletion src/pages/signin/SignInPageLayout/index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import SignInPageLayoutNarrow from './SignInPageLayoutNarrow';
import SignInPageLayoutWide from './SignInPageLayoutWide';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';

const propTypes = {
/** The children to show inside the layout */
children: PropTypes.node.isRequired,

/** Welcome text to show in the header of the form, changes depending
* on form type (set password, sign in, etc.) */
welcomeText: PropTypes.string.isRequired,

/** Whether to show welcome text on a particular page */
shouldShowWelcomeText: PropTypes.bool.isRequired,

...windowDimensionsPropTypes,
};

Expand All @@ -13,11 +24,19 @@ const SignInPageLayout = props => (
<SignInPageLayoutWide
welcomeText={props.welcomeText}
isMediumScreenWidth={props.isMediumScreenWidth}
shouldShowWelcomeText={props.shouldShowWelcomeText}
>
{props.children}
</SignInPageLayoutWide>
)
: <SignInPageLayoutNarrow welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutNarrow>
: (
<SignInPageLayoutNarrow
welcomeText={props.welcomeText}
shouldShowWelcomeText={props.shouldShowWelcomeText}
>
{props.children}
</SignInPageLayoutNarrow>
)
);

SignInPageLayout.propTypes = propTypes;
Expand Down