Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web/admin: replace wizard provider forms with those from provider, eliminating duplication, and provide comprehensive unit tests. #11856

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
4af6ecf
web: Isolate the OAuth2 Provider Form into a reusable rendering function
kensternberg-authentik Oct 22, 2024
4439b29
Still trying to find components by internal text. Still not working.
kensternberg-authentik Oct 22, 2024
f9f8495
We have working tests!!!!!!
kensternberg-authentik Oct 23, 2024
e497dbc
Merge branch 'main' into web/update-provider-forms-for-invalidation
kensternberg-authentik Oct 23, 2024
6ff260d
Merge branch 'main' into web/update-provider-forms-for-invalidation
kensternberg-authentik Oct 23, 2024
a36cc82
Radius form has been isolated.
kensternberg-authentik Oct 23, 2024
99af95b
Committed harmony on SAML. Streamlined the tests even further.
kensternberg-authentik Oct 24, 2024
c0814ad
Almost there!
kensternberg-authentik Oct 25, 2024
5bd7ced
Merge branch 'main' into web/update-provider-forms-for-invalidation
kensternberg-authentik Oct 28, 2024
807e2a9
web/admin: Unify the forms for providers between the ./admin/provider…
kensternberg-authentik Oct 29, 2024
11bc9b8
Not sure how *that* got lost, but...
kensternberg-authentik Oct 29, 2024
401850c
Merge branch 'main' into web/update-provider-forms-for-invalidation
kensternberg-authentik Oct 29, 2024
107dff3
Updating these to correspond to changes in MAIN.
kensternberg-authentik Oct 30, 2024
4bfd06e
Labeling error.
kensternberg-authentik Oct 30, 2024
f756be2
Merge branch 'main' into web/update-provider-forms-for-invalidation
kensternberg-authentik Oct 31, 2024
26ceb3d
How did that get through?
kensternberg-authentik Nov 1, 2024
24f5225
Merge bug! Lesson of the day: always run `npm run build && npm run te…
kensternberg-authentik Nov 1, 2024
fb40ee7
Fix merge bug; modify package to always build before testing to catch…
kensternberg-authentik Nov 1, 2024
d76e3c8
Unneeded console.log
kensternberg-authentik Nov 1, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blueprints/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -6974,7 +6974,7 @@
"spnego_server_name": {
"type": "string",
"title": "Spnego server name",
"description": "Force the use of a specific server name for SPNEGO"
"description": "Force the use of a specific server name for SPNEGO. Must be in the form HTTP@hostname"
},
"spnego_keytab": {
"type": "string",
Expand Down
9 changes: 6 additions & 3 deletions schema.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42975,7 +42975,8 @@ components:
readOnly: true
spnego_server_name:
type: string
description: Force the use of a specific server name for SPNEGO
description: Force the use of a specific server name for SPNEGO. Must be
in the form HTTP@hostname
spnego_ccache:
type: string
description: Credential cache to use for SPNEGO in form type:residual
Expand Down Expand Up @@ -43144,7 +43145,8 @@ components:
be in the form TYPE:residual
spnego_server_name:
type: string
description: Force the use of a specific server name for SPNEGO
description: Force the use of a specific server name for SPNEGO. Must be
in the form HTTP@hostname
spnego_keytab:
type: string
writeOnly: true
Expand Down Expand Up @@ -48448,7 +48450,8 @@ components:
be in the form TYPE:residual
spnego_server_name:
type: string
description: Force the use of a specific server name for SPNEGO
description: Force the use of a specific server name for SPNEGO. Must be
in the form HTTP@hostname
spnego_keytab:
type: string
writeOnly: true
Expand Down
8 changes: 4 additions & 4 deletions web/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"@wdio/cli": "^9.1.2",
"@wdio/spec-reporter": "^9.1.2",
"chokidar": "^4.0.1",
"chromedriver": "^129.0.2",
"chromedriver": "^130.0.0",
"esbuild": "^0.24.0",
"eslint": "^9.11.1",
"eslint-plugin-lit": "^1.15.0",
Expand Down
2 changes: 1 addition & 1 deletion web/src/admin/applications/wizard/BasePanel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export class ApplicationWizardPageBase
return AwadStyles;
}

@consume({ context: applicationWizardContext })
@consume({ context: applicationWizardContext, subscribe: true })
public wizard!: ApplicationWizardState;

@query("form")
Expand Down
5 changes: 5 additions & 0 deletions web/src/admin/applications/wizard/ContextIdentity.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { createContext } from "@lit/context";

import { LocalTypeCreate } from "./auth-method-choice/ak-application-wizard-authentication-method-choice.choices.js";
import { ApplicationWizardState } from "./types";

export const applicationWizardContext = createContext<ApplicationWizardState>(
Symbol("ak-application-wizard-state-context"),
);

export const applicationWizardProvidersContext = createContext<LocalTypeCreate[]>(
Symbol("ak-application-wizard-providers-context"),
);
27 changes: 26 additions & 1 deletion web/src/admin/applications/wizard/ak-application-wizard.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { AkWizard } from "@goauthentik/components/ak-wizard-main/AkWizard";
import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter";

import { ContextProvider } from "@lit/context";
import { msg } from "@lit/localize";
import { customElement, state } from "lit/decorators.js";

import { applicationWizardContext } from "./ContextIdentity";
import { ProvidersApi, ProxyMode } from "@goauthentik/api";

import { applicationWizardContext, applicationWizardProvidersContext } from "./ContextIdentity";
import { providerTypeRenderers } from "./auth-method-choice/ak-application-wizard-authentication-method-choice.choices.js";
import { newSteps } from "./steps";
import {
ApplicationStep,
Expand All @@ -19,6 +23,7 @@ const freshWizardState = (): ApplicationWizardState => ({
app: {},
provider: {},
errors: {},
proxyMode: ProxyMode.Proxy,
});

@customElement("ak-application-wizard")
Expand Down Expand Up @@ -46,6 +51,11 @@ export class ApplicationWizard extends CustomListenerElement(
initialValue: this.wizardState,
});

wizardProviderProvider = new ContextProvider(this, {
context: applicationWizardProvidersContext,
initialValue: [],
});

/**
* One of our steps has multiple display variants, one for each type of service provider. We
* want to *preserve* a customer's decisions about different providers; never make someone "go
Expand All @@ -56,6 +66,21 @@ export class ApplicationWizard extends CustomListenerElement(
*/
providerCache: Map<string, OneOfProvider> = new Map();

connectedCallback() {
super.connectedCallback();
new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((providerTypes) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By removing all the static provider choices, I can now rely on the ProvidersApi to give me that list instead.

const wizardReadyProviders = Object.keys(providerTypeRenderers);
this.wizardProviderProvider.setValue(
providerTypes
.filter((providerType) => wizardReadyProviders.includes(providerType.modelName))
.map((providerType) => ({
...providerType,
renderer: providerTypeRenderers[providerType.modelName],
})),
);
});
}

// And this is where all the special cases go...
handleUpdate(detail: ApplicationWizardStateUpdate) {
if (detail.status === "submitted") {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,176 +1,28 @@
import "@goauthentik/admin/common/ak-license-notice";

import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";

import type { ProviderModelEnum as ProviderModelEnumType, TypeCreate } from "@goauthentik/api";
import { ProviderModelEnum, ProxyMode } from "@goauthentik/api";
import type {
LDAPProviderRequest,
ModelRequest,
OAuth2ProviderRequest,
ProxyProviderRequest,
RACProviderRequest,
RadiusProviderRequest,
SAMLProviderRequest,
SCIMProviderRequest,
} from "@goauthentik/api";

import { OneOfProvider } from "../types";
import type { TypeCreate } from "@goauthentik/api";

type ProviderRenderer = () => TemplateResult;

type ModelConverter = (provider: OneOfProvider) => ModelRequest;

type ProviderNoteProvider = () => TemplateResult | undefined;
type ProviderNote = ProviderNoteProvider | undefined;

export type LocalTypeCreate = TypeCreate & {
formName: string;
modelName: ProviderModelEnumType;
converter: ModelConverter;
note?: ProviderNote;
renderer: ProviderRenderer;
};

export const providerModelsList: LocalTypeCreate[] = [
{
formName: "oauth2provider",
name: msg("OAuth2/OIDC (Open Authorization/OpenID Connect)"),
description: msg("Modern applications, APIs and Single-page applications."),
renderer: () =>
html`<ak-application-wizard-authentication-by-oauth></ak-application-wizard-authentication-by-oauth>`,
modelName: ProviderModelEnum.Oauth2Oauth2provider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.Oauth2Oauth2provider,
...(provider as OAuth2ProviderRequest),
}),
component: "",
iconUrl: "/static/authentik/sources/openidconnect.svg",
},
{
formName: "ldapprovider",
name: msg("LDAP (Lightweight Directory Access Protocol)"),
description: msg(
"Provide an LDAP interface for applications and users to authenticate against.",
),
renderer: () =>
html`<ak-application-wizard-authentication-by-ldap></ak-application-wizard-authentication-by-ldap>`,
modelName: ProviderModelEnum.LdapLdapprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.LdapLdapprovider,
...(provider as LDAPProviderRequest),
}),
component: "",
iconUrl: "/static/authentik/sources/ldap.png",
},
{
formName: "proxyprovider-proxy",
name: msg("Transparent Reverse Proxy"),
description: msg("For transparent reverse proxies with required authentication"),
renderer: () =>
html`<ak-application-wizard-authentication-for-reverse-proxy></ak-application-wizard-authentication-for-reverse-proxy>`,
modelName: ProviderModelEnum.ProxyProxyprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.ProxyProxyprovider,
...(provider as ProxyProviderRequest),
mode: ProxyMode.Proxy,
}),
component: "",
iconUrl: "/static/authentik/sources/proxy.svg",
},
{
formName: "proxyprovider-forwardsingle",
name: msg("Forward Auth (Single Application)"),
description: msg("For nginx's auth_request or traefik's forwardAuth"),
renderer: () =>
html`<ak-application-wizard-authentication-for-single-forward-proxy></ak-application-wizard-authentication-for-single-forward-proxy>`,
modelName: ProviderModelEnum.ProxyProxyprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.ProxyProxyprovider,
...(provider as ProxyProviderRequest),
mode: ProxyMode.ForwardSingle,
}),
component: "",
iconUrl: "/static/authentik/sources/proxy.svg",
},
{
formName: "proxyprovider-forwarddomain",
name: msg("Forward Auth (Domain Level)"),
description: msg("For nginx's auth_request or traefik's forwardAuth per root domain"),
renderer: () =>
html`<ak-application-wizard-authentication-for-forward-proxy-domain></ak-application-wizard-authentication-for-forward-proxy-domain>`,
modelName: ProviderModelEnum.ProxyProxyprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.ProxyProxyprovider,
...(provider as ProxyProviderRequest),
mode: ProxyMode.ForwardDomain,
}),
component: "",
iconUrl: "/static/authentik/sources/proxy.svg",
},
{
formName: "racprovider",
name: msg("Remote Access Provider"),
description: msg("Remotely access computers/servers via RDP/SSH/VNC"),
renderer: () =>
html`<ak-application-wizard-authentication-for-rac></ak-application-wizard-authentication-for-rac>`,
modelName: ProviderModelEnum.RacRacprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.RacRacprovider,
...(provider as RACProviderRequest),
}),
note: () => html`<ak-license-notice></ak-license-notice>`,
requiresEnterprise: true,
component: "",
iconUrl: "/static/authentik/sources/rac.svg",
},
{
formName: "samlprovider",
name: msg("SAML (Security Assertion Markup Language)"),
description: msg("Configure SAML provider manually"),
renderer: () =>
html`<ak-application-wizard-authentication-by-saml-configuration></ak-application-wizard-authentication-by-saml-configuration>`,
modelName: ProviderModelEnum.SamlSamlprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.SamlSamlprovider,
...(provider as SAMLProviderRequest),
}),
component: "",
iconUrl: "/static/authentik/sources/saml.png",
},
{
formName: "radiusprovider",
name: msg("RADIUS (Remote Authentication Dial-In User Service)"),
description: msg("Configure RADIUS provider manually"),
renderer: () =>
html`<ak-application-wizard-authentication-by-radius></ak-application-wizard-authentication-by-radius>`,
modelName: ProviderModelEnum.RadiusRadiusprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.RadiusRadiusprovider,
...(provider as RadiusProviderRequest),
}),
component: "",
iconUrl: "/static/authentik/sources/radius.svg",
},
{
formName: "scimprovider",
name: msg("SCIM (System for Cross-domain Identity Management)"),
description: msg("Configure SCIM provider manually"),
renderer: () =>
html`<ak-application-wizard-authentication-by-scim></ak-application-wizard-authentication-by-scim>`,
modelName: ProviderModelEnum.ScimScimprovider,
converter: (provider: OneOfProvider) => ({
providerModel: ProviderModelEnum.ScimScimprovider,
...(provider as SCIMProviderRequest),
}),
component: "",
iconUrl: "/static/authentik/sources/scim.png",
},
];

export const providerRendererList = new Map<string, ProviderRenderer>(
providerModelsList.map((tc) => [tc.formName, tc.renderer]),
);

export default providerModelsList;
export const providerTypeRenderers: Record<string, () => TemplateResult> = {
oauth2provider: () =>
html`<ak-application-wizard-authentication-by-oauth></ak-application-wizard-authentication-by-oauth>`,
ldapprovider: () =>
html`<ak-application-wizard-authentication-by-ldap></ak-application-wizard-authentication-by-ldap>`,
proxyprovider: () =>
html`<ak-application-wizard-authentication-for-reverse-proxy></ak-application-wizard-authentication-for-reverse-proxy>`,
racprovider: () =>
html`<ak-application-wizard-authentication-for-rac></ak-application-wizard-authentication-for-rac>`,
samlprovider: () =>
html`<ak-application-wizard-authentication-by-saml-configuration></ak-application-wizard-authentication-by-saml-configuration>`,
radiusprovider: () =>
html`<ak-application-wizard-authentication-by-radius></ak-application-wizard-authentication-by-radius>`,
scimprovider: () =>
html`<ak-application-wizard-authentication-by-scim></ak-application-wizard-authentication-by-scim>`,
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,37 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
import "@goauthentik/elements/wizard/TypeCreateWizardPage";
import { TypeCreateWizardPageLayouts } from "@goauthentik/elements/wizard/TypeCreateWizardPage";

import { consume } from "@lit/context";
import { msg } from "@lit/localize";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { html } from "lit";

import BasePanel from "../BasePanel";
import { applicationWizardProvidersContext } from "../ContextIdentity";
import type { LocalTypeCreate } from "./ak-application-wizard-authentication-method-choice.choices";
import providerModelsList from "./ak-application-wizard-authentication-method-choice.choices";

@customElement("ak-application-wizard-authentication-method-choice")
export class ApplicationWizardAuthenticationMethodChoice extends WithLicenseSummary(BasePanel) {
@consume({ context: applicationWizardProvidersContext })
public providerModelsList!: LocalTypeCreate[];

render() {
const selectedTypes = providerModelsList.filter(
(t) => t.formName === this.wizard.providerModel,
const selectedTypes = this.providerModelsList.filter(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I'm using the form as provided by the ProxyProviderForm, I no longer need this distinction. They're just modelNames now.

(t) => t.modelName === this.wizard.providerModel,
);

// As a hack, the Application wizard has separate provider paths for our three types of
// proxy providers. This patch swaps the form we want to be directed to on page 3 from the
// modelName to the formName, so we get the right one. This information isn't modified
// or forwarded, so the proxy-plus-subtype is correctly mapped on submission.
const typesForWizard = providerModelsList.map((provider) => ({
...provider,
modelName: provider.formName,
}));

return providerModelsList.length > 0
return this.providerModelsList.length > 0
? html`<form class="pf-c-form pf-m-horizontal">
<ak-wizard-page-type-create
.types=${typesForWizard}
.types=${this.providerModelsList}
name="selectProviderType"
layout=${TypeCreateWizardPageLayouts.grid}
.selectedType=${selectedTypes.length > 0 ? selectedTypes[0] : undefined}
@select=${(ev: CustomEvent<LocalTypeCreate>) => {
this.dispatchWizardUpdate({
update: {
...this.wizard,
providerModel: ev.detail.formName,
providerModel: ev.detail.modelName,
errors: {},
},
status: this.valid ? "valid" : "invalid",
Expand Down
Loading
Loading