From f5394da9f7182ff50199d3dbfe093afda61c2004 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Mon, 28 Aug 2023 11:00:25 -0700 Subject: [PATCH] web: Replace ad-hoc toggle control with ak-toggle-group (#6470) * web: Replace ad-hoc toggle control with ak-toggle-group This commit replaces various ad-hoc implementations of the Patternfly Toggle Group HTML with a web component that encapsulates all of the needed behavior and exposes a single API with a single event handler, return the value of the option clicked. The results are: Lots of visual clutter is eliminated. A single link of: ```
``` Now looks like: ``` ``` This also means that the three pages that used the Patternfly Toggle Group could eliminate all of their Patternfly PFToggleGroup needs, as well as the `justify-content: center` extension, which also eliminated the `css` import. The savings aren't as spectacular as I'd hoped: removed 178 lines, but added 123; total savings 55 lines of code. I still count this a win: we need never write another toggle component again, and any bugs, extensions or features we may want to add can be centralized or forked without risking the whole edifice. * web: minor code formatting issue. * web: adding a storybook for the ak-toggle-group component * Bugs found by CI/CD. * web: Replace ad-hoc search for CryptoCertificateKeyPairs with crypto-certificate-search (#6475) * web: Replace ad-hoc search for CryptoCertificateKeyPairs with ak-crypto-certeficate-search This commit replaces various ad-hoc implementations of `search-select` for CryptoCertificateKeyPairs with a web component that encapsulates all of the needed behavior and exposes a single API. The results are: Lots of visual clutter is eliminated. A single search of: ```HTML => { const args: CryptoCertificatekeypairsListRequest = { ordering: "name", hasKey: true, includeDetails: false, }; if (query !== undefined) { args.search = query; } const certificates = await new CryptoApi( DEFAULT_CONFIG, ).cryptoCertificatekeypairsList(args); return certificates.results; }} .renderElement=${(item: CertificateKeyPair): string => { return item.name; }} .value=${(item: CertificateKeyPair | undefined): string | undefined => { return item?.pk; }} .selected=${(item: CertificateKeyPair): boolean => { return this.instance?.tlsVerification === item.pk; }} ?blankable=${true} > ``` Now looks like: ```HTML ``` There are three searches that do not require there to be a valid key with the certificate; these are supported with the boolean property `nokey`; likewise, there is one search (in SAMLProviderForm) that states that if there is no current certificate in the SAMLProvider and only one certificate can be found in the Authentik database, use that one; this is supported with the boolean property `singleton`. These changes replace 382 lines of object-oriented invocations with 36 lines of declarative configuration, and 98 lines for the class. Overall, the code for "find a crypto certificate" has been reduced by 46%. Suggestions for a better word than `singleton` are welcome! * web: display tests for CryptoCertificateKeypair search This adds a Storybook for the CryptoCertificateKeypair search, including a mock fetch of the data. In the course of running the tests, we discovered that including the SearchSelect _class_ won't include the customElement declaration unless you include the whole file! Other bugs found: including the CSS from Storybook is different from that of LitElement native, so much so that the adapter needed to be included. FlowSearch had a similar bug. The problem only manifests when building via Webpack (which Storybook uses) and not Rollup, but we should support both in distribution. --- web/src/admin/blueprints/BlueprintForm.ts | 69 ++-------- .../common/ak-crypto-certificate-search.ts | 130 ++++++++++++++++++ .../admin/common/ak-flow-search/FlowSearch.ts | 1 + .../ak-crypto-certificate-search.stories.ts | 91 ++++++++++++ web/src/admin/common/stories/samples.ts | 29 ++++ .../outposts/ServiceConnectionDockerForm.ts | 69 ++-------- web/src/admin/policies/PolicyBindingForm.ts | 68 ++------- .../admin/providers/ldap/LDAPProviderForm.ts | 36 +---- .../providers/oauth2/OAuth2ProviderForm.ts | 44 +----- .../providers/proxy/ProxyProviderForm.ts | 113 +++------------ .../admin/providers/saml/SAMLProviderForm.ts | 69 ++-------- web/src/admin/sources/ldap/LDAPSourceForm.ts | 68 ++------- web/src/admin/sources/saml/SAMLSourceForm.ts | 68 ++------- web/src/admin/tenants/TenantForm.ts | 42 +----- web/src/components/ak-toggle-group.ts | 90 ++++++++++++ .../stories/ak-toggle-group.stories.ts | 67 +++++++++ web/src/elements/forms/SearchSelect.ts | 3 +- web/tsconfig.json | 1 + 18 files changed, 502 insertions(+), 556 deletions(-) create mode 100644 web/src/admin/common/ak-crypto-certificate-search.ts create mode 100644 web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts create mode 100644 web/src/admin/common/stories/samples.ts create mode 100644 web/src/components/ak-toggle-group.ts create mode 100644 web/src/components/stories/ak-toggle-group.stories.ts diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts index 24a55ee8a..3176ddb0e 100644 --- a/web/src/admin/blueprints/BlueprintForm.ts +++ b/web/src/admin/blueprints/BlueprintForm.ts @@ -9,12 +9,11 @@ import "@goauthentik/elements/forms/SearchSelect"; import YAML from "yaml"; import { msg } from "@lit/localize"; -import { CSSResult, TemplateResult, css, html } from "lit"; +import { CSSResult, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import PFContent from "@patternfly/patternfly/components/Content/content.css"; -import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css"; import { BlueprintFile, BlueprintInstance, ManagedApi } from "@goauthentik/api"; @@ -51,15 +50,7 @@ export class BlueprintForm extends ModelForm { } static get styles(): CSSResult[] { - return super.styles.concat( - PFToggleGroup, - PFContent, - css` - .pf-c-toggle-group { - justify-content: center; - } - `, - ); + return [...super.styles, PFContent]; } async send(data: BlueprintInstance): Promise { @@ -105,52 +96,16 @@ export class BlueprintForm extends ModelForm {
-
-
- -
- -
- -
- -
- -
-
+ ) => { + this.source = ev.detail.value; + }} + > + + + +
${this.source === blueprintSource.file diff --git a/web/src/admin/common/ak-crypto-certificate-search.ts b/web/src/admin/common/ak-crypto-certificate-search.ts new file mode 100644 index 000000000..15fe347c2 --- /dev/null +++ b/web/src/admin/common/ak-crypto-certificate-search.ts @@ -0,0 +1,130 @@ +import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; +import { AKElement } from "@goauthentik/elements/Base"; +import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect"; +import "@goauthentik/elements/forms/SearchSelect"; +import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; + +import { html } from "lit"; +import { customElement } from "lit/decorators.js"; +import { property, query } from "lit/decorators.js"; + +import { + CertificateKeyPair, + CryptoApi, + CryptoCertificatekeypairsListRequest, +} from "@goauthentik/api"; + +const renderElement = (item: CertificateKeyPair): string => item.name; + +const renderValue = (item: CertificateKeyPair | undefined): string | undefined => item?.pk; + +/** + * Cryptographic Certificate Search + * + * @element ak-crypto-certificate-search + * + * A wrapper around SearchSelect for the many searches of cryptographic key-pairs used throughout our + * code base. This is another one of those "If it's not error-free, at least it's localized to one + * place" issues. + * + */ + +@customElement("ak-crypto-certificate-search") +export class AkCryptoCertificateSearch extends CustomListenerElement(AKElement) { + @property({ type: String, reflect: true }) + certificate?: string; + + @query("ak-search-select") + search!: SearchSelect; + + @property({ type: String }) + name: string | null | undefined; + + /** + * Set to `true` if you want to find pairs that don't have a valid key. Of our 14 searches, 11 + * require the key, 3 do not (as of 2023-08-01). + * + * @attr + */ + @property({ type: Boolean, attribute: "nokey" }) + noKey = false; + + /** + * Set this to true if, should there be only one certificate available, you want the system to + * use it by default. + * + * @attr + */ + @property({ type: Boolean, attribute: "singleton" }) + singleton = false; + + selectedKeypair?: CertificateKeyPair; + + constructor() { + super(); + this.selected = this.selected.bind(this); + this.fetchObjects = this.fetchObjects.bind(this); + this.handleSearchUpdate = this.handleSearchUpdate.bind(this); + this.addCustomListener("ak-change", this.handleSearchUpdate); + } + + get value() { + return this.selectedKeypair ? renderValue(this.selectedKeypair) : undefined; + } + + connectedCallback() { + super.connectedCallback(); + const horizontalContainer = this.closest("ak-form-element-horizontal[name]"); + if (!horizontalContainer) { + throw new Error("This search can only be used in a named ak-form-element-horizontal"); + } + const name = horizontalContainer.getAttribute("name"); + const myName = this.getAttribute("name"); + if (name !== null && name !== myName) { + this.setAttribute("name", name); + } + } + + handleSearchUpdate(ev: CustomEvent) { + ev.stopPropagation(); + this.selectedKeypair = ev.detail.value; + this.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true })); + } + + async fetchObjects(query?: string): Promise { + const args: CryptoCertificatekeypairsListRequest = { + ordering: "name", + hasKey: !this.noKey, + includeDetails: false, + }; + if (query !== undefined) { + args.search = query; + } + const certificates = await new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsList( + args, + ); + return certificates.results; + } + + selected(item: CertificateKeyPair, items: CertificateKeyPair[]) { + return ( + (this.singleton && !this.certificate && items.length === 1) || + (!!this.certificate && this.certificate === item.pk) + ); + } + + render() { + return html` + + + `; + } +} + +export default AkCryptoCertificateSearch; diff --git a/web/src/admin/common/ak-flow-search/FlowSearch.ts b/web/src/admin/common/ak-flow-search/FlowSearch.ts index 484df6d6e..b19a8e4cf 100644 --- a/web/src/admin/common/ak-flow-search/FlowSearch.ts +++ b/web/src/admin/common/ak-flow-search/FlowSearch.ts @@ -2,6 +2,7 @@ import { RenderFlowOption } from "@goauthentik/admin/flows/utils"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { AKElement } from "@goauthentik/elements/Base"; import { SearchSelect } from "@goauthentik/elements/forms/SearchSelect"; +import "@goauthentik/elements/forms/SearchSelect"; import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; import { html } from "lit"; diff --git a/web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts b/web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts new file mode 100644 index 000000000..ac31ec2b9 --- /dev/null +++ b/web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts @@ -0,0 +1,91 @@ +import "@goauthentik/elements/forms/HorizontalFormElement"; +import "@goauthentik/elements/messages/MessageContainer"; +import { Meta } from "@storybook/web-components"; + +import { TemplateResult, html } from "lit"; + +import "../ak-crypto-certificate-search"; +import AkCryptoCertificateSearch from "../ak-crypto-certificate-search"; +import { dummyCryptoCertsSearch } from "./samples"; + +const metadata: Meta = { + title: "Components / Searches / CryptoCertificateKeyPair", + component: "ak-crypto-certificate-search", + parameters: { + docs: { + description: { + component: "A search function for cryptographic certificates in Authentik", + }, + }, + mockData: [ + { + url: "/api/v3/crypto/certificatekeypairs/?has_key=true&include_details=false&ordering=name", + method: "GET", + status: 200, + response: dummyCryptoCertsSearch, + }, + ], + }, + argTypes: { + // Typescript is unaware that arguments for components are treated as properties, and + // properties are typically renamed to lower case, even if the variable is not. + // @ts-expect-error + nokey: { + control: "boolean", + description: + "When true, certificates without valid keys will be included in the search", + }, + singleton: { + control: "boolean", + description: + "Supports the SAML Source search: when true, if there is no certificate in the current form and there is one and only one certificate in the Authentik database, use that certificate by default.", + }, + }, +}; + +export default metadata; + +const LIGHT = "pf-t-light"; +function injectTheme() { + setTimeout(() => { + if (!document.body.classList.contains(LIGHT)) { + document.body.classList.add(LIGHT); + } + }); +} + +const container = (testItem: TemplateResult) => { + injectTheme(); + return html`
+ + + ${testItem} + 

