trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Now, it's starting to look like a complete package. The LDAP method is working, but there is a bug:

Browse source 
the radio is sending the wrong value !?!?!?. Track that down, dammit. The search wrappers now resend
their events as standard `input` events, and that actually seems to work well; the browser is
decorating it with the right target, with the right `name` attribute, and since we have good
definitions of the `value` as a string (the real value of any search object is its UUID4), that
works quite well. Added search wrappers for CoreGroup and CryptoCertificate (CertificateKeyPairs),
and the latter has flags for "use the first one if it's the only one" and "allow the display of
keyless certificates."

Not sure why `state()` is blocking the transmission of typing information from the typed element
to the context handler, but it's a bug in the typechecker, and it's not a problem so far.
This commit is contained in:
Ken Sternberg 2023-08-01 16:16:57 -07:00
parent bf26e5d11e
commit b4d3b75434
6 changed files with 154 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
web/src/admin/applications/wizard/ApplicationWizardPageBase.ts Normal file
View file

@ -0,0 +1,29 @@
import { AKElement } from "@goauthentik/elements/Base";
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
import { consume } from "@lit-labs/context";
import { state } from "@lit/reactive-element/decorators/state.js";
import { styles as AwadStyles } from "./ak-application-wizard-application-details.css";
import type { WizardState } from "./ak-application-wizard-context";
import applicationWizardContext from "./ak-application-wizard-context-name";
export class ApplicationWizardPageBase extends CustomEmitterElement(AKElement) {
static get styles() {
return AwadStyles;
}
@consume({ context: applicationWizardContext, subscribe: true })
@state()
private wizard!: WizardState;
dispatchWizardUpdate(update: Partial<WizardState>) {
this.dispatchCustomEvent("ak-wizard-update", {
...this.wizard,
...update,
});
}
}
export default ApplicationWizardPageBase;

13
web/src/admin/applications/wizard/ak-application-wizard-application-details.css.ts
View file

