From e9303486847db1e21e699aff429deb58acd6cc36 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Tue, 2 Mar 2021 16:49:41 +1100
Subject: [PATCH] handle Enter Key on the signin tab

---
 .../session/registration/SignInTab.tsx        | 49 +++++++++++--------
 .../session/registration/SignUpTab.tsx        | 24 +++++----
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/ts/components/session/registration/SignInTab.tsx b/ts/components/session/registration/SignInTab.tsx
index a226f5d5f..00638531b 100644
--- a/ts/components/session/registration/SignInTab.tsx
+++ b/ts/components/session/registration/SignInTab.tsx
@@ -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">
diff --git a/ts/components/session/registration/SignUpTab.tsx b/ts/components/session/registration/SignUpTab.tsx
index 9bf2f3d79..93248f841 100644
--- a/ts/components/session/registration/SignUpTab.tsx
+++ b/ts/components/session/registration/SignUpTab.tsx
@@ -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')}