From 82c2a202cb10effda4e28af3db1094c8bea2aece Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 3 Apr 2021 14:52:12 +0200
Subject: [PATCH] web/admin/providers/oauth2: only show client secret when
 clientType is not public

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/pages/outposts/OutpostForm.ts              |  4 ++++
 .../pages/providers/oauth2/OAuth2ProviderForm.ts   | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/outposts/OutpostForm.ts b/web/src/pages/outposts/OutpostForm.ts
index 3f9de2e2b..fcb71b87c 100644
--- a/web/src/pages/outposts/OutpostForm.ts
+++ b/web/src/pages/outposts/OutpostForm.ts
@@ -66,6 +66,10 @@ export class OutpostForm extends Form<Outpost> {
                         });
                     }), html``)}
                 </select>
+                <p class="pf-c-form__helper-text">${gettext("Selecting a service-connection enables the management of the outpost by authentik.")}</p>
+                <p class="pf-c-form__helper-text">
+                    See <a _target="blank" href="https://goauthentik.io/docs/outposts/outposts">documentation</a>.
+                </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal
                 label=${gettext("Providers")}
diff --git a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
index b1bd85935..298516650 100644
--- a/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/pages/providers/oauth2/OAuth2ProviderForm.ts
@@ -18,12 +18,16 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
             id: value,
         }).then(provider => {
             this.provider = provider;
+            this.showClientSecret = provider.clientType === OAuth2ProviderClientTypeEnum.Confidential;
         });
     }
 
     @property({attribute: false})
     provider?: OAuth2Provider;
 
+    @property({type: Boolean})
+    showClientSecret = true;
+
     getSuccessMessage(): string {
         if (this.provider) {
             return gettext("Successfully updated provider.");
@@ -79,7 +83,14 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         label=${gettext("Client type")}
                         ?required=${true}
                         name="clientType">
-                        <select class="pf-c-form-control">
+                        <select class="pf-c-form-control" @change=${(ev: Event) => {
+                            const target = ev.target as HTMLSelectElement;
+                            if (target.selectedOptions[0].value === OAuth2ProviderClientTypeEnum.Public) {
+                                this.showClientSecret = false;
+                            } else {
+                                this.showClientSecret = true;
+                            }
+                        }}>
                             <option value=${OAuth2ProviderClientTypeEnum.Confidential} ?selected=${this.provider?.clientType === OAuth2ProviderClientTypeEnum.Confidential}>
                                 ${gettext("Confidential")}
                             </option>
@@ -96,6 +107,7 @@ export class OAuth2ProviderFormPage extends Form<OAuth2Provider> {
                         <input type="text" value="${first(this.provider?.clientId, randomString(40))}" class="pf-c-form-control" required>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
+                        ?hidden=${!this.showClientSecret}
                         label=${gettext("Client Secret")}
                         name="clientSecret">
                         <input type="text" value="${first(this.provider?.clientSecret, randomString(128))}" class="pf-c-form-control">