From 46e0571ed023664c8885356884258c9f1f150ee6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 4 Apr 2021 00:28:51 +0200
Subject: [PATCH] web/admin: only show http basic fields for proxy provider
 when enabled

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/pages/providers/ProviderListPage.ts   |  4 +-
 .../providers/proxy/ProxyProviderForm.ts      | 41 +++++++++++++------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/providers/ProviderListPage.ts b/web/src/pages/providers/ProviderListPage.ts
index 5d29fcd30..8a2d94a7c 100644
--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/web/src/pages/providers/ProviderListPage.ts
@@ -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`
diff --git a/web/src/pages/providers/proxy/ProxyProviderForm.ts b/web/src/pages/providers/proxy/ProxyProviderForm.ts
index e3e990070..1128c5d6c 100644
--- a/web/src/pages/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/pages/providers/proxy/ProxyProviderForm.ts
@@ -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>`;