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} ${item.name}
</a>`, </a>`,
item.assignedApplicationName ? 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 `} ${t`Assigned to application `}
<a href="#/core/applications/${item.assignedApplicationSlug}">${item.assignedApplicationName}</a>` : <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.`}`, ${t`Warning: Provider not assigned to any application.`}`,
html`${item.verboseName}`, html`${item.verboseName}`,
html` html`

View file

@ -18,12 +18,16 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
id: value, id: value,
}).then(provider => { }).then(provider => {
this.provider = provider; this.provider = provider;
this.showHttpBasic = first(provider.basicAuthEnabled, true);
}); });
} }
@property({attribute: false}) @property({attribute: false})
provider?: ProxyProvider; provider?: ProxyProvider;
@property({type: Boolean})
showHttpBasic = true;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.provider) { if (this.provider) {
return t`Successfully updated 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 { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal <ak-form-element-horizontal
@ -103,6 +125,7 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<span slot="header"> <span slot="header">
${t`Advanced protocol settings`} ${t`Advanced protocol settings`}
</span> </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Certificate`} label=${t`Certificate`}
name="certificate"> name="certificate">
@ -127,25 +150,17 @@ export class ProxyProviderFormPage extends Form<ProxyProvider> {
<ak-form-element-horizontal name="basicAuthEnabled"> <ak-form-element-horizontal name="basicAuthEnabled">
<div class="pf-c-check"> <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"> <label class="pf-c-check__label">
${t`Set HTTP-Basic Authentication`} ${t`Set HTTP-Basic Authentication`}
</label> </label>
</div> </div>
<p class="pf-c-form__helper-text">${t`Set a custom HTTP-Basic Authentication header based on values from authentik.`}</p> <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>
<ak-form-element-horizontal ${this.renderHttpBasic()}
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>
</div> </div>
</ak-form-group> </ak-form-group>
</form>`; </form>`;