web/admin: use radio for client type (#5499)

* web/admin: use radio for client type

also fix search select not correctly passing all items in .selected callback

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* include unrelated typo fix

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/providers/oauth2/OAuth2ProviderForm.ts

@@ -167,34 +167,30 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
                         ?required=${true}
                         name="clientType"
                     >
-                        <select
+                        <ak-radio
-                            class="pf-c-form-control"
+                            @change=${(ev: CustomEvent<ClientTypeEnum>) => {
-                            @change=${(ev: Event) => {
+                                if (ev.detail === ClientTypeEnum.Public) {
-                                const target = ev.target as HTMLSelectElement;
-                                if (target.selectedOptions[0].value === ClientTypeEnum.Public) {
                                     this.showClientSecret = false;
                                 } else {
                                     this.showClientSecret = true;
                                 }
                             }}
+                            .options=${[
+                                {
+                                    label: t`Confidential`,
+                                    value: ClientTypeEnum.Confidential,
+                                    default: true,
+                                    description: html`${t`Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets`}`,
+                                },
+                                {
+                                    label: t`Public`,
+                                    value: ClientTypeEnum.Public,
+                                    description: html`${t`Public clients are incapable of maintaining the confidentiality and should use methods like PKCE. `}`,
+                                },
+                            ]}
+                            .value=${this.instance?.clientType}
                         >
-                            <option
+                        </ak-radio>
-                                value=${ClientTypeEnum.Confidential}
-                                ?selected=${this.instance?.clientType ===
-                                ClientTypeEnum.Confidential}
-                            >
-                                ${t`Confidential`}
-                            </option>
-                            <option
-                                value=${ClientTypeEnum.Public}
-                                ?selected=${this.instance?.clientType === ClientTypeEnum.Public}
-                            >
-                                ${t`Public`}
-                            </option>
-                        </select>
-                        <p class="pf-c-form__helper-text">
-                            ${t`Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable.`}
-                        </p>
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal
                         label=${t`Client ID`}

web/src/elements/forms/SearchSelect.ts

@@ -110,7 +110,7 @@ export class SearchSelect<T> extends AKElement {
         this.isFetchingData = true;
         this.fetchObjects(this.query).then((objects) => {
             objects.forEach((obj) => {
-                if (this.selected && this.selected(obj, this.objects || [])) {
+                if (this.selected && this.selected(obj, objects || [])) {
                     this.selectedObject = obj;
                 }
             });

web/src/locales/de.po

@@ -1415,8 +1415,12 @@ msgid "Confidential"
 msgstr "Vertraulich"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Vertrauenswürde Clients sind in der Lage, die Vertraulichkeit ihrer Anmeldedaten zu wahren. Öffentliche Clients sind dazu nicht in der Lage."
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Vertrauenswürde Clients sind in der Lage, die Vertraulichkeit ihrer Anmeldedaten zu wahren. Öffentliche Clients sind dazu nicht in der Lage."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5050,6 +5054,10 @@ msgstr "Proxy-Details"
 msgid "Public"
 msgstr "Öffentlich"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Öffentlicher Schlüssel"

web/src/locales/en.po

@@ -1412,8 +1412,12 @@ msgid "Confidential"
 msgstr "Confidential"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgstr "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5150,6 +5154,10 @@ msgstr "Proxy details"
 msgid "Public"
 msgstr "Public"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Public Key"

web/src/locales/es.po

@@ -1391,8 +1391,12 @@ msgid "Confidential"
 msgstr "Confidencial"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Los clientes confidenciales son capaces de mantener la confidencialidad de sus credenciales. Los clientes públicos son incapaces."
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Los clientes confidenciales son capaces de mantener la confidencialidad de sus credenciales. Los clientes públicos son incapaces."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5026,6 +5030,10 @@ msgstr ""
 msgid "Public"
 msgstr "Público"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Clave pública"

web/src/locales/fr_FR.po

@@ -1396,8 +1396,12 @@ msgid "Confidential"
 msgstr "Confidentiel"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Les clients confidentiels sont capable de maintenir la confidentialité de leurs identifiants. Le clients publics n'en sont pas capables."
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Les clients confidentiels sont capable de maintenir la confidentialité de leurs identifiants. Le clients publics n'en sont pas capables."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5027,6 +5031,10 @@ msgstr "Informations du proxy"
 msgid "Public"
 msgstr "Public"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Clé publique"

web/src/locales/pl.po

@@ -1397,8 +1397,12 @@ msgid "Confidential"
 msgstr "Poufny"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Poufni klienci są w stanie zachować poufność swoich danych uwierzytelniających. Klienci publiczni są niezdolni."
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Poufni klienci są w stanie zachować poufność swoich danych uwierzytelniających. Klienci publiczni są niezdolni."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5036,6 +5040,10 @@ msgstr "Dane proxy"
 msgid "Public"
 msgstr "Publiczny"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Klucz publiczny"

web/src/locales/pseudo-LOCALE.po

@@ -1400,9 +1400,13 @@ msgid "Confidential"
 msgstr ""
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
 msgstr ""
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr ""
+
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
 msgstr ""
@@ -5118,6 +5122,10 @@ msgstr ""
 msgid "Public"
 msgstr ""
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr ""

web/src/locales/tr.po

@@ -1391,8 +1391,12 @@ msgid "Confidential"
 msgstr "Gizli"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "Gizli müşteriler kimlik bilgilerinin gizliliğini koruyabilir. Kamu müşterileri aciz."
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "Gizli müşteriler kimlik bilgilerinin gizliliğini koruyabilir. Kamu müşterileri aciz."
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5026,6 +5030,10 @@ msgstr ""
 msgid "Public"
 msgstr "Kamu"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "Genel Anahtar"

web/src/locales/zh-Hans.po

@@ -1365,8 +1365,12 @@ msgid "Confidential"
 msgstr "机密"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "机密客户能够对其凭据进行保密。公共客户端无此能力。"
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "机密客户能够对其凭据进行保密。公共客户端无此能力。"
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -4976,6 +4980,10 @@ msgstr "代理详情"
 msgid "Public"
 msgstr "公开"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "公钥"

web/src/locales/zh-Hant.po

@@ -1399,8 +1399,12 @@ msgid "Confidential"
 msgstr "机密"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "机密客户能够对其凭据进行保密。公共客户端无能为力。"
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "机密客户能够对其凭据进行保密。公共客户端无能为力。"
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5034,6 +5038,10 @@ msgstr "代理详情"
 msgid "Public"
 msgstr "公开"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "公钥"

web/src/locales/zh_TW.po

@@ -1399,8 +1399,12 @@ msgid "Confidential"
 msgstr "机密"
 
 #: src/admin/providers/oauth2/OAuth2ProviderForm.ts
-msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+msgid "Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets"
-msgstr "机密客户能够对其凭据进行保密。公共客户端无能为力。"
+msgstr ""
+
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+#~ msgid "Confidential clients are capable of maintaining the confidentiality of their credentials. Public clients are incapable."
+#~ msgstr "机密客户能够对其凭据进行保密。公共客户端无能为力。"
 
 #: src/admin/outposts/OutpostForm.ts
 msgid "Configuration"
@@ -5034,6 +5038,10 @@ msgstr "代理详情"
 msgid "Public"
 msgstr "公开"
 
+#: src/admin/providers/oauth2/OAuth2ProviderForm.ts
+msgid "Public clients are incapable of maintaining the confidentiality and should use methods like PKCE."
+msgstr ""
+
 #: src/admin/stages/captcha/CaptchaStageForm.ts
 msgid "Public Key"
 msgstr "公钥"

website/blog/2023-05-04-i-gambled-against-react-and-lost/item.md

@@ -108,7 +108,7 @@ My choice of Lit came down to three factors, all of which emphasized that goal o
 
 -   **Lit used a browser-native technology**. Traditional web development often involves a lot of clashing CSS files, making it difficult to use, say, a component from one library and a different component from another. Lit doesn’t have this problem because it uses a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) and the shadow DOM is a standard accepted by all browsers. We had flexibility on one end, with browsers, but on the other end, because these web components were browser-native, we could also use them across numerous frameworks (including React).
 -   **Lit offered better modularity.** With the shadow DOM functionality, I was able to isolate individual components and apply CSS to only those components. That meant greater flexibility because I could mix and match but it also meant more modularity. I didn’t need a giant CSS file that could cause all kinds of effects when changed. Instead, I had modular bundles of isolated components and individual CSS files.
--   **Lit didn’t require me to rebuild**. This was less an advantage of Lit and moreso a disadvantage of React. If I had chosen React, I would have had to rebuild authentik from the ground up, or use a lot of hacky workarounds to migrate at a slower pace. And once I had done that, I would have been limited, to a degree, to what React and the React community offered. There were things that were standard to browsers that I wouldn’t have had access to or would have only had access to if they had explicit React support. There were bridges between standard components and React components, but they were built by community projects and I didn’t want to get stuck relying on a project some [random person in Nebraska is thanklessly maintaining](https://xkcd.com/2347/).
+-   **Lit didn’t require me to rebuild**. This was less an advantage of Lit and more so a disadvantage of React. If I had chosen React, I would have had to rebuild authentik from the ground up, or use a lot of hacky workarounds to migrate at a slower pace. And once I had done that, I would have been limited, to a degree, to what React and the React community offered. There were things that were standard to browsers that I wouldn’t have had access to or would have only had access to if they had explicit React support. There were bridges between standard components and React components, but they were built by community projects and I didn’t want to get stuck relying on a project some [random person in Nebraska is thanklessly maintaining](https://xkcd.com/2347/).
 
 ### Lit and React is apples and oranges