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?
This commit is contained in:
Ken Sternberg 2023-08-28 15:33:59 -07:00
parent 93d7507d11
commit 61ef563162
9 changed files with 707 additions and 671 deletions

View File

@ -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");

View File

@ -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) {
// }
}
};

View File

@ -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) {
// }
}
};

View File

@ -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) {

View File

@ -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
],
];

View File

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

View File

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

View File

@ -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

View File

@ -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],
]);