web/admin: migrate crypto/certificatekeypair to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/api/legacy.ts

@@ -4,10 +4,6 @@ export class AdminURLManager {
         return `/administration/applications/${rest}`;
     }
 
-    static cryptoCertificates(rest: string): string {
-        return `/administration/crypto/certificates/${rest}`;
-    }
-
     static policies(rest: string): string {
         return `/administration/policies/${rest}`;
     }

web/src/elements/Divider.ts

@@ -0,0 +1,37 @@
+import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import AKGlobal from "../authentik.css";
+
+@customElement("ak-divider")
+export class Divider extends LitElement {
+
+    static get styles(): CSSResult[] {
+        return [PFBase, AKGlobal, css`
+            .separator {
+                display: flex;
+                align-items: center;
+                text-align: center;
+            }
+
+            .separator::before,
+            .separator::after {
+                content: '';
+                flex: 1;
+                border-bottom: 1px solid var(--pf-global--Color--100);
+            }
+
+            .separator:not(:empty)::before {
+                margin-right: .25em;
+            }
+
+            .separator:not(:empty)::after {
+                margin-left: .25em;
+            }
+        `];
+    }
+
+    render(): TemplateResult {
+        return html`<div class="separator"><slot></slot></div>`;
+    }
+
+}

web/src/pages/crypto/CertificateGenerateForm.ts

@@ -0,0 +1,37 @@
+import { CertificateGeneration, CryptoApi } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import "../../elements/forms/HorizontalFormElement";
+
+@customElement("ak-crypto-certificate-generate-form")
+export class CertificateKeyPairForm extends Form<CertificateGeneration> {
+
+    getSuccessMessage(): string {
+        return gettext("Successfully generated certificate-key pair.");
+    }
+
+    send = (data: CertificateGeneration): Promise<CertificateGeneration> => {
+        return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsGenerate({
+            data: data
+        });
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${gettext("Common Name")} ?required=${true}>
+                <input type="text" name="commonName" class="pf-c-form-control" required="">
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${gettext("Subject-alt name")}>
+                <input class="pf-c-form-control" type="text" name="subjectAltName">
+                <p class="pf-c-form__helper-text">${gettext("Optional, comma-separated SubjectAlt Names.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${gettext("Validity days")} ?required=${true}>
+                <input class="pf-c-form-control" type="number" name="validityDays" value="365">
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/crypto/CertificateKeyPairForm.ts

@@ -0,0 +1,56 @@
+import { CertificateKeyPair, CoreApi, CryptoApi, Group } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+import "../../elements/CodeMirror";
+import "../../elements/Divider";
+
+@customElement("ak-crypto-certificate-form")
+export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
+
+    @property({attribute: false})
+    keyPair?: CertificateKeyPair;
+
+    getSuccessMessage(): string {
+        if (this.keyPair) {
+            return gettext("Successfully updated certificate-key pair.");
+        } else {
+            return gettext("Successfully created certificate-key pair.");
+        }
+    }
+
+    send = (data: CertificateKeyPair): Promise<CertificateKeyPair> => {
+        if (this.keyPair) {
+            return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsPartialUpdate({
+                kpUuid: this.keyPair.pk || "",
+                data: data
+            });
+        } else {
+            return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${gettext("Name")} ?required=${true}>
+                <input type="text" name="name" value="${ifDefined(this.keyPair?.name)}" class="pf-c-form-control" required="">
+            </ak-form-element-horizontal>
+            ${this.keyPair ? html`<ak-divider>${gettext("Only change the fields below if you want to overwrite their values.")}</ak-divider>` : html``}
+            <ak-form-element-horizontal label=${gettext("Certificate")} ?required=${true}>
+                <textarea class="pf-c-form-control" type="text" name="certificateData">${ifDefined(this.keyPair?.certificateData)}</textarea>
+                <p class="pf-c-form__helper-text">${gettext("PEM-encoded Certificate data.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal label=${gettext("Private Key")}>
+                <textarea class="pf-c-form-control" type="text" name="keyData">${ifDefined(this.keyPair?.keyData)}</textarea>
+                <p class="pf-c-form__helper-text">${gettext("Optional Private Key. If this is set, you can use this keypair for encryption.")}</p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -6,12 +6,13 @@ import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList
 
 import { CryptoApi, CertificateKeyPair } from "authentik-api";
 
-import "../../elements/buttons/ModalButton";
+import "../../elements/forms/ModalForm";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteForm";
+import "./CertificateKeyPairForm";
+import "./CertificateGenerateForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
-import { AdminURLManager } from "../../api/legacy";
 import { DEFAULT_CONFIG } from "../../api/Config";
 
 @customElement("ak-crypto-certificate-list")
@@ -62,12 +63,19 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
             html`${gettext(item.privateKeyAvailable ? "Yes" : "No")}`,
             html`${item.certExpiry?.toLocaleString()}`,
             html`
-            <ak-modal-button href="${AdminURLManager.cryptoCertificates(`${item.pk}/update/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            <ak-forms-modal>
+                <span slot="submit">
+                    ${gettext("Update")}
+                </span>
+                <span slot="header">
+                    ${gettext("Update Certificate-Key Pair")}
+                </span>
+                <ak-crypto-certificate-form slot="form" .keyPair=${item}>
+                </ak-crypto-certificate-form>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${gettext("Edit")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-modal>
             <ak-forms-delete
                 .obj=${item}
                 objectLabel=${gettext("Certificate-Key Pair")}
@@ -113,18 +121,32 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.cryptoCertificates("create/")}>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+        <ak-forms-modal>
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
-            <div slot="modal"></div>
-        </ak-modal-button>
-        <ak-modal-button href=${AdminURLManager.cryptoCertificates("generate/")}>
-            <ak-spinner-button slot="trigger" class="pf-m-secondary">
+            </span>
+            <span slot="header">
+                ${gettext("Create Certificate-Key Pair")}
+            </span>
+            <ak-crypto-certificate-form slot="form">
+            </ak-crypto-certificate-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
+        <ak-forms-modal>
+            <span slot="submit">
                 ${gettext("Generate")}
-            </ak-spinner-button>
-            <div slot="modal"></div>
-        </ak-modal-button>
+            </span>
+            <span slot="header">
+                ${gettext("Generate Certificate-Key Pair")}
+            </span>
+            <ak-crypto-certificate-generate-form slot="form">
+            </ak-crypto-certificate-generate-form>
+            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                ${gettext("Generate")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }