habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: improve display for action-showing stages

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2022-10-13 17:02:01 +02:00
parent 013b7118f2
commit 83d303ba9a
2 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/flow/providers/oauth2/DeviceCodeFinish.ts
View File

@ -1,34 +1,14 @@
import "@goauthentik/elements/EmptyState";
import "@goauthentik/flow/FormStatic";
import { BaseStage } from "@goauthentik/flow/stages/base";
import { AccessDeniedStage } from "@goauthentik/flow/stages/access_denied/AccessDeniedStage";
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import PFLogin from "@patternfly/patternfly/components/Login/login.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import {
OAuthDeviceCodeFinishChallenge,
OAuthDeviceCodeFinishChallengeResponseRequest,
} from "@goauthentik/api";
@customElement("ak-flow-provider-oauth2-code-finish")
export class DeviceCodeFinish extends BaseStage<
OAuthDeviceCodeFinishChallenge,
OAuthDeviceCodeFinishChallengeResponseRequest
> {
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
}
export class DeviceCodeFinish extends AccessDeniedStage {
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
@ -39,10 +19,12 @@ export class DeviceCodeFinish extends BaseStage<
<div class="pf-c-login__main-body">
<form class="pf-c-form">
<div class="pf-c-form__group">
<p>
<p class="big-icon">
<i class="pf-icon pf-icon-ok"></i>
${t`You've successfully authenticated your device.`}
</p>
<h3 class="pf-c-title pf-m-3xl reason">
${t`You've successfully authenticated your device.`}
</h3>
<hr />
<p>${t`You can close this tab now.`}</p>
</div>

31
web/src/flow/stages/access_denied/AccessDeniedStage.ts
View File

@ -4,7 +4,7 @@ import { BaseStage } from "@goauthentik/flow/stages/base";
import { t } from "@lingui/macro";
import { CSSResult, TemplateResult, html } from "lit";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -24,7 +24,30 @@ export class AccessDeniedStage extends BaseStage<
FlowChallengeResponseRequest
> {
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFList, PFFormControl, PFTitle, AKGlobal];
return [
PFBase,
PFLogin,
PFForm,
PFList,
PFFormControl,
PFTitle,
AKGlobal,
css`
.big-icon {
display: flex;
width: 100%;
justify-content: center;
height: 5rem;
}
.big-icon i {
font-size: 3rem;
}
.reason {
margin-bottom: 1rem;
text-align: center;
}
`,
];
}
render(): TemplateResult {
@ -48,10 +71,10 @@ export class AccessDeniedStage extends BaseStage<
</div>
</ak-form-static>
<div class="pf-c-form__group">
<p>
<p class="big-icon">
<i class="pf-icon pf-icon-error-circle-o"></i>
${t`Request has been denied.`}
</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>`}