web/stages/authenticator_validate: only show back button when multiple challenges

This commit is contained in:
Jens Langhammer 2021-03-02 22:30:21 +01:00
parent a0753bfc88
commit b2449757f9
3 changed files with 30 additions and 18 deletions

View File

@ -119,13 +119,15 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
return html`<ak-stage-authenticator-validate-code return html`<ak-stage-authenticator-validate-code
.host=${this} .host=${this}
.challenge=${this.challenge} .challenge=${this.challenge}
.deviceChallenge=${this.selectedDeviceChallenge}> .deviceChallenge=${this.selectedDeviceChallenge}
.showBackButton=${(this.challenge?.device_challenges.length || []) > 1}>
</ak-stage-authenticator-validate-code>`; </ak-stage-authenticator-validate-code>`;
case DeviceClasses.WEBAUTHN: case DeviceClasses.WEBAUTHN:
return html`<ak-stage-authenticator-validate-webauthn return html`<ak-stage-authenticator-validate-webauthn
.host=${this} .host=${this}
.challenge=${this.challenge} .challenge=${this.challenge}
.deviceChallenge=${this.selectedDeviceChallenge}> .deviceChallenge=${this.selectedDeviceChallenge}
.showBackButton=${(this.challenge?.device_challenges.length || []) > 1}>
</ak-stage-authenticator-validate-webauthn>`; </ak-stage-authenticator-validate-webauthn>`;
} }
} }

View File

@ -14,6 +14,9 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
@property({ attribute: false }) @property({ attribute: false })
deviceChallenge?: DeviceChallenge; deviceChallenge?: DeviceChallenge;
@@property({ type: Boolean })
showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return COMMON_STYLES;
} }
@ -61,14 +64,16 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
</div> </div>
<footer class="pf-c-login__main-footer"> <footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links"> <ul class="pf-c-login__main-footer-links">
<li class="pf-c-login__main-footer-links-item"> ${this.showBackButton ?
<button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => { html`<li class="pf-c-login__main-footer-links-item">
if (!this.host) return; <button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => {
(this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined; if (!this.host) return;
}}> (this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined;
${gettext("Return to device picker")} }}>
</button> ${gettext("Return to device picker")}
</li> </button>
</li>`:
html``}
</ul> </ul>
</footer>`; </footer>`;
} }

View File

@ -21,6 +21,9 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
@property() @property()
authenticateMessage = ""; authenticateMessage = "";
@property({type: Boolean})
showBackButton = false;
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return COMMON_STYLES; return COMMON_STYLES;
} }
@ -98,14 +101,16 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
</div> </div>
<footer class="pf-c-login__main-footer"> <footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links"> <ul class="pf-c-login__main-footer-links">
<li class="pf-c-login__main-footer-links-item"> ${this.showBackButton ?
<button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => { html`<li class="pf-c-login__main-footer-links-item">
if (!this.host) return; <button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => {
(this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined; if (!this.host) return;
}}> (this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined;
${gettext("Return to device picker")} }}>
</button> ${gettext("Return to device picker")}
</li> </button>
</li>`:
html``}
</ul> </ul>
</footer>`; </footer>`;
} }