web/flows: improve error messages for failed duo push

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2022-11-24 13:42:13 +01:00
parent 118555c97a
commit 1c2cdfe06a
4 changed files with 58 additions and 32 deletions

View File

@ -1,3 +1,4 @@
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/EmptyState";
import "@goauthentik/flow/FormStatic";
import { BaseStage } from "@goauthentik/flow/stages/base";
@ -5,7 +6,7 @@ import { BaseStage } from "@goauthentik/flow/stages/base";
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
@ -18,18 +19,14 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { AccessDeniedChallenge, FlowChallengeResponseRequest } from "@goauthentik/api";
@customElement("ak-stage-access-denied")
export class AccessDeniedStage extends BaseStage<
AccessDeniedChallenge,
FlowChallengeResponseRequest
> {
@customElement("ak-stage-access-denied-icon")
export class AccessDeniedIcon extends AKElement {
@property()
errorMessage?: string;
static get styles(): CSSResult[] {
return [
PFBase,
PFLogin,
PFForm,
PFList,
PFFormControl,
PFTitle,
AKGlobal,
css`
@ -50,6 +47,29 @@ export class AccessDeniedStage extends BaseStage<
];
}
render(): TemplateResult {
return html` <div class="pf-c-form__group">
<p class="big-icon">
<i class="pf-icon pf-icon-error-circle-o"></i>
</p>
<h3 class="pf-c-title pf-m-3xl reason">${t`Request has been denied.`}</h3>
${this.errorMessage
? html`<hr />
<p>${this.errorMessage}</p>`
: html``}
</div>`;
}
}
@customElement("ak-stage-access-denied")
export class AccessDeniedStage extends BaseStage<
AccessDeniedChallenge,
FlowChallengeResponseRequest
> {
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
@ -70,15 +90,10 @@ export class AccessDeniedStage extends BaseStage<
>
</div>
</ak-form-static>
<div class="pf-c-form__group">
<p class="big-icon">
<i class="pf-icon pf-icon-error-circle-o"></i>
</p>
<h3 class="pf-c-title pf-m-3xl reason">${t`Request has been denied.`}</h3>
${this.challenge?.errorMessage &&
html`<hr />
<p>${this.challenge.errorMessage}</p>`}
</div>
<ak-stage-access-denied-icon
errorMessage=${ifDefined(this.challenge.errorMessage)}
>
</ak-stage-access-denied-icon>
</form>
</div>
<footer class="pf-c-login__main-footer">

View File

@ -69,15 +69,17 @@ export class AuthenticatorValidateStageWebDuo extends BaseStage<
</div>
</ak-form-static>
${errors.map((err) => {
return html`<p>${err.string}</p>`;
})}
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${t`Continue`}
</button>
</div>
${errors.length > 0
? errors.map((err) => {
if (err.code === "denied") {
return html` <ak-stage-access-denied-icon
errorMessage=${err.string}
>
</ak-stage-access-denied-icon>`;
}
return html`<p>${err.string}</p>`;
})
: html`${t`Sending Duo push notification`}`}
</form>
</div>
<footer class="pf-c-login__main-footer">