+    
`;
+};
+
+export const CryptoCertificateSearch = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const showMessage = (ev: CustomEvent) => {
+        const detail = ev.detail;
+        delete detail["target"];
+        document.getElementById("message-pad")!.innerText = `Event: ${JSON.stringify(
+            detail,
+            null,
+            2,
+        )}`;
+    };
+
+    return container(
+        html` 
+            `,
+    );
+};
diff --git a/web/src/admin/common/stories/samples.ts b/web/src/admin/common/stories/samples.ts
new file mode 100644
index 000000000..10e683d6e
--- /dev/null
+++ b/web/src/admin/common/stories/samples.ts
@@ -0,0 +1,29 @@
+export const dummyCryptoCertsSearch = {
+    pagination: {
+        next: 0,
+        previous: 0,
+        count: 1,
+        current: 1,
+        total_pages: 1,
+        start_index: 1,
+        end_index: 1,
+    },
+
+    results: [
+        {
+            pk: "63efd1b8-6c39-4f65-8157-9a406cb37447",
+            name: "authentik Self-signed Certificate",
+            fingerprint_sha256: null,
+            fingerprint_sha1: null,
+            cert_expiry: null,
+            cert_subject: null,
+            private_key_available: true,
+            private_key_type: null,
+            certificate_download_url:
+                "/api/v3/crypto/certificatekeypairs/63efd1b8-6c39-4f65-8157-9a406cb37447/view_certificate/?download",
+            private_key_download_url:
+                "/api/v3/crypto/certificatekeypairs/63efd1b8-6c39-4f65-8157-9a406cb37447/view_private_key/?download",
+            managed: null,
+        },
+    ],
+};
diff --git a/web/src/admin/outposts/ServiceConnectionDockerForm.ts b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
index c0b1c499d..c6840d50d 100644
--- a/web/src/admin/outposts/ServiceConnectionDockerForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionDockerForm.ts
@@ -1,3 +1,4 @@
+import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -9,13 +10,7 @@ import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import {
-    CertificateKeyPair,
-    CryptoApi,
-    CryptoCertificatekeypairsListRequest,
-    DockerServiceConnection,
-    OutpostsApi,
-} from "@goauthentik/api";
+import { DockerServiceConnection, OutpostsApi } from "@goauthentik/api";
 
 @customElement("ak-service-connection-docker-form")
 export class ServiceConnectionDockerForm extends ModelForm {
@@ -93,33 +88,9 @@ export class ServiceConnectionDockerForm extends ModelForm
-                 => {
-                        const args: CryptoCertificatekeypairsListRequest = {
-                            ordering: "name",
-                            hasKey: true,
-                            includeDetails: false,
-                        };
-                        if (query !== undefined) {
-                            args.search = query;
-                        }
-                        const certificates = await new CryptoApi(
-                            DEFAULT_CONFIG,
-                        ).cryptoCertificatekeypairsList(args);
-                        return certificates.results;
-                    }}
-                    .renderElement=${(item: CertificateKeyPair): string => {
-                        return item.name;
-                    }}
-                    .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                        return item?.pk;
-                    }}
-                    .selected=${(item: CertificateKeyPair): boolean => {
-                        return this.instance?.tlsVerification === item.pk;
-                    }}
-                    ?blankable=${true}
-                >
-                
+                
                 

                     ${msg(
                         "CA which the endpoint's Certificate is verified against. Can be left empty for no validation.",
@@ -130,33 +101,9 @@ export class ServiceConnectionDockerForm extends ModelForm
-                 => {
-                        const args: CryptoCertificatekeypairsListRequest = {
-                            ordering: "name",
-                            hasKey: true,
-                            includeDetails: false,
-                        };
-                        if (query !== undefined) {
-                            args.search = query;
-                        }
-                        const certificates = await new CryptoApi(
-                            DEFAULT_CONFIG,
-                        ).cryptoCertificatekeypairsList(args);
-                        return certificates.results;
-                    }}
-                    .renderElement=${(item: CertificateKeyPair): string => {
-                        return item.name;
-                    }}
-                    .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                        return item?.pk;
-                    }}
-                    .selected=${(item: CertificateKeyPair): boolean => {
-                        return this.instance?.tlsAuthentication === item.pk;
-                    }}
-                    ?blankable=${true}
-                >
-                
+                
                 

                     ${msg(
                         "Certificate/Key used for authentication. Can be left empty for no authentication.",
diff --git a/web/src/admin/policies/PolicyBindingForm.ts b/web/src/admin/policies/PolicyBindingForm.ts
index af98d8781..098a57546 100644
--- a/web/src/admin/policies/PolicyBindingForm.ts
+++ b/web/src/admin/policies/PolicyBindingForm.ts
@@ -5,12 +5,11 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/SearchSelect";
 
 import { msg } from "@lit/localize";
-import { CSSResult, css } from "lit";
+import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
-import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
 
 import {
     CoreApi,
@@ -70,15 +69,7 @@ export class PolicyBindingForm extends ModelForm {
     }
 
     static get styles(): CSSResult[] {
-        return super.styles.concat(
-            PFToggleGroup,
-            PFContent,
-            css`
-                .pf-c-toggle-group {
-                    justify-content: center;
-                }
-            `,
-        );
+        return [...super.styles, PFContent];
     }
 
     send(data: PolicyBinding): Promise {
@@ -112,55 +103,22 @@ export class PolicyBindingForm extends ModelForm {
     }
 
     renderModeSelector(): TemplateResult {
-        return html` 

