Almost there.

Missing: The validation is currently not working as expected, and I cannot get the backend to give me meaningful data helping us "go back" to the field that wasn't valid. I really don't want to put all the meaningful validation on the front-end; that's the road to - perdition, the back-end must be usable by people less assiduous than we are. Also: Need to make the button bar work better; maybe each panel can provide a custom button bar if one is needed?
2023-08-28 15:33:59 -07:00 · 2023-08-28 15:33:59 -07:00 · 61ef563162
parent 93d7507d11
commit 61ef563162
9 changed files with 707 additions and 671 deletions
--- a/web/authentik-live-tests/tests/login.test.js
+++ b/web/authentik-live-tests/tests/login.test.js
@ -6,29 +6,31 @@ const { $AkSel } = require("../lib/idiom");
 const CLICK_TIME_DELAY = 250;

 const login = [
-    ['text', '>>>input[name="uidField"]', "ken@goauthentik.io"],
-    ['button', '>>>button[type="submit"]'],
-    ['pause'],
-    ['text', '>>>input[name="password"]', "eat10bugs"],
-    ['button', '>>>button[type="submit"]'],
-    ['pause', ">>>div.header h1"],
+    ["text", '>>>input[name="uidField"]', "ken@goauthentik.io"],
+    ["button", '>>>button[type="submit"]'],
+    ["pause"],
+    ["text", '>>>input[name="password"]', "eat10bugs"],
+    ["button", '>>>button[type="submit"]'],
+    ["pause", ">>>div.header h1"],
 ];

-
 const simpleApplication = [
-    ['text',   '>>>ak-form-element-horizontal input[name="name"]', "This Is My Application"],
-    ['button', ">>>ak-wizard-frame footer button.pf-m-primary"],
-    ['button', '>>>input[value="ldapprovider"]'],
-    ['button', ">>>ak-wizard-frame footer button.pf-m-primary"],
-    ['text',   '>>>ak-form-element-horizontal input[name="name"]', "This Is My Provider"],
-    ['search', '>>>ak-tenanted-flow-search input[type="text"]', "button*=default-authentication-flow"],
-    ['text',   '>>>ak-form-element-horizontal input[name="tlsServerName"]', "example.goauthentik.io"],
-    ['button', ">>>ak-wizard-frame footer button.pf-m-primary"]
+    ["text", '>>>ak-form-element-horizontal input[name="name"]', "This Is My Application"],
+    ["button", ">>>ak-wizard-frame footer button.pf-m-primary"],
+    ["button", '>>>input[value="ldapprovider"]'],
+    ["button", ">>>ak-wizard-frame footer button.pf-m-primary"],
+    ["text", '>>>ak-form-element-horizontal input[name="name"]', "This Is My Provider"],
+    [
+        "search",
+        '>>>ak-tenanted-flow-search input[type="text"]',
+        "button*=default-authentication-flow",
+    ],
+    ["text", '>>>ak-form-element-horizontal input[name="tlsServerName"]', "example.goauthentik.io"],
+    ["button", ">>>ak-wizard-frame footer button.pf-m-primary"],
 ];

