web: Without error handling, this is complete, but I still need @BeryJu (Jens)

for help with the SAML Upload (it doesn't appear to be correctly handled?) and
the error handling.
This commit is contained in:
Ken Sternberg 2023-09-05 13:13:53 -07:00
parent b7ea6d163b
commit bd831dc438
6 changed files with 52 additions and 6 deletions

View file

@ -20,7 +20,7 @@ fi;
# The path to the working folder for the test project, as a subfolder of the monorepo. This will be
# help us find where the driver is kept for comparison.
SUBFOLDER="authentik-live-tests"
SUBFOLDER="wdio"
# The variant of Chrome we expect under Linux. There are a lot of variants, like Midori, chromium,
# chromium-browser, etc. If you're not running the version supplied by Google, you'll have to change

View file

@ -30,7 +30,7 @@ fi;
# The path to the working folder for the test project, as a subfolder of the monorepo. This will be
# help us find where the driver is kept for comparison.
SUBFOLDER="authentik-live-tests"
SUBFOLDER="wdio"
# The variant of Chrome we expect under Linux. There are a lot of variants, like Midori, chromium,
# chromium-browser, etc. If you're not running the version supplied by Google, you'll have to change

View file

@ -117,7 +117,6 @@ export class ApplicationWizardApplicationDetails extends BaseProviderPanel {
<ak-text-input
label=${msg("TLS Server name")}
required
name="tlsServerName"
value="${first(provider?.tlsServerName, "")}"
help=${tlsServerNameHelp}

View file

@ -6,16 +6,54 @@ 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 { ifDefined } from "lit/directives/if-defined.js";
import { FlowsInstancesListDesignationEnum } from "@goauthentik/api";
import { FlowsInstancesListDesignationEnum, ProvidersSamlImportMetadataCreateRequest } from "@goauthentik/api";
import BaseProviderPanel from "../BaseProviderPanel";
import { query } from "lit/decorators.js";
import { AkFileInput } from "@goauthentik/components/ak-file-input";
@customElement("ak-application-wizard-authentication-by-saml-import")
export class ApplicationWizardProviderSamlImport extends BaseProviderPanel {
@query('ak-file-input[name="metadata"]')
fileInput!: AkFileInput;
handleChange(ev: InputEvent) {
if (!ev.target) {
console.warn(`Received event with no target: ${ev}`);
return;
}
const target = ev.target as HTMLInputElement;
if (target.type === "file") {
const file = this.fileInput.files?.[0] ?? null;
if (file) {
this.dispatchWizardUpdate({
update: {
provider: {
file
},
},
status: this.form.checkValidity() ? "valid" : "invalid",
});
}
return;
}
super.handleChange(ev);
}
render() {
const provider = this.wizard.provider as ProvidersSamlImportMetadataCreateRequest | undefined;
return html` <form class="pf-c-form pf-m-horizontal" @input=${this.handleChange}>
<ak-text-input name="name" label=${msg("Name")} required></ak-text-input>
<ak-text-input
name="name"
value=${ifDefined(provider?.name)}
label=${msg("Name")}
required
help=${msg("Method's display Name.")}
></ak-text-input>
<ak-form-element-horizontal
label=${msg("Authorization flow")}

View file

@ -6,11 +6,13 @@ import {
RadiusProviderRequest,
SAMLProviderRequest,
SCIMProviderRequest,
ProvidersSamlImportMetadataCreateRequest,
} from "@goauthentik/api";
export type OneOfProvider =
| Partial<SCIMProviderRequest>
| Partial<SAMLProviderRequest>
| Partial<ProvidersSamlImportMetadataCreateRequest>
| Partial<RadiusProviderRequest>
| Partial<ProxyProviderRequest>
| Partial<OAuth2ProviderRequest>

View file

@ -2,7 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import { msg } from "@lit/localize";
import { html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { customElement, property, query } from "lit/decorators.js";
@customElement("ak-file-input")
export class AkFileInput extends AKElement {
@ -40,6 +40,13 @@ export class AkFileInput extends AKElement {
@property({ type: String })
help = "";
@query('input[type="file"]')
input!: HTMLInputElement;
get files() {
return this.input.files;
}
render() {
const currentMsg =
this.value && this.current