-                
-            

-            
-            

-                
-            

-            
-            

-                
-            
`;
+        return html` ) => {
+                this.policyGroupUser = ev.detail.value;
+            }}
+        >
+            
+            
+            
+        `;
     }
 
     renderForm(): TemplateResult {
         return html`

             

-                

-                    
${this.renderModeSelector()}

-                

+                
${this.renderModeSelector()}

                 

                      {
                         

                     
                     
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.certificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "The certificate for the above configured Base DN. As a fallback, the provider uses a self-signed certificate.",
diff --git a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
index 8e9bdbb02..1a335846d 100644
--- a/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
@@ -1,3 +1,4 @@
+import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { ascii_letters, digits, first, randomString } from "@goauthentik/common/utils";
@@ -14,10 +15,7 @@ import { customElement, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import {
-    CertificateKeyPair,
     ClientTypeEnum,
-    CryptoApi,
-    CryptoCertificatekeypairsListRequest,
     FlowsInstancesListDesignationEnum,
     IssuerModeEnum,
     OAuth2Provider,
@@ -206,42 +204,10 @@ ${this.instance?.redirectUris}
                     
                     
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(
-                                item: CertificateKeyPair,
-                                items: CertificateKeyPair[],
-                            ): boolean => {
-                                let selected = this.instance?.signingKey === item.pk;
-                                if (!this.instance && items.length === 1) {
-                                    selected = true;
-                                }
-                                return selected;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         
${msg("Key used to sign the tokens.")}

                     
                 

diff --git a/web/src/admin/providers/proxy/ProxyProviderForm.ts b/web/src/admin/providers/proxy/ProxyProviderForm.ts
index e3d76c752..89bbc61af 100644
--- a/web/src/admin/providers/proxy/ProxyProviderForm.ts
+++ b/web/src/admin/providers/proxy/ProxyProviderForm.ts
@@ -1,6 +1,8 @@
+import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
+import "@goauthentik/components/ak-toggle-group";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -8,20 +10,16 @@ import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { msg } from "@lit/localize";
-import { CSSResult, css } from "lit";
+import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFList from "@patternfly/patternfly/components/List/list.css";
-import PFToggleGroup from "@patternfly/patternfly/components/ToggleGroup/toggle-group.css";
 import PFSpacing from "@patternfly/patternfly/utilities/Spacing/spacing.css";
 
 import {
-    CertificateKeyPair,
-    CryptoApi,
-    CryptoCertificatekeypairsListRequest,
     FlowsInstancesListDesignationEnum,
     PaginatedOAuthSourceList,
     PaginatedScopeMappingList,
@@ -35,17 +33,7 @@ import {
 @customElement("ak-provider-proxy-form")
 export class ProxyProviderFormPage extends ModelForm {
     static get styles(): CSSResult[] {
-        return super.styles.concat(
-            PFToggleGroup,
-            PFContent,
-            PFList,
-            PFSpacing,
-            css`
-                .pf-c-toggle-group {
-                    justify-content: center;
-                }
-            `,
-        );
+        return [...super.styles, PFContent, PFList, PFSpacing];
     }
 
     async loadInstance(pk: number): Promise {
@@ -137,51 +125,18 @@ export class ProxyProviderFormPage extends ModelForm {
     }
 
     renderModeSelector(): TemplateResult {
-        return html` 

-                
-            

-            
-            

-                
-            

-            
-            

-                
-            
`;
+        const setMode = (ev: CustomEvent<{ value: ProxyMode }>) => {
+            this.mode = ev.detail.value;
+        };
+
+        // prettier-ignore
+        return html`
+            
+                
+                
+                
+            
+        `;
     }
 
     renderSettings(): TemplateResult {
@@ -362,9 +317,7 @@ export class ProxyProviderFormPage extends ModelForm {
             
 
             

-                

-                    
${this.renderModeSelector()}

-                

+                
${this.renderModeSelector()}

                 
${this.renderSettings()}

             

             
@@ -383,35 +336,9 @@ export class ProxyProviderFormPage extends ModelForm {
                 ${msg("Advanced protocol settings")}
                 

                     
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.certificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                     
                      {
                         label=${msg("Signing Certificate")}
                         name="signingKp"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.signingKp;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "Certificate used to sign outgoing Responses going to the Service Provider.",
@@ -216,41 +188,16 @@ export class SAMLProviderFormPage extends ModelForm {
                         label=${msg("Verification Certificate")}
                         name="verificationKp"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.verificationKp;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.",
                             )}
                         

                     
-
                      {
                         label=${msg("TLS Verification Certificate")}
                         name="peerCertificate"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.peerCertificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "When connecting to an LDAP Server with TLS, certificates are not checked by default. Specify a keypair to validate the remote certificate.",
@@ -246,35 +220,9 @@ export class LDAPSourceForm extends ModelForm {
                         label=${msg("TLS Client authentication certificate")}
                         name="clientCertificate"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.clientCertificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "Client certificate keypair to authenticate against the LDAP Server's Certificate.",
diff --git a/web/src/admin/sources/saml/SAMLSourceForm.ts b/web/src/admin/sources/saml/SAMLSourceForm.ts
index 86e7e3bb8..ac168ae5b 100644
--- a/web/src/admin/sources/saml/SAMLSourceForm.ts
+++ b/web/src/admin/sources/saml/SAMLSourceForm.ts
@@ -1,3 +1,4 @@
+import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-source-flow-search";
 import { iconHelperText, placeholderHelperText } from "@goauthentik/admin/helperText";
 import { UserMatchingModeToLabel } from "@goauthentik/admin/sources/oauth/utils";
@@ -18,9 +19,6 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import {
     BindingTypeEnum,
     CapabilitiesEnum,
-    CertificateKeyPair,
-    CryptoApi,
-    CryptoCertificatekeypairsListRequest,
     DigestAlgorithmEnum,
     FlowsInstancesListDesignationEnum,
     NameIdPolicyEnum,
@@ -274,35 +272,9 @@ export class SAMLSourceForm extends ModelForm {
                         
                     
                     
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.signingKp;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "Keypair which is used to sign outgoing requests. Leave empty to disable signing.",
@@ -313,34 +285,10 @@ export class SAMLSourceForm extends ModelForm {
                         label=${msg("Verification Certificate")}
                         name="verificationKp"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.verificationKp;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                         

                             ${msg(
                                 "When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.",
diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index 34420b367..9a3b88d61 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -1,3 +1,4 @@
+import "@goauthentik/admin/common/ak-crypto-certificate-search";
 import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
@@ -13,14 +14,7 @@ import { msg } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 
-import {
-    CertificateKeyPair,
-    CoreApi,
-    CryptoApi,
-    CryptoCertificatekeypairsListRequest,
-    FlowsInstancesListDesignationEnum,
-    Tenant,
-} from "@goauthentik/api";
+import { CoreApi, FlowsInstancesListDesignationEnum, Tenant } from "@goauthentik/api";
 
 @customElement("ak-tenant-form")
 export class TenantForm extends ModelForm {
@@ -236,35 +230,9 @@ export class TenantForm extends ModelForm {
                         label=${msg("Web Certificate")}
                         name="webCertificate"
                     >
-                         => {
-                                const args: CryptoCertificatekeypairsListRequest = {
-                                    ordering: "name",
-                                    hasKey: true,
-                                    includeDetails: false,
-                                };
-                                if (query !== undefined) {
-                                    args.search = query;
-                                }
-                                const certificates = await new CryptoApi(
-                                    DEFAULT_CONFIG,
-                                ).cryptoCertificatekeypairsList(args);
-                                return certificates.results;
-                            }}
-                            .renderElement=${(item: CertificateKeyPair): string => {
-                                return item.name;
-                            }}
-                            .value=${(item: CertificateKeyPair | undefined): string | undefined => {
-                                return item?.pk;
-                            }}
-                            .selected=${(item: CertificateKeyPair): boolean => {
-                                return item.pk === this.instance?.webCertificate;
-                            }}
-                            ?blankable=${true}
-                        >
-                        
+                        
                     
                      [
+                option.getAttribute("value") ?? "",
+                option.textContent ?? "",
+            ],
+        );
+    }
+
+    render() {
+        const last = this.options.length - 1;
+        const mkClass = (v: string) => ({
+            "pf-c-toggle-group__button": true,
+            "pf-m-selected": this.value === v,
+        });
+
+        const mkClick = (v: string) => () => {
+            this.dispatchCustomEvent("ak-toggle", { value: v });
+        };
+
+        return html` 

+            ${this.options.map(
+                ([key, label], idx) =>
+                    html`

+                            
+                        

+                        ${idx < last
+                            ? html``
+                            : nothing} `,
+            )}
+        
`;
+    }
+}
+
+export default AkToggleGroup;
diff --git a/web/src/components/stories/ak-toggle-group.stories.ts b/web/src/components/stories/ak-toggle-group.stories.ts
new file mode 100644
index 000000000..31b2e6c7f
--- /dev/null
+++ b/web/src/components/stories/ak-toggle-group.stories.ts
@@ -0,0 +1,67 @@
+import "@goauthentik/elements/messages/MessageContainer";
+import { Meta } from "@storybook/web-components";
+
+import { TemplateResult, html } from "lit";
+
+import "../ak-toggle-group";
+import AkToggleGroup from "../ak-toggle-group";
+
+const metadata: Meta = {
+    title: "Components / Toggle Group",
+    component: "ak-toggle-group",
+    parameters: {
+        docs: {
+            description: {
+                component: "A stylized toggle control",
+            },
+        },
+    },
+};
+
+export default metadata;
+
+const LIGHT = "pf-t-light";
+function injectTheme() {
+    setTimeout(() => {
+        if (!document.body.classList.contains(LIGHT)) {
+            document.body.classList.add(LIGHT);
+        }
+    });
+}
+
+const container = (testItem: TemplateResult) => {
+    injectTheme();
+    return html` 

+        
+        ${testItem}
+        
    
+    
    `;
+};
+
+const testOptions = [
+    ["funky", "Option One: The Funky One"],
+    ["invalid", "Option Two: The Invalid One"],
+    ["weird", "Option Three: The Weird One"],
+];
+
+export const ToggleGroup = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const displayChange = (ev: any) => {
+        document.getElementById(
+            "toggle-message-pad",
+        )!.innerText = `Value selected: ${ev.detail.value}`;
+    };
+
+    return container(
+        html`
+            ${testOptions.map(([key, label]) => html``)}
+        `,
+    );
+};
diff --git a/web/src/elements/forms/SearchSelect.ts b/web/src/elements/forms/SearchSelect.ts
index 02d1f1fc2..0aba008ee 100644
--- a/web/src/elements/forms/SearchSelect.ts
+++ b/web/src/elements/forms/SearchSelect.ts
@@ -1,5 +1,6 @@
 import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import { ascii_letters, digits, groupBy, randomString } from "@goauthentik/common/utils";
+import { adaptCSS } from "@goauthentik/common/utils";
 import { AKElement } from "@goauthentik/elements/Base";
 import { PreventFormSubmit } from "@goauthentik/elements/forms/Form";
 import { CustomEmitterElement } from "@goauthentik/elements/utils/eventEmitter";
@@ -75,7 +76,7 @@ export class SearchSelect extends CustomEmitterElement(AKElement) {
     constructor() {
         super();
         if (!document.adoptedStyleSheets.includes(PFDropdown)) {
-            document.adoptedStyleSheets = [...document.adoptedStyleSheets, PFDropdown];
+            document.adoptedStyleSheets = adaptCSS([...document.adoptedStyleSheets, PFDropdown]);
         }
         this.dropdownContainer = document.createElement("div");
         this.observer = new IntersectionObserver(() => {
diff --git a/web/tsconfig.json b/web/tsconfig.json
index cd85334f8..7e9327c55 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -5,6 +5,7 @@
             "@goauthentik/app/*": ["src/*"],
             "@goauthentik/admin/*": ["src/admin/*"],
             "@goauthentik/common/*": ["src/common/*"],
+            "@goauthentik/components/*": ["src/components/*"],
             "@goauthentik/docs/*": ["../website/docs/*"],
             "@goauthentik/elements/*": ["src/elements/*"],
             "@goauthentik/flow/*": ["src/flow/*"],