improved out-of-box experience (#704)

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

View File

@ -78,8 +78,7 @@ export class MessageContainer extends LitElement {
this.addMessage(data);
this.requestUpdate();
});
this.messageSocket.addEventListener("error", (e) => {
console.warn(`authentik/messages: error ${e}`);
this.messageSocket.addEventListener("error", () => {
this.retryDelay = this.retryDelay * 2;
});
}

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>`
};
}

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`}

View File

@ -32,16 +32,22 @@ msgstr "ACS URL"
#: src/pages/applications/ApplicationForm.ts:110
#: src/pages/flows/FlowForm.ts:109
#: src/pages/flows/StageBindingForm.ts:142
msgid "ALL, all policies must match to grant access."
msgstr "ALL, all policies must match to grant access."
#: src/pages/flows/StageBindingForm.ts:144
msgid "ALL, all policies must match to include this stage access."
msgstr "ALL, all policies must match to include this stage access."
#: src/pages/applications/ApplicationForm.ts:107
#: src/pages/flows/FlowForm.ts:106
#: src/pages/flows/StageBindingForm.ts:139
msgid "ANY, any policy must match to grant access."
msgstr "ANY, any policy must match to grant access."
#: src/pages/flows/StageBindingForm.ts:141
msgid "ANY, any policy must match to include this stage access."
msgstr "ANY, any policy must match to include this stage access."
#: src/elements/notifications/APIDrawer.ts:61
msgid "API Requests"
msgstr "API Requests"
@ -625,7 +631,7 @@ msgstr "Context"
#: src/flows/stages/consent/ConsentStage.ts:60
#: src/flows/stages/dummy/DummyStage.ts:39
#: src/flows/stages/password/PasswordStage.ts:71
#: src/flows/stages/prompt/PromptStage.ts:130
#: src/flows/stages/prompt/PromptStage.ts:155
#: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts:91
msgid "Continue"
msgstr "Continue"
@ -1084,17 +1090,17 @@ msgstr "Error: unsupported source settings: {0}"
msgid "Error: unsupported stage settings: {0}"
msgstr "Error: unsupported stage settings: {0}"
#: src/pages/flows/StageBindingForm.ts:113
#: src/pages/flows/StageBindingForm.ts:119
msgid "Evaluate on plan"
msgstr "Evaluate on plan"
#: src/pages/flows/StageBindingForm.ts:116
msgid "Evaluate policies during the Flow planning process. Disable this for input-based policies."
msgstr "Evaluate policies during the Flow planning process. Disable this for input-based policies."
#: src/pages/flows/StageBindingForm.ts:133
msgid "Evaluate policies before the Stage is present to the user."
msgstr "Evaluate policies before the Stage is present to the user."
#: src/pages/flows/StageBindingForm.ts:125
msgid "Evaluate policies when the Stage is present to the user."
msgstr "Evaluate policies when the Stage is present to the user."
#: src/pages/flows/StageBindingForm.ts:123
msgid "Evaluate policies during the Flow planning process. Disable this for input-based policies. Should be used in conjunction with 'Re-evaluate policies', as with this option disabled, policies are **not** evaluated."
msgstr "Evaluate policies during the Flow planning process. Disable this for input-based policies. Should be used in conjunction with 'Re-evaluate policies', as with this option disabled, policies are **not** evaluated."
#: src/pages/events/EventListPage.ts:22
msgid "Event Log"
@ -1594,8 +1600,8 @@ msgid "Library"
msgstr "Library"
#: src/elements/table/Table.ts:113
#: src/flows/FlowExecutor.ts:154
#: src/flows/FlowExecutor.ts:200
#: src/flows/FlowExecutor.ts:164
#: src/flows/FlowExecutor.ts:210
#: src/flows/access_denied/FlowAccessDenied.ts:27
#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts:43
#: src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts:33
@ -1608,7 +1614,7 @@ msgstr "Library"
#: src/flows/stages/email/EmailStage.ts:26
#: src/flows/stages/identification/IdentificationStage.ts:134
#: src/flows/stages/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:108
#: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:55
#: src/pages/user-settings/UserDetailsPage.ts:38
#: src/utils.ts:40
@ -2072,7 +2078,7 @@ msgid "Optionally set the 'FriendlyName' value of the Assertion attribute."
msgstr "Optionally set the 'FriendlyName' value of the Assertion attribute."
#: src/pages/flows/BoundStagesList.ts:38
#: src/pages/flows/StageBindingForm.ts:128
#: src/pages/flows/StageBindingForm.ts:110
#: src/pages/policies/BoundPoliciesList.ts:38
#: src/pages/policies/PolicyBindingForm.ts:203
#: src/pages/stages/prompt/PromptForm.ts:119
@ -2199,7 +2205,7 @@ msgstr "Policy binding"
#: src/pages/applications/ApplicationForm.ts:102
#: src/pages/flows/FlowForm.ts:101
#: src/pages/flows/StageBindingForm.ts:134
#: src/pages/flows/StageBindingForm.ts:136
msgid "Policy engine mode"
msgstr "Policy engine mode"
@ -2229,7 +2235,7 @@ msgstr "Post binding"
msgid "Post binding (auto-submit)"
msgstr "Post binding (auto-submit)"
#: src/flows/FlowExecutor.ts:242
#: src/flows/FlowExecutor.ts:252
msgid "Powered by authentik"
msgstr "Powered by authentik"
@ -2374,7 +2380,7 @@ msgstr "RSA-SHA384"
msgid "RSA-SHA512"
msgstr "RSA-SHA512"
#: src/pages/flows/StageBindingForm.ts:122
#: src/pages/flows/StageBindingForm.ts:130
msgid "Re-evaluate policies"
msgstr "Re-evaluate policies"
@ -2469,6 +2475,10 @@ msgstr "Retry Task"
msgid "Retry authentication"
msgstr "Retry authentication"
#: src/flows/FlowExecutor.ts:142
msgid "Return"
msgstr "Return"
#: src/elements/router/Router404.ts:28
msgid "Return home"
msgstr "Return home"
@ -2701,7 +2711,7 @@ msgstr "Skip path regex"
msgid "Slug"
msgstr "Slug"
#: src/flows/FlowExecutor.ts:134
#: src/flows/FlowExecutor.ts:135
msgid "Something went wrong! Please try again later."
msgstr "Something went wrong! Please try again later."
@ -3662,7 +3672,7 @@ msgstr "When selected, incoming assertion's Signatures will be validated against
msgid "When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged."
msgstr "When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged."
#: src/flows/FlowExecutor.ts:130
#: src/flows/FlowExecutor.ts:131
msgid "Whoops!"
msgstr "Whoops!"

