habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: add modelform as base, start migrating

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-05-11 11:48:34 +02:00
parent fd44765ff4
commit b4d750174f
26 changed files with 320 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/pages/applications/ApplicationForm.ts
View File

@ -13,18 +13,22 @@ import "../../elements/forms/ModalForm";
import "../../elements/forms/HorizontalFormElement";
import "../../elements/forms/FormGroup";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-application-form")
export class ApplicationForm extends Form<Application> {
export class ApplicationForm extends ModelForm<Application, string> {
@property({ attribute: false })
application?: Application;
loadInstance(pk: string): Promise<Application> {
return new CoreApi(DEFAULT_CONFIG).coreApplicationsRead({
slug: pk
});
}
@property({ attribute: false })
provider?: number;
getSuccessMessage(): string {
if (this.application) {
if (this.instance) {
return t`Successfully updated application.`;
} else {
return t`Successfully created application.`;
@ -37,9 +41,9 @@ export class ApplicationForm extends Form<Application> {
send = (data: Application): Promise<Application | void> => {
let writeOp: Promise<Application>;
if (this.application) {
if (this.instance) {
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({
slug: this.application.slug,
slug: this.instance.slug,
data: data
});
} else {
@ -72,7 +76,7 @@ export class ApplicationForm extends Form<Application> {
${Array.from(m).map(([group, providers]) => {
return html`<optgroup label=${group}>
${providers.map(p => {
const selected = (this.application?.provider === p.pk) || (this.provider === p.pk);
const selected = (this.instance?.provider === p.pk) || (this.provider === p.pk);
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`;
})}
</optgroup>`;
@ -86,21 +90,21 @@ export class ApplicationForm extends Form<Application> {
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.application?.name)}" class="pf-c-form-control" required>
<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.application?.slug)}" class="pf-c-form-control" required>
<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">
<select class="pf-c-form-control">
<option value="" ?selected=${this.application?.provider === undefined}>---------</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>`)}
@ -142,10 +146,10 @@ export class ApplicationForm extends Form<Application> {
?required=${true}
name="policyEngineMode">
<select class="pf-c-form-control">
<option value=${ApplicationPolicyEngineModeEnum.Any} ?selected=${this.application?.policyEngineMode === ApplicationPolicyEngineModeEnum.Any}>
<option value=${ApplicationPolicyEngineModeEnum.Any} ?selected=${this.instance?.policyEngineMode === ApplicationPolicyEngineModeEnum.Any}>
${t`ANY, any policy must match to grant access.`}
</option>
<option value=${ApplicationPolicyEngineModeEnum.All} ?selected=${this.application?.policyEngineMode === ApplicationPolicyEngineModeEnum.All}>
<option value=${ApplicationPolicyEngineModeEnum.All} ?selected=${this.instance?.policyEngineMode === ApplicationPolicyEngineModeEnum.All}>
${t`ALL, all policies must match to grant access.`}
</option>
</select>
@ -158,23 +162,23 @@ export class ApplicationForm extends Form<Application> {
<ak-form-element-horizontal
label=${t`Launch URL`}
name="metaLaunchUrl">
<input type="text" value="${ifDefined(this.application?.metaLaunchUrl)}" class="pf-c-form-control">
<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>
<ak-form-element-horizontal
label=${t`Icon`}
name="metaIcon">
<input type="file" value="${ifDefined(this.application?.metaIcon)}" class="pf-c-form-control">
<input type="file" value="${ifDefined(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.application?.metaDescription)}</textarea>
<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.application?.metaPublisher)}" class="pf-c-form-control">
<input type="text" value="${ifDefined(this.instance?.metaPublisher)}" class="pf-c-form-control">
</ak-form-element-horizontal>
</div>
</ak-form-group>