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

improved out-of-box experience (#704)

Browse Source
This commit is contained in:
Jens L
2021-04-06 20:25:22 +02:00
committed by GitHub
parent fb409a73a1
commit a2a35e49a9
18 changed files with 321 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/flows/FlowExecutor.ts
View File

@ -6,6 +6,7 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFBackgroundImage from "@patternfly/patternfly/components/BackgroundImage/background-image.css";
import PFList from "@patternfly/patternfly/components/List/list.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../authentik.css";
import { unsafeHTML } from "lit-html/directives/unsafe-html";
@ -58,7 +59,7 @@ export class FlowExecutor extends LitElement implements StageHost {
config?: Config;
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFTitle, PFList, PFBackgroundImage, AKGlobal].concat(css`
return [PFBase, PFLogin, PFButton, PFTitle, PFList, PFBackgroundImage, AKGlobal].concat(css`
.ak-loading {
display: flex;
height: 100%;
@ -115,8 +116,8 @@ export class FlowExecutor extends LitElement implements StageHost {
}).then((data) => {
this.challenge = data;
this.postUpdate();
}).catch((e) => {
this.errorMessage(e);
}).catch((e: Response) => {
this.errorMessage(e.statusText);
}).finally(() => {
this.loading = false;
});
@ -139,9 +140,9 @@ export class FlowExecutor extends LitElement implements StageHost {
this.setBackground(this.challenge.background);
}
this.postUpdate();
}).catch((e) => {
}).catch((e: Response) => {
// Catch JSON or Update errors
this.errorMessage(e);
this.errorMessage(e.statusText);
}).finally(() => {
this.loading = false;
});
@ -158,7 +159,16 @@ export class FlowExecutor extends LitElement implements StageHost {
<div class="pf-c-login__main-body">
<h3>${t`Something went wrong! Please try again later.`}</h3>
<pre class="ak-exception">${error}</pre>
</div>`
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
<li class="pf-c-login__main-footer-links-item">
<a class="pf-c-button pf-m-primary pf-m-block" href="/">
${t`Return`}
</a>
</li>
</ul>
</footer>`
};
}

37
web/src/flows/stages/prompt/PromptStage.ts
View File

@ -7,11 +7,13 @@ import PFFormControl from "@patternfly/patternfly/components/FormControl/form-co
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
import AKGlobal from "../../../authentik.css";
import { BaseStage } from "../base";
import "../../../elements/forms/FormElement";
import "../../../elements/EmptyState";
import { Challenge } from "../../../api/Flows";
import "../../../elements/Divider";
import { Challenge, Error } from "../../../api/Flows";
export interface Prompt {
field_key: string;
@ -33,7 +35,7 @@ export class PromptStage extends BaseStage {
challenge?: PromptChallenge;
static get styles(): CSSResult[] {
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
return [PFBase, PFLogin, PFAlert, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
}
renderPromptInner(prompt: Prompt): string {
@ -101,7 +103,7 @@ export class PromptStage extends BaseStage {
class="pf-c-form-control"
?required=${prompt.required}>`;
case "separator":
return "<hr>";
return `<ak-divider>${prompt.placeholder}</ak-divider>`;
case "hidden":
return `<input
type="hidden"
@ -110,13 +112,29 @@ export class PromptStage extends BaseStage {
class="pf-c-form-control"
?required=${prompt.required}>`;
case "static":
return `<p
class="pf-c-form-control">${prompt.placeholder}
</p>`;
return `<p>${prompt.placeholder}</p>`;
}
return "";
}
renderNonFieldErrors(errors: Error[]): TemplateResult {
if (!errors) {
return html``;
}
return html`<div class="pf-c-form__alert">
${errors.map(err => {
return html`<div class="pf-c-alert pf-m-inline pf-m-danger">
<div class="pf-c-alert__icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<h4 class="pf-c-alert__title">
${err.string}
</h4>
</div>`;
})}
</div>`;
}
render(): TemplateResult {
if (!this.challenge) {
return html`<ak-empty-state
@ -132,6 +150,10 @@ export class PromptStage extends BaseStage {
<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => {this.submitForm(e);}}>
${this.challenge.fields.map((prompt) => {
// Special types that aren't rendered in a wrapper
if (prompt.type === "static" || prompt.type === "hidden" || prompt.type === "separator") {
return unsafeHTML(this.renderPromptInner(prompt));
}
return html`<ak-form-element
label="${prompt.label}"
?required="${prompt.required}"
@ -140,6 +162,9 @@ export class PromptStage extends BaseStage {
${unsafeHTML(this.renderPromptInner(prompt))}
</ak-form-element>`;
})}
${"non_field_errors" in (this.challenge?.response_errors || {}) ?
this.renderNonFieldErrors(this.challenge?.response_errors?.non_field_errors || []):
html``}
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${t`Continue`}