web/admin: only show http basic fields for proxy provider when enabled

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-04 00:28:51 +02:00
parent 1835981f3d
commit 46e0571ed0
2 changed files with 30 additions and 15 deletions

View file

@ -61,10 +61,10 @@ export class ProviderListPage extends TablePage<Provider> {
${item.name}
</a>`,
item.assignedApplicationName ?
html`<i class="pf-icon pf-icon-ok"></i>
html`<i class="pf-icon pf-icon-ok pf-m-success"></i>
${t`Assigned to application `}
<a href="#/core/applications/${item.assignedApplicationSlug}">${item.assignedApplicationName}</a>` :
html`<i class="pf-icon pf-icon-warning-triangle"></i>
html`<i class="pf-icon pf-icon-warning-triangle pf-m-warning"></i>
${t`Warning: Provider not assigned to any application.`}`,
html`${item.verboseName}`,
html`

View file

@ -18,12 +18,16 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
id: value,
}).then(provider => {
this.provider = provider;
this.showHttpBasic = first(provider.basicAuthEnabled, true);
});
}
@property({attribute: false})
provider?: ProxyProvider;
@property({type: Boolean})
showHttpBasic = true;
getSuccessMessage(): string {
if (this.provider) {
return t`Successfully updated provider.`;
@ -45,6 +49,24 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
}
};
renderHttpBasic(): TemplateResult {
if (!this.showHttpBasic) {
return html``;
}
return html`<ak-form-element-horizontal
label=${t`HTTP-Basic Username Key`}
name="basicAuthUserAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`HTTP-Basic Password Key`}
name="basicAuthPasswordAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`User/Group Attribute used for the password part of the HTTP-Basic Header.`}</p>
</ak-form-element-horizontal>`;
}
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal
@ -103,6 +125,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<span slot="header">
${t`Advanced protocol settings`}
</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${t`Certificate`}
name="certificate">
@ -127,25 +150,17 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<ak-form-element-horizontal name="basicAuthEnabled">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${this.provider?.basicAuthEnabled || false}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.provider?.basicAuthEnabled, false)} @change=${(ev: Event) => {
const el = ev.target as HTMLInputElement;
this.showHttpBasic = el.checked;
}}>
<label class="pf-c-check__label">
${t`Set HTTP-Basic Authentication`}
</label>
</div>
<p class="pf-c-form__helper-text">${t`Set a custom HTTP-Basic Authentication header based on values from authentik.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`HTTP-Basic Username Key`}
name="basicAuthUserAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthUserAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`HTTP-Basic Password Key`}
name="basicAuthPasswordAttribute">
<input type="text" value="${ifDefined(this.provider?.basicAuthPasswordAttribute)}" class="pf-c-form-control">
<p class="pf-c-form__helper-text">${t`User/Group Attribute used for the password part of the HTTP-Basic Header.`}</p>
</ak-form-element-horizontal>
${this.renderHttpBasic()}
</div>
</ak-form-group>
</form>`;