View File

@ -32,16 +32,22 @@ msgstr ""
#: src/pages/applications/ApplicationForm.ts:110
#: src/pages/flows/FlowForm.ts:109
#: src/pages/flows/StageBindingForm.ts:142
msgid "ALL, all policies must match to grant access."
msgstr ""
#: src/pages/flows/StageBindingForm.ts:144
msgid "ALL, all policies must match to include this stage access."
msgstr ""
#: src/pages/applications/ApplicationForm.ts:107
#: src/pages/flows/FlowForm.ts:106
#: src/pages/flows/StageBindingForm.ts:139
msgid "ANY, any policy must match to grant access."
msgstr ""
#: src/pages/flows/StageBindingForm.ts:141
msgid "ANY, any policy must match to include this stage access."
msgstr ""
#: src/elements/notifications/APIDrawer.ts:61
msgid "API Requests"
msgstr ""
@ -621,7 +627,7 @@ msgstr ""
#: src/flows/stages/consent/ConsentStage.ts:60
#: src/flows/stages/dummy/DummyStage.ts:39
#: src/flows/stages/password/PasswordStage.ts:71
#: src/flows/stages/prompt/PromptStage.ts:130
#: src/flows/stages/prompt/PromptStage.ts:155
#: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts:91
msgid "Continue"
msgstr ""
@ -1080,16 +1086,16 @@ msgstr ""
msgid "Error: unsupported stage settings: {0}"
msgstr ""
#: src/pages/flows/StageBindingForm.ts:113
#: src/pages/flows/StageBindingForm.ts:119
msgid "Evaluate on plan"
msgstr ""
#: src/pages/flows/StageBindingForm.ts:116
msgid "Evaluate policies during the Flow planning process. Disable this for input-based policies."
#: src/pages/flows/StageBindingForm.ts:133
msgid "Evaluate policies before the Stage is present to the user."
msgstr ""
#: src/pages/flows/StageBindingForm.ts:125
msgid "Evaluate policies when the Stage is present to the user."
#: src/pages/flows/StageBindingForm.ts:123
msgid "Evaluate policies during the Flow planning process. Disable this for input-based policies. Should be used in conjunction with 'Re-evaluate policies', as with this option disabled, policies are **not** evaluated."
msgstr ""
#: src/pages/events/EventListPage.ts:22
@ -1590,8 +1596,8 @@ msgid "Library"
msgstr ""
#: src/elements/table/Table.ts:113
#: src/flows/FlowExecutor.ts:154
#: src/flows/FlowExecutor.ts:200
#: src/flows/FlowExecutor.ts:164
#: src/flows/FlowExecutor.ts:210
#: src/flows/access_denied/FlowAccessDenied.ts:27
#: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts:43
#: src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts:33
@ -1604,7 +1610,7 @@ msgstr ""
#: src/flows/stages/email/EmailStage.ts:26
#: src/flows/stages/identification/IdentificationStage.ts:134
#: src/flows/stages/password/PasswordStage.ts:31
#: src/flows/stages/prompt/PromptStage.ts:108
#: src/flows/stages/prompt/PromptStage.ts:126
#: src/pages/applications/ApplicationViewPage.ts:55
#: src/pages/user-settings/UserDetailsPage.ts:38
#: src/utils.ts:40
@ -2068,7 +2074,7 @@ msgid "Optionally set the 'FriendlyName' value of the Assertion attribute."
msgstr ""
#: src/pages/flows/BoundStagesList.ts:38
#: src/pages/flows/StageBindingForm.ts:128
#: src/pages/flows/StageBindingForm.ts:110
#: src/pages/policies/BoundPoliciesList.ts:38
#: src/pages/policies/PolicyBindingForm.ts:203
#: src/pages/stages/prompt/PromptForm.ts:119
@ -2195,7 +2201,7 @@ msgstr ""
#: src/pages/applications/ApplicationForm.ts:102
#: src/pages/flows/FlowForm.ts:101
#: src/pages/flows/StageBindingForm.ts:134
#: src/pages/flows/StageBindingForm.ts:136
msgid "Policy engine mode"
msgstr ""
@ -2225,7 +2231,7 @@ msgstr ""
msgid "Post binding (auto-submit)"
msgstr ""
#: src/flows/FlowExecutor.ts:242
#: src/flows/FlowExecutor.ts:252
msgid "Powered by authentik"
msgstr ""
@ -2370,7 +2376,7 @@ msgstr ""
msgid "RSA-SHA512"
msgstr ""
#: src/pages/flows/StageBindingForm.ts:122
#: src/pages/flows/StageBindingForm.ts:130
msgid "Re-evaluate policies"
msgstr ""
@ -2465,6 +2471,10 @@ msgstr ""
msgid "Retry authentication"
msgstr ""
#: src/flows/FlowExecutor.ts:142
msgid "Return"
msgstr ""
#: src/elements/router/Router404.ts:28
msgid "Return home"
msgstr ""
@ -2697,7 +2707,7 @@ msgstr ""
msgid "Slug"
msgstr ""
#: src/flows/FlowExecutor.ts:134
#: src/flows/FlowExecutor.ts:135
msgid "Something went wrong! Please try again later."
msgstr ""
@ -3656,7 +3666,7 @@ msgstr ""
msgid "When this option is enabled, all executions of this policy will be logged. By default, only execution errors are logged."
msgstr ""
#: src/flows/FlowExecutor.ts:130
#: src/flows/FlowExecutor.ts:131
msgid "Whoops!"
msgstr ""

