Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Moved 2fa resend button inside form and added countdown

Browse source
This commit is contained in:
Michael Barrett 2024-10-10 17:36:20 +01:00 committed by Kevin Ansfield
parent c9c8709fd3
commit d90a70e43c
2 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ghost/admin/app/controllers/signin-verify.js
View file

@ -9,6 +9,8 @@ import {tracked} from '@glimmer/tracking';
const {Errors} = DS; const {Errors} = DS;
const DEFAULT_RESEND_TOKEN_COUNTDOWN = 15;
// eslint-disable-next-line ghost/ember/alias-model-in-controller // eslint-disable-next-line ghost/ember/alias-model-in-controller
class VerifyData { class VerifyData {
@tracked token; @tracked token;
@ -34,6 +36,25 @@ export default class SigninVerifyController extends Controller {
@tracked flowErrors = ''; @tracked flowErrors = '';
@tracked verifyData = new VerifyData(); @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 @action
resetData() { 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 // ember-ajax will try and parse the response as JSON if not explicitly set
dataType: 'text' dataType: 'text'
}); });
this.startResendTokenCountdown();
return true; return true;
} catch (error) { } catch (error) {
if (error && error.payload && error.payload.errors) { if (error && error.payload && error.payload.errors) {

27
ghost/admin/app/templates/signin-verify.hbs
View file

@ -13,7 +13,8 @@
</p> </p>
<GhFormGroup @errors={{this.verifyData.errors}} @hasValidated={{this.verifyData.hasValidated}} @property="token"> <GhFormGroup @errors={{this.verifyData.errors}} @hasValidated={{this.verifyData.hasValidated}} @property="token">
<label for="token">Verification code</label> <label for="token">Verification code</label>
<span class="gh-input-icon">
<span class="gh-input-icon forgotten-wrap">
<input <input
id="token" id="token"
name="token" name="token"
@ -28,6 +29,22 @@
{{on "input" this.handleTokenInput}} {{on "input" this.handleTokenInput}}
{{on "blur" this.validateToken}} {{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> </span>
</GhFormGroup> </GhFormGroup>
@ -41,14 +58,6 @@
data-test-button="verify" /> data-test-button="verify" />
</form> </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> <p class="{{if this.flowErrors "main-error" "main-notification"}}" data-test-flow-notification>{{if this.flowErrors this.flowErrors this.flowNotification}}&nbsp;</p>
</section> </section>
</div> </div>