From 729a1a8dfdae4a346f22bf0ffe8969dbe9221be8 Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Fri, 16 Apr 2021 12:20:24 +0200
Subject: [PATCH] feat: focus back on passcode input after failure

---
 .../directives/views/accountMenu.ts            | 18 ++++++++++++------
 .../templates/directives/account-menu.pug      | 11 ++++++-----
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/directives/views/accountMenu.ts b/app/assets/javascripts/directives/views/accountMenu.ts
index d8e799bd1..6a5012dfe 100644
--- a/app/assets/javascripts/directives/views/accountMenu.ts
+++ b/app/assets/javascripts/directives/views/accountMenu.ts
@@ -88,6 +88,8 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
   private removeSyncObserver?: IReactionDisposer;
   private removeProtectionLengthObserver?: () => void;
 
+  public passcodeInput!: JQLite;
+
   /* @ngInject */
   constructor($timeout: ng.ITimeoutService, appVersion: string) {
     super($timeout);
@@ -148,7 +150,7 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
   async $onInit() {
     super.$onInit();
     this.setState({
-      showSessions: await this.application.userCanManageSessions()
+      showSessions: await this.application.userCanManageSessions(),
     });
 
     const sync = this.appState.sync;
@@ -516,17 +518,21 @@ class AccountMenuCtrl extends PureViewCtrl<unknown, AccountMenuState> {
   async submitPasscodeForm() {
     const passcode = this.getState().formData.passcode!;
     if (passcode !== this.getState().formData.confirmPasscode!) {
-      this.application!.alertService!.alert(STRING_NON_MATCHING_PASSCODES);
+      await alertDialog({
+        text: STRING_NON_MATCHING_PASSCODES,
+      });
+      this.passcodeInput[0].focus();
       return;
     }
 
     await preventRefreshing(
       STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
       async () => {
-        if (this.application!.hasPasscode()) {
-          await this.application!.changePasscode(passcode);
-        } else {
-          await this.application!.addPasscode(passcode);
+        const successful = this.application.hasPasscode()
+          ? await this.application.changePasscode(passcode)
+          : await this.application.addPasscode(passcode);
+        if (!successful) {
+          this.passcodeInput[0].focus();
         }
       }
     );
diff --git a/app/assets/templates/directives/account-menu.pug b/app/assets/templates/directives/account-menu.pug
index dc2ff1524..d2283ccfb 100644
--- a/app/assets/templates/directives/account-menu.pug
+++ b/app/assets/templates/directives/account-menu.pug
@@ -200,12 +200,13 @@
             )
             .sk-panel-row
             input.sk-input.contrast(
-              ng-model='self.state.formData.passcode',
-              placeholder='Passcode',
-              should-focus='true',
-              sn-autofocus='true',
+              ng-ref='self.passcodeInput'
+              ng-model='self.state.formData.passcode'
+              placeholder='Passcode'
+              should-focus='true'
+              sn-autofocus='true'
               type='password'
-              )
+            )
             input.sk-input.contrast(
               ng-model='self.state.formData.confirmPasscode',
               placeholder='Confirm Passcode',