-
 describe("Login", () => {
-    it(`Should correctly log in to Authentik}`, async () => {
+    it("Should correctly log in to Authentik}", async () => {
        await browser.reloadSession();
        await browser.url("http://localhost:9000");

--- a/web/authentik-live-tests/wdio.conf-safari.js
+++ b/web/authentik-live-tests/wdio.conf-safari.js
@ -1,10 +1,10 @@
-const fs = require('fs')
-const path = require('path')
+const fs = require("fs");
+const path = require("path");

-const debug = process.env.DEBUG
-const defaultTimeoutInterval = 60000
-const buildNumber = process.env.BUILD_NUMBER ? process.env.BUILD_NUMBER : '0'
-const reportsOutputDir = './reports'
+const debug = process.env.DEBUG;
+const defaultTimeoutInterval = 60000;
+const buildNumber = process.env.BUILD_NUMBER ? process.env.BUILD_NUMBER : "0";
+const reportsOutputDir = "./reports";

 exports.config = {
    //
@ -14,7 +14,7 @@ exports.config = {
    //
    // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
    // on a remote machine).
-  runner: 'local',
+    runner: "local",
    //
    // ==================
    // Specify Test Files
@ -24,7 +24,7 @@ exports.config = {
    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
    // directory is where your package.json resides, so `wdio` will be called from there.
    //
-  specs: ['./tests/*.js'],
+    specs: ["./tests/*.js"],
    // Patterns to exclude.
    exclude: [
        // 'path/to/excluded/files'
@ -58,7 +58,7 @@ exports.config = {
            // 5 instances get started at a time.
            maxInstances: 1,
            //
-      browserName: 'Safari',
+            browserName: "Safari",
            // acceptInsecureCerts: true,
            // If outputDir is provided WebdriverIO can capture driver session logs
            // it is possible to configure which logTypes to include/exclude.
@ -73,7 +73,7 @@ exports.config = {
    // Define all options that are relevant for the WebdriverIO instance here
    //
    // Level of logging verbosity: trace | debug | info | warn | error | silent
-  logLevel: 'info',
+    logLevel: "info",
    //
    // Set specific log levels per logger
    // loggers:
@ -97,7 +97,7 @@ exports.config = {
    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
    // gets prepended directly.
-  baseUrl: 'http://localhost',
+    baseUrl: "http://localhost",
    //
    // Default timeout for all waitFor* commands.
    waitforTimeout: 10000,
@ -113,7 +113,7 @@ exports.config = {
    // Services take over a specific job you don't want to take care of. They enhance
    // your test setup with almost no effort. Unlike plugins, they don't add new
    // commands. Instead, they hook themselves up into the test process.
-  services: ['safaridriver'],
+    services: ["safaridriver"],

    // Framework you want to run your specs with.
    // The following are supported: Mocha, Jasmine, and Cucumber
@ -121,7 +121,7 @@ exports.config = {
    //
    // Make sure you have the wdio adapter package for the specific framework installed
    // before running any tests.
-  framework: 'mocha',
+    framework: "mocha",
    //
    // The number of times to retry the entire specfile when it fails as a whole
    // specFileRetries: 1,
@ -136,17 +136,17 @@ exports.config = {
    // The only one supported by default is 'dot'
    // see also: https://webdriver.io/docs/dot-reporter.html
    reporters: [
-    'spec',
+        "spec",
        [
-      'junit',
+            "junit",
            {
                outputDir: reportsOutputDir,
                outputFileFormat(options) {
-          return `authentik-${buildNumber}-${options.cid}.xml`
+                    return `authentik-${buildNumber}-${options.cid}.xml`;
                },
                errorOptions: {
-          failure: 'message',
-          stacktrace: 'stack',
+                    failure: "message",
+                    stacktrace: "stack",
                },
            },
        ],
@ -156,7 +156,7 @@ exports.config = {
    // Options to be passed to Mocha.
    // See the full list at http://mochajs.org/
    mochaOpts: {
-    ui: 'bdd',
+        ui: "bdd",
        timeout: debug ? 24 * 60 * 60 * 1000 : defaultTimeoutInterval,
    },
    //
@ -281,7 +281,7 @@ exports.config = {
     */
    onComplete(exitCode, config, capabilities, results) {
        if (exitCode !== 0) {
-      fs.writeFileSync(path.join(reportsOutputDir, './failure.txt'), 'Tests failed')
+            fs.writeFileSync(path.join(reportsOutputDir, "./failure.txt"), "Tests failed");
        }
    },
    /**
@ -291,4 +291,4 @@ exports.config = {
     */
    // onReload: function(oldSessionId, newSessionId) {
    // }
-}
+};
--- a/web/authentik-live-tests/wdio.conf.js
+++ b/web/authentik-live-tests/wdio.conf.js
@ -1,10 +1,10 @@
-const fs = require('fs')
-const path = require('path')
+const fs = require("fs");
+const path = require("path");

-const debug = process.env.DEBUG
-const defaultTimeoutInterval = 200000
-const buildNumber = process.env.BUILD_NUMBER ? process.env.BUILD_NUMBER : '0'
-const reportsOutputDir = './reports'
+const debug = process.env.DEBUG;
+const defaultTimeoutInterval = 200000;
+const buildNumber = process.env.BUILD_NUMBER ? process.env.BUILD_NUMBER : "0";
+const reportsOutputDir = "./reports";

 exports.config = {
    //
@ -14,7 +14,7 @@ exports.config = {
    //
    // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
    // on a remote machine).
-  runner: 'local',
+    runner: "local",
    //
    // ==================
    // Specify Test Files
@ -24,7 +24,7 @@ exports.config = {
    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
    // directory is where your package.json resides, so `wdio` will be called from there.
    //
-  specs: ['./tests/*.js'],
+    specs: ["./tests/*.js"],
    // Patterns to exclude.
    exclude: [
        // 'path/to/excluded/files'
@ -58,7 +58,7 @@ exports.config = {
            // 5 instances get started at a time.
            maxInstances: 1,
            //
-      browserName: 'chrome',
+            browserName: "chrome",
            acceptInsecureCerts: true,
            // If outputDir is provided WebdriverIO can capture driver session logs
            // it is possible to configure which logTypes to include/exclude.
@ -73,7 +73,7 @@ exports.config = {
    // Define all options that are relevant for the WebdriverIO instance here
    //
    // Level of logging verbosity: trace | debug | info | warn | error | silent
-  logLevel: 'warn',
+    logLevel: "warn",
    //
    // Set specific log levels per logger
    // loggers:
@ -97,7 +97,7 @@ exports.config = {
    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
    // gets prepended directly.
-  baseUrl: 'http://localhost',
+    baseUrl: "http://localhost",
    //
    // Default timeout for all waitFor* commands.
    waitforTimeout: 10000,
@ -113,7 +113,7 @@ exports.config = {
    // Services take over a specific job you don't want to take care of. They enhance
    // your test setup with almost no effort. Unlike plugins, they don't add new
    // commands. Instead, they hook themselves up into the test process.
-  services: ['chromedriver'],
+    services: ["chromedriver"],

    // Framework you want to run your specs with.
    // The following are supported: Mocha, Jasmine, and Cucumber
@ -121,7 +121,7 @@ exports.config = {
    //
    // Make sure you have the wdio adapter package for the specific framework installed
    // before running any tests.
-  framework: 'mocha',
+    framework: "mocha",
    //
    // The number of times to retry the entire specfile when it fails as a whole
    // specFileRetries: 1,
@ -136,17 +136,17 @@ exports.config = {
    // The only one supported by default is 'dot'
    // see also: https://webdriver.io/docs/dot-reporter.html
    reporters: [
-    'spec',
+        "spec",
        [
-      'junit',
+            "junit",
            {
                outputDir: reportsOutputDir,
                outputFileFormat(options) {
-          return `authentik-${buildNumber}-${options.cid}.xml`
+                    return `authentik-${buildNumber}-${options.cid}.xml`;
                },
                errorOptions: {
-          failure: 'message',
-          stacktrace: 'stack',
+                    failure: "message",
+                    stacktrace: "stack",
                },
            },
        ],
@ -156,7 +156,7 @@ exports.config = {
    // Options to be passed to Mocha.
    // See the full list at http://mochajs.org/
    mochaOpts: {
-    ui: 'bdd',
+        ui: "bdd",
        timeout: debug ? 24 * 60 * 60 * 1000 : defaultTimeoutInterval,
    },
    //
@ -281,7 +281,7 @@ exports.config = {
     */
    onComplete(exitCode, config, capabilities, results) {
        if (exitCode !== 0) {
-      fs.writeFileSync(path.join(reportsOutputDir, './failure.txt'), 'Tests failed')
+            fs.writeFileSync(path.join(reportsOutputDir, "./failure.txt"), "Tests failed");
        }
    },
    /**
@ -291,4 +291,4 @@ exports.config = {
     */
    // onReload: function(oldSessionId, newSessionId) {
    // }
-}
+};
--- a/web/src/admin/applications/wizard/ak-application-wizard.ts
+++ b/web/src/admin/applications/wizard/ak-application-wizard.ts
@ -80,7 +80,9 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) {
        ) {
            this.providerCache.set(this.wizardState.providerModel, this.wizardState.provider);
            const prevProvider = this.providerCache.get(providerModel);
-            this.wizardState.provider = prevProvider ?? {};
+            this.wizardState.provider = prevProvider ?? {
+                name: `Provider for ${this.wizardState.app.name}`,
+            };
            const newSteps = [...this.steps];
            const method = newSteps.find(({ id }) => id === "auth-method");
            if (!method) {
--- a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts
+++ b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.choices.ts
@ -60,14 +60,14 @@ const _providerModelsTable: ProviderType[] = [
        "samlprovider-manual",
        msg("SAML Manual configuration"),
        msg("Configure SAML provider manually"),
-        () => html`<p>Under construction</p>`,
+        () => html`<ak-application-wizard-authentication-by-saml-configuration></ak-application-wizard-authentication-by-saml-configuration>`,
        ProviderModelEnum.SamlSamlprovider
    ],
    [
        "samlprovider-import",
        msg("SAML Import Configuration"),
        msg("Create a SAML provider by importing its metadata"),
-        () => html`<p>Under construction</p>`,
+        () => html`<ak-application-wizard-authentication-by-saml-import></ak-application-wizard-authentication-by-saml-import>`,
        ProviderModelEnum.SamlSamlprovider
    ],
 ];
--- a/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts
+++ b/web/src/admin/applications/wizard/auth-method-choice/ak-application-wizard-authentication-method-choice.ts
@ -29,7 +29,9 @@ export class ApplicationWizardAuthenticationMethodChoice extends BasePanel {

    validator() {
        const radios = Array.from(this.form.querySelectorAll('input[type="radio"]'));
-        const chosen = radios.find((radio: Element) => radio instanceof HTMLInputElement && radio.checked);
+        const chosen = radios.find(
+            (radio: Element) => radio instanceof HTMLInputElement && radio.checked,
+        );
        return chosen;
    }

--- a/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts
+++ b/web/src/admin/applications/wizard/commit/ak-application-wizard-commit-application.ts
@ -1,3 +1,4 @@
+import { EVENT_REFRESH } from "@goauthentik/app/common/constants";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import "@goauthentik/components/ak-radio-input";
 import "@goauthentik/components/ak-switch-input";
@ -6,8 +7,14 @@ import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";

-import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
-import { TemplateResult, html } from "lit";
+import { msg } from "@lit/localize";
+import { customElement, state } from "@lit/reactive-element/decorators.js";
+import { TemplateResult, html, nothing } from "lit";
+
+import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
+import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css";
+import PFTitle from "@patternfly/patternfly/components/Title/title.css";
+import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css";

 import {
    ApplicationRequest,
@ -30,16 +37,35 @@ function cleanApplication(app: Partial<ApplicationRequest>): ApplicationRequest

 type ProviderModelType = Exclude<ModelRequest["providerModel"], "11184809">;

+type State = { state: "idle" | "running" | "error" | "done"; label: string | TemplateResult };
+
+const idleState: State = { state: "idle", label: "" };
+const runningState: State = { state: "running", label: msg("Saving Application...") };
+const errorState: State = {
+    state: "error",
+    label: msg(html`There was an error in saving your application.<br />The error message was:`),
+};
+const doneState: State = { state: "done", label: msg("Your application has been saved") };
+
@customElement("ak-application-wizard-commit-application")
 export class ApplicationWizardCommitApplication extends BasePanel {
-    state: "idle" | "running" | "done" = "idle";
+    static get styles() {
+        return [...super.styles, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper];
+    }
+
+    @state()
+    commitState: State = idleState;
+
+    @state()
+    errors: string[] = [];
+
    response?: TransactionApplicationResponse;

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    willUpdate(_changedProperties: Map<string, any>) {
-        if (this.state === "idle") {
+        if (this.commitState === idleState) {
            this.response = undefined;
-            this.state = "running";
+            this.commitState = runningState;
            const provider = providerModelsList.find(
                ({ formName }) => formName === this.wizard.providerModel,
            );
@ -67,27 +93,55 @@ export class ApplicationWizardCommitApplication extends BasePanel {
    async send(
        data: TransactionApplicationRequest,
    ): Promise<TransactionApplicationResponse | void> {
-        new CoreApi(DEFAULT_CONFIG)
-            .coreTransactionalApplicationsUpdate({ transactionApplicationRequest: data })
-            .then(
-                (response) => {
-                    this.response = response;
-                    this.state = "done";
-                },
-                (error) => {
-                    console.log(error);
-                },
-            );
+        this.errors = [];
+        const timeout = new Promise((resolve) => {
+            setTimeout(resolve, 1200);
+        });
+        const network = new CoreApi(DEFAULT_CONFIG).coreTransactionalApplicationsUpdate({
+            transactionApplicationRequest: data,
+        });
+        Promise.allSettled([network, timeout]).then(([network_resolution]) => {
+            if (network_resolution.status === "rejected") {
+                this.commitState = errorState;
+                console.log(network_resolution.reason);
+                return;
+            }
+
+            if (network_resolution.status === "fulfilled") {
+                if (!network_resolution.value.valid) {
+                    this.commitState = errorState;
+                    this.errors = network_resolution.value.logs;
+                    return;
+                }
+
+                this.response = network_resolution.value;
+                this.dispatchCustomEvent(EVENT_REFRESH);
+                this.commitState = doneState;
+            }
+        });
    }

    render(): TemplateResult {
        return html`
            <div>
-                <h3>Current result:</h3>
-                <p>State: ${this.state}</p>
-                <pre>${JSON.stringify(this.wizard, null, 2)}</pre>
-                <p>Response:</p>
-                <pre>${JSON.stringify(this.response, null, 2)}</pre>
+                <div class="pf-l-bullseye">
+                    <div class="pf-c-empty-state pf-m-lg">
+                        <div class="pf-c-empty-state__content">
+                            <i
+                                class="fas fa- fa-cogs pf-c-empty-state__icon"
+                                aria-hidden="true"
+                            ></i>
+                            <h1 class="pf-c-title pf-m-lg">${this.commitState.label}</h1>
+                            ${this.errors.length > 0
+                                ? html`<ul>
+                                      ${this.errors.map(
+                                          (msg) => html`<li><code>${msg}</code></li>`,
+                                      )}
+                                  </ul>`
+                                : nothing}
+                        </div>
+                    </div>
+                </div>
            </div>
        `;
    }
--- a/web/src/admin/applications/wizard/methods/ak-application-wizard-authentication-method.ts
+++ b/web/src/admin/applications/wizard/methods/ak-application-wizard-authentication-method.ts
@ -6,6 +6,8 @@ import "./ldap/ak-application-wizard-authentication-by-ldap";
 import "./oauth/ak-application-wizard-authentication-by-oauth";
 import "./proxy/ak-application-wizard-authentication-for-reverse-proxy";
 import "./proxy/ak-application-wizard-authentication-for-single-forward-proxy";
+import "./saml/ak-application-wizard-authentication-by-saml-configuration";
+import "./saml/ak-application-wizard-authentication-by-saml-import";

 // prettier-ignore

--- a/web/src/admin/applications/wizard/methods/saml/SamlProviderOptions.ts
+++ b/web/src/admin/applications/wizard/methods/saml/SamlProviderOptions.ts
@ -2,58 +2,32 @@ import { msg } from "@lit/localize";

 import { DigestAlgorithmEnum, SignatureAlgorithmEnum, SpBindingEnum } from "@goauthentik/api";

-export const spBindingOptions = [
-    {
-        label: msg("Redirect"),
-        value: SpBindingEnum.Redirect,
-        default: true,
-    },
-    {
-        label: msg("Post"),
-        value: SpBindingEnum.Post,
-    },
-];
+type Option<T> = [string, T, boolean?];

-export const digestAlgorithmOptions = [
-    {
-        label: "SHA1",
-        value: DigestAlgorithmEnum._200009Xmldsigsha1,
-    },
-    {
-        label: "SHA256",
-        value: DigestAlgorithmEnum._200104Xmlencsha256,
-        default: true,
-    },
-    {
-        label: "SHA384",
-        value: DigestAlgorithmEnum._200104XmldsigMoresha384,
-    },
-    {
-        label: "SHA512",
-        value: DigestAlgorithmEnum._200104Xmlencsha512,
-    },
-];
+function toOptions<T>(options: Option<T>[]) {
+    return options.map(([label, value, isDefault]: Option<T>) => ({
+        label,
+        value,
+        default: isDefault ?? false,
+    }));
+}

-export const signatureAlgorithmOptions = [
-    {
-        label: "RSA-SHA1",
-        value: SignatureAlgorithmEnum._200009XmldsigrsaSha1,
-    },
-    {
-        label: "RSA-SHA256",
-        value: SignatureAlgorithmEnum._200104XmldsigMorersaSha256,
-        default: true,
-    },
-    {
-        label: "RSA-SHA384",
-        value: SignatureAlgorithmEnum._200104XmldsigMorersaSha384,
-    },
-    {
-        label: "RSA-SHA512",
-        value: SignatureAlgorithmEnum._200104XmldsigMorersaSha512,
-    },
-    {
-        label: "DSA-SHA1",
-        value: SignatureAlgorithmEnum._200009XmldsigdsaSha1,
-    },
-];
+export const spBindingOptions = toOptions([
+    [msg("Redirect"), SpBindingEnum.Redirect, true],
+    [msg("Post"), SpBindingEnum.Post],
+]);
+
+export const digestAlgorithmOptions = toOptions([
+    ["SHA1", DigestAlgorithmEnum._200009Xmldsigsha1],
+    ["SHA256", DigestAlgorithmEnum._200104Xmlencsha256, true],
+    ["SHA384", DigestAlgorithmEnum._200104XmldsigMoresha384],
+    ["SHA512", DigestAlgorithmEnum._200104Xmlencsha512],
+]);
+
+export const signatureAlgorithmOptions = toOptions([
+    ["RSA-SHA1", SignatureAlgorithmEnum._200009XmldsigrsaSha1],
+    ["RSA-SHA256", SignatureAlgorithmEnum._200104XmldsigMorersaSha256, true],
+    ["RSA-SHA384", SignatureAlgorithmEnum._200104XmldsigMorersaSha384],
+    ["RSA-SHA512", SignatureAlgorithmEnum._200104XmldsigMorersaSha512],
+    ["DSA-SHA1", SignatureAlgorithmEnum._200009XmldsigdsaSha1],
+]);