This commit is contained in:
Ken Sternberg 2023-08-10 12:37:15 -07:00
parent ae99ef5fe4
commit 03d9360995
14 changed files with 121 additions and 127 deletions

View File

@ -13,6 +13,7 @@ export class ApplicationWizardPageBase extends CustomEmitterElement(AKElement) {
return AwadStyles; return AwadStyles;
} }
// @ts-expect-error
@consume({ context: applicationWizardContext, subscribe: true }) @consume({ context: applicationWizardContext, subscribe: true })
@state() @state()
public wizard!: WizardState; public wizard!: WizardState;

View File

@ -1,11 +1,12 @@
import { WizardStep, makeWizardId } from "@goauthentik/components/ak-wizard-main"; import { WizardStep, makeWizardId } from "@goauthentik/components/ak-wizard-main";
import "./application/ak-application-wizard-application-details";
import "./auth-method-choice/ak-application-wizard-authentication-method-choice";
import "./auth-method/ak-application-wizard-authentication-method";
import { msg } from "@lit/localize"; import { msg } from "@lit/localize";
import { html } from "lit"; import { html } from "lit";
import "./application/ak-application-wizard-application-details";
import "./auth-method-choice/ak-application-wizard-authentication-method-choice";
import "./auth-method/ak-application-wizard-authentication-method";
export const steps: WizardStep[] = [ export const steps: WizardStep[] = [
{ {
id: makeWizardId("application"), id: makeWizardId("application"),
@ -39,5 +40,5 @@ export const steps: WizardStep[] = [
nextButtonLabel: msg("Submit"), nextButtonLabel: msg("Submit"),
backButtonLabel: msg("Back"), backButtonLabel: msg("Back"),
valid: true, valid: true,
} },
]; ];

View File

@ -1,19 +1,19 @@
import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
import "@goauthentik/components/ak-wizard-main"; import "@goauthentik/components/ak-wizard-main";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";
import { provide } from "@lit-labs/context"; import { provide } from "@lit-labs/context";
import { msg } from "@lit/localize"; import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit"; import { CSSResult, TemplateResult, html } from "lit";
import { property, customElement, state } from "lit/decorators.js"; import { customElement, property, state } from "lit/decorators.js";
import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { WizardState, WizardStateEvent } from "./types"
import { steps } from "./ApplicationWizardSteps"; import { steps } from "./ApplicationWizardSteps";
import applicationWizardContext from "./ak-application-wizard-context-name"; import applicationWizardContext from "./ak-application-wizard-context-name";
import { WizardState, WizardStateEvent } from "./types";
// my-context.ts // my-context.ts

View File

@ -16,7 +16,6 @@ import ApplicationWizardPageBase from "../ApplicationWizardPageBase";
@customElement("ak-application-wizard-application-details") @customElement("ak-application-wizard-application-details")
export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBase { export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBase {
handleChange(ev: Event) { handleChange(ev: Event) {
if (!ev.target) { if (!ev.target) {
console.warn(`Received event with no target: ${ev}`); console.warn(`Received event with no target: ${ev}`);
@ -89,6 +88,4 @@ export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBa
} }
} }
export default ApplicationWizardApplicationDetails; export default ApplicationWizardApplicationDetails;

View File

@ -252,102 +252,102 @@ export const dummyHasJwks = {
}; };
export const dummySAMLProviderMappings = { export const dummySAMLProviderMappings = {
"pagination": { pagination: {
"next": 0, next: 0,
"previous": 0, previous: 0,
"count": 7, count: 7,
"current": 1, current: 1,
"total_pages": 1, total_pages: 1,
"start_index": 1, start_index: 1,
"end_index": 7 end_index: 7,
}, },
"results": [ results: [
{ {
"pk": "9f1f23b7-1956-4daa-b08b-338cab9b3953", pk: "9f1f23b7-1956-4daa-b08b-338cab9b3953",
"managed": "goauthentik.io/providers/saml/uid", managed: "goauthentik.io/providers/saml/uid",
"name": "authentik default SAML Mapping: User ID", name: "authentik default SAML Mapping: User ID",
"expression": "return request.user.pk", expression: "return request.user.pk",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.goauthentik.io/2021/02/saml/uid", saml_name: "http://schemas.goauthentik.io/2021/02/saml/uid",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "801b6328-bb0b-4ec6-b52c-f3dc7bb6ec7f", pk: "801b6328-bb0b-4ec6-b52c-f3dc7bb6ec7f",
"managed": "goauthentik.io/providers/saml/username", managed: "goauthentik.io/providers/saml/username",
"name": "authentik default SAML Mapping: Username", name: "authentik default SAML Mapping: Username",
"expression": "return request.user.username", expression: "return request.user.username",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.goauthentik.io/2021/02/saml/username", saml_name: "http://schemas.goauthentik.io/2021/02/saml/username",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "27c4d370-658d-4acf-9f61-cfa6dd020b11", pk: "27c4d370-658d-4acf-9f61-cfa6dd020b11",
"managed": "goauthentik.io/providers/saml/ms-windowsaccountname", managed: "goauthentik.io/providers/saml/ms-windowsaccountname",
"name": "authentik default SAML Mapping: WindowsAccountname (Username)", name: "authentik default SAML Mapping: WindowsAccountname (Username)",
"expression": "return request.user.username", expression: "return request.user.username",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.microsoft.com/ws/2008/06/identity/claims/windowsaccountname", saml_name: "http://schemas.microsoft.com/ws/2008/06/identity/claims/windowsaccountname",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "757b185b-1c21-42b4-a2ee-04d6f7b655b3", pk: "757b185b-1c21-42b4-a2ee-04d6f7b655b3",
"managed": "goauthentik.io/providers/saml/groups", managed: "goauthentik.io/providers/saml/groups",
"name": "authentik default SAML Mapping: Groups", name: "authentik default SAML Mapping: Groups",
"expression": "for group in request.user.ak_groups.all():\n yield group.name", expression: "for group in request.user.ak_groups.all():\n yield group.name",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.xmlsoap.org/claims/Group", saml_name: "http://schemas.xmlsoap.org/claims/Group",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "de67cee7-7c56-4c1d-9466-9ad0e0105092", pk: "de67cee7-7c56-4c1d-9466-9ad0e0105092",
"managed": "goauthentik.io/providers/saml/email", managed: "goauthentik.io/providers/saml/email",
"name": "authentik default SAML Mapping: Email", name: "authentik default SAML Mapping: Email",
"expression": "return request.user.email", expression: "return request.user.email",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress", saml_name: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "42a936a5-11a9-4442-8748-ec27a8ab9546", pk: "42a936a5-11a9-4442-8748-ec27a8ab9546",
"managed": "goauthentik.io/providers/saml/name", managed: "goauthentik.io/providers/saml/name",
"name": "authentik default SAML Mapping: Name", name: "authentik default SAML Mapping: Name",
"expression": "return request.user.name", expression: "return request.user.name",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name", saml_name: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
"friendly_name": null friendly_name: null,
}, },
{ {
"pk": "06bee8f0-e5b4-4ce8-959a-308ba0769917", pk: "06bee8f0-e5b4-4ce8-959a-308ba0769917",
"managed": "goauthentik.io/providers/saml/upn", managed: "goauthentik.io/providers/saml/upn",
"name": "authentik default SAML Mapping: UPN", name: "authentik default SAML Mapping: UPN",
"expression": "return request.user.attributes.get('upn', request.user.email)", expression: "return request.user.attributes.get('upn', request.user.email)",
"component": "ak-property-mapping-saml-form", component: "ak-property-mapping-saml-form",
"verbose_name": "SAML Property Mapping", verbose_name: "SAML Property Mapping",
"verbose_name_plural": "SAML Property Mappings", verbose_name_plural: "SAML Property Mappings",
"meta_model_name": "authentik_providers_saml.samlpropertymapping", meta_model_name: "authentik_providers_saml.samlpropertymapping",
"saml_name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn", saml_name: "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn",
"friendly_name": null friendly_name: null,
} },
] ],
} };
// prettier-ignore // prettier-ignore
export const dummyProviderTypesList = [ export const dummyProviderTypesList = [

View File

@ -24,4 +24,3 @@ export interface WizardState {
} }
export type WizardStateEvent = WizardState & { target?: HTMLInputElement }; export type WizardStateEvent = WizardState & { target?: HTMLInputElement };

View File

@ -4,10 +4,9 @@ import { provide } from "@lit-labs/context";
import { customElement, property, state } from "@lit/reactive-element/decorators.js"; import { customElement, property, state } from "@lit/reactive-element/decorators.js";
import { LitElement, html } from "lit"; import { LitElement, html } from "lit";
import type { WizardStep, WizardStepId } from "./types";
import { WizardStepEvent, } from "./types";
import { akWizardCurrentStepContextName } from "./akWizardCurrentStepContextName"; import { akWizardCurrentStepContextName } from "./akWizardCurrentStepContextName";
import { akWizardStepsContextName } from "./akWizardStepsContextName"; import { akWizardStepsContextName } from "./akWizardStepsContextName";
import type { WizardStep, WizardStepId } from "./types";
/** /**
* AkWizardContext * AkWizardContext
@ -21,7 +20,6 @@ import { akWizardStepsContextName } from "./akWizardStepsContextName";
@customElement("ak-wizard-context") @customElement("ak-wizard-context")
export class AkWizardContext extends CustomListenerElement(LitElement) { export class AkWizardContext extends CustomListenerElement(LitElement) {
@property() @property()
eventName: string = "ak-wizard-nav"; eventName: string = "ak-wizard-nav";
@ -40,6 +38,8 @@ export class AkWizardContext extends CustomListenerElement(LitElement) {
// This is the only case where currentStep could be anything other than a valid entry. Unless, // This is the only case where currentStep could be anything other than a valid entry. Unless,
// of course, a step itself is so badly messed up it can't point to a real object. // of course, a step itself is so badly messed up it can't point to a real object.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
willUpdate(_changedProperties: Map<string, any>) { willUpdate(_changedProperties: Map<string, any>) {
if (this.currentStep === undefined) { if (this.currentStep === undefined) {
this.currentStep = this.steps[0]; this.currentStep = this.steps[0];
@ -53,10 +53,10 @@ export class AkWizardContext extends CustomListenerElement(LitElement) {
// before setting the currentStep. Especially since setting the currentStep triggers a second // before setting the currentStep. Especially since setting the currentStep triggers a second
// asynchronous event-- scheduling a re-render of everything interested in the currentStep // asynchronous event-- scheduling a re-render of everything interested in the currentStep
// object. // object.
handleNavigation(event: CustomEvent<{ step: WizardStepId | WizardStepEvent }>) { handleNavigation(event: CustomEvent<{ step: WizardStepId }>) {
const requestedStep = event.detail.step; const requestedStep = event.detail.step;
if (!requestedStep) { if (!requestedStep) {
throw new Error("Request for next step when no next step is available") throw new Error("Request for next step when no next step is available");
} }
const step = this.steps.find(({ id }) => id === requestedStep); const step = this.steps.find(({ id }) => id === requestedStep);
if (!step) { if (!step) {

View File

@ -9,8 +9,8 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "./ak-wizard-frame";
import "./ak-wizard-context"; import "./ak-wizard-context";
import "./ak-wizard-frame";
import type { WizardStep } from "./types"; import type { WizardStep } from "./types";
/** /**
@ -42,7 +42,7 @@ export class AkWizardMain extends AKElement {
* @attribute * @attribute
*/ */
@property({ type: String }) @property({ type: String })
prompt = "Show Wizard" prompt = "Show Wizard";
/** /**
* Mostly a control on the ModalButton that summons the wizard component. * Mostly a control on the ModalButton that summons the wizard component.

View File

@ -1,5 +1,5 @@
import "./ak-wizard-main"; import "./ak-wizard-main";
import type { WizardStepId, WizardStep } from "./types" import type { WizardStep, WizardStepId } from "./types";
import { makeWizardId } from "./types"; import { makeWizardId } from "./types";
export { WizardStepId, WizardStep, makeWizardId }; export { WizardStepId, WizardStep, makeWizardId };

View File

@ -9,8 +9,8 @@ import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css"; import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css"; import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../ak-wizard-frame";
import "../ak-wizard-context"; import "../ak-wizard-context";
import "../ak-wizard-frame";
import type { WizardStep } from "../types"; import type { WizardStep } from "../types";
@customElement("ak-demo-wizard") @customElement("ak-demo-wizard")

View File

@ -3,9 +3,8 @@ import { Meta } from "@storybook/web-components";
import { TemplateResult, html } from "lit"; import { TemplateResult, html } from "lit";
import "../ak-wizard-main" import "../ak-wizard-main";
import AkWizard from "../ak-wizard-main"; import AkWizard from "../ak-wizard-main";
import type { WizardStep } from "../types"; import type { WizardStep } from "../types";
import { makeWizardId } from "../types"; import { makeWizardId } from "../types";
@ -37,8 +36,6 @@ const container = (testItem: TemplateResult) =>
${testItem} ${testItem}
</div>`; </div>`;
const dummySteps: WizardStep[] = [ const dummySteps: WizardStep[] = [
{ {
id: makeWizardId("0"), id: makeWizardId("0"),
@ -64,6 +61,6 @@ const dummySteps: WizardStep[] = [
export const OnePageWizard = () => { export const OnePageWizard = () => {
return container( return container(
html` <ak-wizard-main .steps=${dummySteps} prompt="Start the show!"></ak-wizard-main>` html` <ak-wizard-main .steps=${dummySteps} prompt="Start the show!"></ak-wizard-main>`,
); );
}; };

View File

@ -2,19 +2,18 @@ import { TemplateResult } from "lit";
type PhantomType<Type, Data> = { _type: Type } & Data; type PhantomType<Type, Data> = { _type: Type } & Data;
export type WizardStepId = PhantomType<"WizardId", string> export type WizardStepId = PhantomType<"WizardId", string>;
export const makeWizardId = (id: string): WizardStepId => id as WizardStepId; export const makeWizardId = (id: string): WizardStepId => id as WizardStepId;
export interface WizardStep { export interface WizardStep {
id: WizardStepId, id: WizardStepId;
nextStep?: WizardStepId, nextStep?: WizardStepId;
backStep?: WizardStepId, backStep?: WizardStepId;
label: string, label: string;
valid: boolean, valid: boolean;
renderer: () => TemplateResult, renderer: () => TemplateResult;
disabled: boolean, disabled: boolean;
nextButtonLabel?: string, nextButtonLabel?: string;
backButtonLabel?: string backButtonLabel?: string;
} }