From d90a70e43c14f6f4bc7a93c3af1c54a15abaf497 Mon Sep 17 00:00:00 2001
From: Michael Barrett <mike@ghost.org>
Date: Thu, 10 Oct 2024 17:36:20 +0100
Subject: [PATCH] Moved 2fa resend button inside form and added countdown

---
 ghost/admin/app/controllers/signin-verify.js | 22 ++++++++++++++++
 ghost/admin/app/templates/signin-verify.hbs  | 27 +++++++++++++-------
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/controllers/signin-verify.js b/ghost/admin/app/controllers/signin-verify.js
index f67b78388c..a307d35703 100644
--- a/ghost/admin/app/controllers/signin-verify.js
+++ b/ghost/admin/app/controllers/signin-verify.js
@@ -9,6 +9,8 @@ import {tracked} from '@glimmer/tracking';
 
 const {Errors} = DS;
 
+const DEFAULT_RESEND_TOKEN_COUNTDOWN = 15;
+
 // eslint-disable-next-line ghost/ember/alias-model-in-controller
 class VerifyData {
     @tracked token;
@@ -34,6 +36,25 @@ export default class SigninVerifyController extends Controller {
 
     @tracked flowErrors = '';
     @tracked verifyData = new VerifyData();
+    @tracked resendTokenCountdown = DEFAULT_RESEND_TOKEN_COUNTDOWN;
+    @tracked resendTokenCountdownStarted = false;
+
+    startResendTokenCountdown() {
+        this.resendTokenCountdown = DEFAULT_RESEND_TOKEN_COUNTDOWN;
+        this.resendTokenCountdownStarted = true;
+        this.resendTokenCountdownInterval = setInterval(() => {
+            if (this.resendTokenCountdown > 0) {
+                this.resendTokenCountdown = this.resendTokenCountdown - 1;
+            } else {
+                this.resetResendTokenCountdown();
+            }
+        }, 1000);
+    }
+
+    resetResendTokenCountdown() {
+        clearInterval(this.resendTokenCountdownInterval);
+        this.resendTokenCountdownStarted = false;
+    }
 
     @action
     resetData() {
@@ -74,6 +95,7 @@ export default class SigninVerifyController extends Controller {
                 // ember-ajax will try and parse the response as JSON if not explicitly set
                 dataType: 'text'
             });
+            this.startResendTokenCountdown();
             return true;
         } catch (error) {
             if (error && error.payload && error.payload.errors) {
diff --git a/ghost/admin/app/templates/signin-verify.hbs b/ghost/admin/app/templates/signin-verify.hbs
index 4e2ac364ca..b6dbc1cc76 100644
--- a/ghost/admin/app/templates/signin-verify.hbs
+++ b/ghost/admin/app/templates/signin-verify.hbs
@@ -13,7 +13,8 @@
                 </p>
                 <GhFormGroup @errors={{this.verifyData.errors}} @hasValidated={{this.verifyData.hasValidated}} @property="token">
                     <label for="token">Verification code</label>
-                    <span class="gh-input-icon">
+
+                    <span class="gh-input-icon forgotten-wrap">
                         <input
                             id="token"
                             name="token"
@@ -28,6 +29,22 @@
                             {{on "input" this.handleTokenInput}}
                             {{on "blur" this.validateToken}}
                         />
+
+                        <GhTaskButton
+                            @task={{this.resendTokenTask}}
+                            @class="forgotten-link gh-btn gh-btn-link gh-btn-icon"
+                            @type="button"
+                            @successClass=""
+                            @failureClass=""
+                            @disabled={{this.resendTokenCountdownStarted}}
+                            as |task|
+                        >
+                            {{#if this.resendTokenCountdownStarted}}
+                                <span>Resend again in {{this.resendTokenCountdown}}s</span>
+                            {{else}}
+                                <span>{{#if task.isRunning}}{{svg-jar "spinner" class="gh-spinner"}}&nbsp;Sending{{else}}Resend{{/if}}</span>
+                            {{/if}}
+                        </GhTaskButton>
                     </span>
                 </GhFormGroup>
 
@@ -41,14 +58,6 @@
                     data-test-button="verify" />
             </form>
 
-            <GhTaskButton
-                @buttonText="Resend verification code"
-                @successText="Verification code sent"
-                @task={{this.resendTokenTask}}
-                @class="login gh-btn gh-btn-login gh-btn-block gh-btn-icon"
-                @type="submit"
-                data-test-button="resend" />
-
             <p class="{{if this.flowErrors "main-error" "main-notification"}}" data-test-flow-notification>{{if this.flowErrors this.flowErrors this.flowNotification}}&nbsp;</p>
         </section>
     </div>