handle Enter Key on the signin tab

This commit is contained in:
Audric Ackermann 2021-03-02 16:49:41 +11:00
parent c420bfcf74
commit e930348684
2 changed files with 39 additions and 34 deletions

View File

@ -136,6 +136,25 @@ export const SignInTab = () => {
const activateContinueButton =
seedOK && displayNameOK && passwordsOK && !loading;
const continueYourSession = async () => {
if (isRecovery) {
await signInWithRecovery({
displayName,
userRecoveryPhrase: recoveryPhrase,
password,
verifyPassword: passwordVerify,
});
} else if (isLinking) {
setIsLoading(true);
await signInWithLinking({
userRecoveryPhrase: recoveryPhrase,
password,
verifyPassword: passwordVerify,
});
setIsLoading(false);
}
};
return (
<div className="session-registration__content">
{signInMode !== SignInMode.Default && (
@ -143,9 +162,7 @@ export const SignInTab = () => {
showDisplayNameField={showDisplayNameField}
showSeedField={true}
displayName={displayName}
handlePressEnter={() => {
throw new Error('TODO');
}}
handlePressEnter={continueYourSession}
onDisplayNameChanged={(name: string) => {
const sanitizedName = name.replace(window.displayNameRegex, '');
const trimName = sanitizedName.trim();
@ -156,6 +173,13 @@ export const SignInTab = () => {
}}
onPasswordChanged={(val: string) => {
setPassword(val);
// if user just removed the password, empty the verify too
if (!val) {
setPasswordVerify('');
setPasswordErrorString('');
setPasswordFieldsMatch(true);
return;
}
const errors = validatePassword(val, passwordVerify);
setPasswordErrorString(errors.passwordErrorString);
setPasswordFieldsMatch(errors.passwordFieldsMatch);
@ -197,24 +221,7 @@ export const SignInTab = () => {
/>
<SignInContinueButton
signInMode={signInMode}
handleContinueYourSessionClick={async () => {
if (isRecovery) {
await signInWithRecovery({
displayName,
userRecoveryPhrase: recoveryPhrase,
password,
verifyPassword: passwordVerify,
});
} else if (isLinking) {
setIsLoading(true);
await signInWithLinking({
userRecoveryPhrase: recoveryPhrase,
password,
verifyPassword: passwordVerify,
});
setIsLoading(false);
}
}}
handleContinueYourSessionClick={continueYourSession}
disabled={!activateContinueButton}
/>
<Flex container={true} justifyContent="center">

View File

@ -116,7 +116,14 @@ export const SignUpTab = (props: Props) => {
!password || (!passwordErrorString && passwordFieldsMatch);
const enableCompleteSignUp = displayNameOK && passwordsOK;
console.warn('handlePressEnter TODO');
const signUpWithDetails = async () => {
await signUp({
displayName,
generatedRecoveryPhrase: props.generatedRecoveryPhrase,
password,
verifyPassword: passwordVerify,
});
};
return (
<div className="session-registration__content">
@ -128,9 +135,7 @@ export const SignUpTab = (props: Props) => {
showDisplayNameField={true}
showSeedField={false}
displayName={displayName}
handlePressEnter={() => {
throw new Error('TODO');
}}
handlePressEnter={signUpWithDetails}
onDisplayNameChanged={(name: string) => {
const sanitizedName = name.replace(window.displayNameRegex, '');
const trimName = sanitizedName.trim();
@ -142,9 +147,9 @@ export const SignUpTab = (props: Props) => {
onPasswordChanged={(val: string) => {
setPassword(val);
if (!val) {
setPasswordVerify('');
setPasswordErrorString('');
setPasswordFieldsMatch(true);
setPasswordVerify('');
return;
}
const errors = validatePassword(val, passwordVerify);
@ -163,14 +168,7 @@ export const SignUpTab = (props: Props) => {
stealAutoFocus={true}
/>
<SessionButton
onClick={async () => {
await signUp({
displayName,
generatedRecoveryPhrase: props.generatedRecoveryPhrase,
password,
verifyPassword: passwordVerify,
});
}}
onClick={signUpWithDetails}
buttonType={SessionButtonType.Brand}
buttonColor={SessionButtonColor.Green}
text={window.i18n('getStarted')}