View File

@ -106,6 +106,12 @@ export class StageBindingForm extends Form<FlowStageBinding> {
}), html`<option>${t`Loading...`}</option>`)}
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Order`}
?required=${true}
name="order">
<input type="number" value="${until(this.getOrder())}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="evaluateOnPlan">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.fsb?.evaluateOnPlan, true)}>
@ -113,7 +119,9 @@ export class StageBindingForm extends Form<FlowStageBinding> {
${t`Evaluate on plan`}
</label>
</div>
<p class="pf-c-form__helper-text">${t`Evaluate policies during the Flow planning process. Disable this for input-based policies.`}</p>
<p class="pf-c-form__helper-text">
${t`Evaluate policies during the Flow planning process. Disable this for input-based policies. Should be used in conjunction with 'Re-evaluate policies', as with this option disabled, policies are **not** evaluated.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="reEvaluatePolicies">
<div class="pf-c-check">
@ -122,13 +130,7 @@ export class StageBindingForm extends Form<FlowStageBinding> {
${t`Re-evaluate policies`}
</label>
</div>
<p class="pf-c-form__helper-text">${t`Evaluate policies when the Stage is present to the user.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Order`}
?required=${true}
name="order">
<input type="number" value="${until(this.getOrder())}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Evaluate policies before the Stage is present to the user.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Policy engine mode`}
@ -136,10 +138,10 @@ export class StageBindingForm extends Form<FlowStageBinding> {
name="policyEngineMode">
<select class="pf-c-form-control">
<option value=${FlowStageBindingPolicyEngineModeEnum.Any} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.Any}>
${t`ANY, any policy must match to grant access.`}
${t`ANY, any policy must match to include this stage access.`}
</option>
<option value=${FlowStageBindingPolicyEngineModeEnum.All} ?selected=${this.fsb?.policyEngineMode === FlowStageBindingPolicyEngineModeEnum.All}>
${t`ALL, all policies must match to grant access.`}
${t`ALL, all policies must match to include this stage access.`}
</option>
</select>
</ak-form-element-horizontal>