web: re-format with prettier
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -1,4 +1,11 @@
|
||||
import { CoreApi, Application, ProvidersApi, Provider, PolicyEngineMode, CapabilitiesEnum } from "authentik-api";
|
||||
import {
|
||||
CoreApi,
|
||||
Application,
|
||||
ProvidersApi,
|
||||
Provider,
|
||||
PolicyEngineMode,
|
||||
CapabilitiesEnum,
|
||||
} from "authentik-api";
|
||||
import { t } from "@lingui/macro";
|
||||
import { CSSResult, customElement, property } from "lit-element";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
@ -17,10 +24,9 @@ import { first } from "../../utils";
|
||||
|
||||
@customElement("ak-application-form")
|
||||
export class ApplicationForm extends ModelForm<Application, string> {
|
||||
|
||||
loadInstance(pk: string): Promise<Application> {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsRetrieve({
|
||||
slug: pk
|
||||
slug: pk,
|
||||
});
|
||||
}
|
||||
|
||||
@ -47,18 +53,18 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||
if (this.instance) {
|
||||
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({
|
||||
slug: this.instance.slug,
|
||||
applicationRequest: data
|
||||
applicationRequest: data,
|
||||
});
|
||||
} else {
|
||||
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsCreate({
|
||||
applicationRequest: data
|
||||
applicationRequest: data,
|
||||
});
|
||||
}
|
||||
return config().then((c) => {
|
||||
if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
|
||||
const icon = this.getFormFile();
|
||||
if (icon || this.clearIcon) {
|
||||
return writeOp.then(app => {
|
||||
return writeOp.then((app) => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsSetIconCreate({
|
||||
slug: app.slug,
|
||||
file: icon,
|
||||
@ -67,12 +73,12 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return writeOp.then(app => {
|
||||
return writeOp.then((app) => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsSetIconUrlCreate({
|
||||
slug: app.slug,
|
||||
setIconURLRequest: {
|
||||
url: data.metaIcon || "",
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -81,7 +87,7 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||
|
||||
groupProviders(providers: Provider[]): TemplateResult {
|
||||
const m = new Map<string, Provider[]>();
|
||||
providers.forEach(p => {
|
||||
providers.forEach((p) => {
|
||||
if (!m.has(p.verboseName || "")) {
|
||||
m.set(p.verboseName || "", []);
|
||||
}
|
||||
@ -91,9 +97,11 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||
return html`
|
||||
${Array.from(m).map(([group, providers]) => {
|
||||
return html`<optgroup label=${group}>
|
||||
${providers.map(p => {
|
||||
const selected = (this.instance?.provider === p.pk) || (this.provider === p.pk);
|
||||
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`;
|
||||
${providers.map((p) => {
|
||||
const selected = this.instance?.provider === p.pk || this.provider === p.pk;
|
||||
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>
|
||||
${p.name}
|
||||
</option>`;
|
||||
})}
|
||||
</optgroup>`;
|
||||
})}
|
||||
@ -102,129 +110,178 @@ export class ApplicationForm extends ModelForm<Application, string> {
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Name`}
|
||||
?required=${true}
|
||||
name="name">
|
||||
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Application's display Name.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Slug`}
|
||||
?required=${true}
|
||||
name="slug">
|
||||
<input type="text" value="${ifDefined(this.instance?.slug)}" class="pf-c-form-control" required>
|
||||
<ak-form-element-horizontal label=${t`Slug`} ?required=${true} name="slug">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.slug)}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">${t`Internal application name, used in URLs.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Provider`}
|
||||
name="provider">
|
||||
<ak-form-element-horizontal label=${t`Provider`} name="provider">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.instance?.provider === undefined}>---------</option>
|
||||
${until(new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then(providers => {
|
||||
return this.groupProviders(providers.results);
|
||||
}), html`<option>${t`Loading...`}</option>`)}
|
||||
<option value="" ?selected=${this.instance?.provider === undefined}>
|
||||
---------
|
||||
</option>
|
||||
${until(
|
||||
new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then((providers) => {
|
||||
return this.groupProviders(providers.results);
|
||||
}),
|
||||
html`<option>${t`Loading...`}</option>`,
|
||||
)}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">${t`Select a provider that this application should use. Alternatively, create a new provider.`}</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Select a provider that this application should use. Alternatively, create a new provider.`}
|
||||
</p>
|
||||
<ak-dropdown class="pf-c-dropdown">
|
||||
<button class="pf-m-primary pf-c-dropdown__toggle" type="button">
|
||||
<span class="pf-c-dropdown__toggle-text">${t`Create provider`}</span>
|
||||
<i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
|
||||
<i
|
||||
class="fas fa-caret-down pf-c-dropdown__toggle-icon"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</button>
|
||||
<ul class="pf-c-dropdown__menu" hidden>
|
||||
${until(new ProvidersApi(DEFAULT_CONFIG).providersAllTypesList().then((types) => {
|
||||
return types.map((type) => {
|
||||
return html`<li>
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${t`Create`}
|
||||
</span>
|
||||
<span slot="header">
|
||||
${t`Create ${type.name}`}
|
||||
</span>
|
||||
<ak-proxy-form
|
||||
slot="form"
|
||||
type=${type.component}>
|
||||
</ak-proxy-form>
|
||||
<button type="button" slot="trigger" class="pf-c-dropdown__menu-item">
|
||||
${type.name}<br>
|
||||
<small>${type.description}</small>
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</li>`;
|
||||
});
|
||||
}), html`<ak-spinner></ak-spinner>`)}
|
||||
${until(
|
||||
new ProvidersApi(DEFAULT_CONFIG)
|
||||
.providersAllTypesList()
|
||||
.then((types) => {
|
||||
return types.map((type) => {
|
||||
return html`<li>
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${t`Create`} </span>
|
||||
<span slot="header">
|
||||
${t`Create ${type.name}`}
|
||||
</span>
|
||||
<ak-proxy-form slot="form" type=${type.component}>
|
||||
</ak-proxy-form>
|
||||
<button
|
||||
type="button"
|
||||
slot="trigger"
|
||||
class="pf-c-dropdown__menu-item"
|
||||
>
|
||||
${type.name}<br />
|
||||
<small>${type.description}</small>
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
</li>`;
|
||||
});
|
||||
}),
|
||||
html`<ak-spinner></ak-spinner>`,
|
||||
)}
|
||||
</ul>
|
||||
</ak-dropdown>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Policy engine mode`}
|
||||
?required=${true}
|
||||
name="policyEngineMode">
|
||||
name="policyEngineMode"
|
||||
>
|
||||
<select class="pf-c-form-control">
|
||||
<option value=${PolicyEngineMode.Any} ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}>
|
||||
<option
|
||||
value=${PolicyEngineMode.Any}
|
||||
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.Any}
|
||||
>
|
||||
${t`ANY, any policy must match to grant access.`}
|
||||
</option>
|
||||
<option value=${PolicyEngineMode.All} ?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}>
|
||||
<option
|
||||
value=${PolicyEngineMode.All}
|
||||
?selected=${this.instance?.policyEngineMode === PolicyEngineMode.All}
|
||||
>
|
||||
${t`ALL, all policies must match to grant access.`}
|
||||
</option>
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-group .expanded=${true}>
|
||||
<span slot="header">
|
||||
${t`UI settings`}
|
||||
</span>
|
||||
<span slot="header"> ${t`UI settings`} </span>
|
||||
<div slot="body" class="pf-c-form">
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Launch URL`}
|
||||
name="metaLaunchUrl">
|
||||
<input type="text" value="${ifDefined(this.instance?.metaLaunchUrl)}" class="pf-c-form-control">
|
||||
<p class="pf-c-form__helper-text">${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}</p>
|
||||
<ak-form-element-horizontal label=${t`Launch URL`} name="metaLaunchUrl">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.metaLaunchUrl)}"
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
${until(config().then((c) => {
|
||||
if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
|
||||
${until(
|
||||
config().then((c) => {
|
||||
if (c.capabilities.includes(CapabilitiesEnum.SaveMedia)) {
|
||||
return html`<ak-form-element-horizontal
|
||||
label=${t`Icon`}
|
||||
name="metaIcon"
|
||||
>
|
||||
<input type="file" value="" class="pf-c-form-control" />
|
||||
${this.instance?.metaIcon
|
||||
? html`
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Currently set to:`}
|
||||
${this.instance?.metaIcon}
|
||||
</p>
|
||||
`
|
||||
: html``}
|
||||
</ak-form-element-horizontal>
|
||||
${this.instance?.metaIcon
|
||||
? html`
|
||||
<ak-form-element-horizontal>
|
||||
<div class="pf-c-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="pf-c-check__input"
|
||||
@change=${(ev: Event) => {
|
||||
const target =
|
||||
ev.target as HTMLInputElement;
|
||||
this.clearIcon = target.checked;
|
||||
}}
|
||||
/>
|
||||
<label class="pf-c-check__label">
|
||||
${t`Clear icon`}
|
||||
</label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Delete currently set icon.`}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
`
|
||||
: html``}`;
|
||||
}
|
||||
return html`<ak-form-element-horizontal
|
||||
label=${t`Icon`}
|
||||
name="metaIcon">
|
||||
<input type="file" value="" class="pf-c-form-control">
|
||||
${this.instance?.metaIcon ? html`
|
||||
<p class="pf-c-form__helper-text">${t`Currently set to:`} ${this.instance?.metaIcon}</p>
|
||||
`: html``}
|
||||
</ak-form-element-horizontal>
|
||||
${this.instance?.metaIcon ? html`
|
||||
<ak-form-element-horizontal>
|
||||
<div class="pf-c-check">
|
||||
<input type="checkbox" class="pf-c-check__input" @change=${(ev: Event) => {
|
||||
const target = ev.target as HTMLInputElement;
|
||||
this.clearIcon = target.checked;
|
||||
}}>
|
||||
<label class="pf-c-check__label">
|
||||
${t`Clear icon`}
|
||||
</label>
|
||||
</div>
|
||||
<p class="pf-c-form__helper-text">${t`Delete currently set icon.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
`: html``}`;
|
||||
}
|
||||
return html`<ak-form-element-horizontal
|
||||
label=${t`Icon`}
|
||||
name="metaIcon">
|
||||
<input type="text" value="${first(this.instance?.metaIcon, "")}" class="pf-c-form-control">
|
||||
</ak-form-element-horizontal>`;
|
||||
}))}
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Description`}
|
||||
name="metaDescription">
|
||||
<textarea class="pf-c-form-control">${ifDefined(this.instance?.metaDescription)}</textarea>
|
||||
name="metaIcon"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value="${first(this.instance?.metaIcon, "")}"
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>`;
|
||||
}),
|
||||
)}
|
||||
<ak-form-element-horizontal label=${t`Description`} name="metaDescription">
|
||||
<textarea class="pf-c-form-control">
|
||||
${ifDefined(this.instance?.metaDescription)}</textarea
|
||||
>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Publisher`}
|
||||
name="metaPublisher">
|
||||
<input type="text" value="${ifDefined(this.instance?.metaPublisher)}" class="pf-c-form-control">
|
||||
<ak-form-element-horizontal label=${t`Publisher`} name="metaPublisher">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.metaPublisher)}"
|
||||
class="pf-c-form-control"
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
</div>
|
||||
</ak-form-group>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user