@ -6,6 +6,7 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import PFInputGroup from "@patternfly/patternfly/components/InputGroup/input-group.css";
import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
import PFSwitch from "@patternfly/patternfly/components/Switch/switch.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
@ -15,12 +16,16 @@ export const styles = [
PFButton,
PFForm,
PFAlert,
PFRadio,
PFInputGroup,
PFFormControl,
PFSwitch,
css`
select[multiple] {
height: 15em;
}
`,
.pf-c-radio__label {
color: #212427;
}
select[multiple] {
height: 15em;
}
`,
];

23
web/src/admin/applications/wizard/ak-application-wizard-application-details.ts
View file

@ -3,39 +3,22 @@ import { first } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-radio-input";
import "@goauthentik/components/ak-switch-input";
import "@goauthentik/components/ak-text-input";
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
import { consume } from "@lit-labs/context";
import { msg } from "@lit/localize";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { state } from "@lit/reactive-element/decorators/state.js";
import { TemplateResult, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { styles as AwadStyles } from "./ak-application-wizard-application-details.css";
import type { WizardState } from "./ak-application-wizard-context";
import applicationWizardContext from "./ak-application-wizard-context-name";
import ApplicationWizardPageBase from "./ApplicationWizardPageBase";
@customElement("ak-application-wizard-application-details")
export class ApplicationWizardApplicationDetails extends CustomEmitterElement(AKElement) {
static get styles() {
return AwadStyles;
}
@consume({ context: applicationWizardContext, subscribe: true })
@state()
private wizard!: WizardState;
export class ApplicationWizardApplicationDetails extends ApplicationWizardPageBase {
handleChange(ev: Event) {
const value = ev.target.type === "checkbox" ? ev.target.checked : ev.target.value;
this.dispatchCustomEvent("ak-wizard-update", {
...this.wizard,
this.dispatchWizardUpdate({
application: {
...this.wizard.application,
[ev.target.name]: value,

68
web/src/admin/applications/wizard/ak-application-wizard-authentication-method-choice.ts Normal file
View file

@ -0,0 +1,68 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import "@goauthentik/components/ak-radio-input";
import "@goauthentik/components/ak-switch-input";
import "@goauthentik/components/ak-text-input";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { msg } from "@lit/localize";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { html } from "lit";
import { state } from "lit/decorators.js";
import { map } from "lit/directives/map.js";
import { ProvidersApi } from "@goauthentik/api";
import type { TypeCreate } from "@goauthentik/api";
import ApplicationWizardPageBase from "./ApplicationWizardPageBase";
@customElement("ak-application-wizard-authentication-method-choice")
export class ApplicationWizardAuthenticationMethodChoice extends ApplicationWizardPageBase {
@state()
providerTypes: TypeCreate[] = [];
constructor() {
super();
this.handleChoice = this.handleChoice.bind(this);
this.renderProvider = this.renderProvider.bind(this);
new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((types) => {
this.providerTypes = types;
});
}
handleChoice(ev: Event) {
this.dispatchWizardUpdate({ providerType: ev.target.value });
}
renderProvider(type: Provider) {
// Special case; the SAML-by-import method is handled differently
// prettier-ignore
const model = /^SAML/.test(type.name) && type.modelName === ""
? "samlimporter"
: type.modelName;
return html`<div class="pf-c-radio">
<input
class="pf-c-radio__input"
type="radio"
name="type"
id=${type.component}
value=${model}
@change=${this.handleChoice}
/>
<label class="pf-c-radio__label" for=${type.component}>${type.name}</label>
<span class="pf-c-radio__description">${type.description}</span>
</div>`;
}
render() {
return this.providerTypes.length > 0
? html`<form class="pf-c-form pf-m-horizontal">
${map(this.providerTypes, this.renderProvider)}
</form>`
: html`<ak-empty-state loading header=${msg("Loading")}></ak-empty-state>`;
}
}
export default ApplicationWizardAuthenticationMethodChoice;

2
web/src/admin/applications/wizard/ak-application-wizard-context.ts
View file

@ -29,6 +29,7 @@ type OneOfProvider =
export type WizardState = {
step: number;
providerType: string;
application: Partial<Application>;
provider: OneOfProvider;
};
@ -42,6 +43,7 @@ export class AkApplicationWizardContext extends CustomListenerElement(LitElement
@property({ attribute: false })
wizardState: WizardState = {
step: 0,
providerType: "",
application: {},
provider: {},
};

43
web/src/admin/applications/wizard/stories/ak-application-wizard-application-details.stories.ts
View file

@ -4,9 +4,35 @@ import { TemplateResult, html } from "lit";
import "../ak-application-wizard-application-details";
import AkApplicationWizardApplicationDetails from "../ak-application-wizard-application-details";
import "../ak-application-wizard-authentication-method-choice";
import "../ak-application-wizard-context";
import "./ak-application-context-display-for-test";
// prettier-ignore
const providerTypes = [
["LDAP Provider", "ldapprovider",
"Allow applications to authenticate against authentik's users using LDAP.",
],
["OAuth2/OpenID Provider", "oauth2provider",
"OAuth2 Provider for generic OAuth and OpenID Connect Applications.",
],
["Proxy Provider", "proxyprovider",
"Protect applications that don't support any of the other\n Protocols by using a Reverse-Proxy.",
],
["Radius Provider", "radiusprovider",
"Allow applications to authenticate against authentik's users using Radius.",
],
["SAML Provider", "samlprovider",
"SAML 2.0 Endpoint for applications which support SAML.",
],
["SCIM Provider", "scimprovider",
"SCIM 2.0 provider to create users and groups in external applications",
],
["SAML Provider from Metadata", "",
"Create a SAML Provider by importing its Metadata.",
],
].map(([name, model_name, description]) => ({ name, description, model_name }));
const metadata: Meta<AkApplicationWizardApplicationDetails> = {
title: "Elements / Application Wizard / Page 1",
component: "ak-application-wizard-application-details",
@ -16,6 +42,14 @@ const metadata: Meta<AkApplicationWizardApplicationDetails> = {
component: "The first page of the application wizard",
},
},
mockData: [
{
url: "/api/v3/providers/all/types/",
method: "GET",
status: 200,
response: providerTypes,
},
],
},
};
@ -42,3 +76,12 @@ export const PageOne = () => {
</ak-application-wizard-context>`
);
};
export const PageTwo = () => {
return container(
html`<ak-application-wizard-context>
<ak-application-wizard-authentication-method-choice></ak-application-wizard-authentication-method-choice>
<ak-application-context-display-for-test></ak-application-context-display-for-test>
</ak-application-wizard-context>`
);
};