web/admin: add ServiceAccount creation form

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

web/src/elements/forms/ModalForm.ts

@@ -11,9 +11,15 @@ export class ModalForm extends ModalButton {
     @property({ type: Boolean })
     closeAfterSuccessfulSubmit = true;
 
+    @property({ type: Boolean })
+    showSubmitButton = true;
+
     @property({ type: Boolean })
     loading = false;
 
+    @property({ type: String })
+    cancelText = t`Cancel`;
+
     confirm(): Promise<void> {
         const form = this.querySelector<Form<unknown>>("[slot=form]");
         if (!form) {
@@ -60,16 +66,18 @@ export class ModalForm extends ModalButton {
                 <slot name="form"></slot>
             </section>
             <footer class="pf-c-modal-box__footer">
-                <ak-spinner-button
+                ${this.showSubmitButton
-                    .callAction=${() => {
+                    ? html`<ak-spinner-button
-                        this.loading = true;
+                              .callAction=${() => {
-                        this.locked = true;
+                                  this.loading = true;
-                        return this.confirm();
+                                  this.locked = true;
-                    }}
+                                  return this.confirm();
-                    class="pf-m-primary"
+                              }}
-                >
+                              class="pf-m-primary"
-                    <slot name="submit"></slot> </ak-spinner-button
+                          >
-                >&nbsp;
+                              <slot name="submit"></slot> </ak-spinner-button
+                          >&nbsp;`
+                    : html``}
                 <ak-spinner-button
                     .callAction=${async () => {
                         this.resetForms();
@@ -77,7 +85,7 @@ export class ModalForm extends ModalButton {
                     }}
                     class="pf-m-secondary"
                 >
-                    ${t`Cancel`}
+                    ${this.cancelText}
                 </ak-spinner-button>
             </footer>`;
     }

web/src/locales/en.po

@@ -723,6 +723,7 @@ msgid "Client type"
 msgstr "Client type"
 
 #: src/pages/outposts/OutpostDeploymentModal.ts
+#: src/pages/users/UserListPage.ts
 msgid "Close"
 msgstr "Close"
 
@@ -957,6 +958,7 @@ msgstr "Copy recovery link"
 #: src/pages/user-settings/tokens/UserTokenList.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserListPage.ts
+#: src/pages/users/UserListPage.ts
 msgid "Create"
 msgstr "Create"
 
@@ -1018,6 +1020,11 @@ msgstr "Create Policy"
 msgid "Create Prompt"
 msgstr "Create Prompt"
 
+#: src/pages/users/UserListPage.ts
+#: src/pages/users/UserListPage.ts
+msgid "Create Service account"
+msgstr "Create Service account"
+
 #: src/pages/flows/BoundStagesList.ts
 msgid "Create Stage"
 msgstr "Create Stage"
@@ -1040,6 +1047,10 @@ msgstr "Create Token"
 msgid "Create User"
 msgstr "Create User"
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Create group"
+msgstr "Create group"
+
 #: src/pages/applications/ApplicationForm.ts
 msgid "Create provider"
 msgstr "Create provider"
@@ -1455,6 +1466,10 @@ msgstr "Enable compatibility mode, increases compatibility with password manager
 msgid "Enabled"
 msgstr "Enabled"
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Enabling this toggle will create a group named after the user, with the user as member."
+msgstr "Enabling this toggle will create a group named after the user, with the user as member."
+
 #: src/pages/flows/FlowForm.ts
 msgid "Enrollment"
 msgstr "Enrollment"
@@ -2915,6 +2930,7 @@ msgstr "Passing"
 #: src/flows/stages/identification/IdentificationStage.ts
 #: src/flows/stages/identification/IdentificationStage.ts
 #: src/flows/stages/password/PasswordStage.ts
+#: src/pages/users/ServiceAccountForm.ts
 msgid "Password"
 msgstr "Password"
 
@@ -3329,6 +3345,7 @@ msgid "Required"
 msgstr "Required"
 
 #: src/pages/user-settings/UserSelfForm.ts
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 msgstr "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
@@ -3973,6 +3990,7 @@ msgstr "Successfully created token."
 msgid "Successfully created transport."
 msgstr "Successfully created transport."
 
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 msgid "Successfully created user."
 msgstr "Successfully created user."
@@ -4726,6 +4744,10 @@ msgstr "Use the user's email address, but deny enrollment when the email address
 msgid "Use the user's username, but deny enrollment when the username already exists."
 msgstr "Use the user's username, but deny enrollment when the username already exists."
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
+msgstr "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
 msgstr "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
@@ -4849,6 +4871,8 @@ msgstr "Userinfo URL"
 #: src/pages/policies/reputation/UserReputationListPage.ts
 #: src/pages/stages/identification/IdentificationStageForm.ts
 #: src/pages/user-settings/UserSelfForm.ts
+#: src/pages/users/ServiceAccountForm.ts
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts

web/src/locales/pseudo-LOCALE.po

@@ -717,6 +717,7 @@ msgid "Client type"
 msgstr ""
 
 #: src/pages/outposts/OutpostDeploymentModal.ts
+#: src/pages/users/UserListPage.ts
 msgid "Close"
 msgstr ""
 
@@ -951,6 +952,7 @@ msgstr ""
 #: src/pages/user-settings/tokens/UserTokenList.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserListPage.ts
+#: src/pages/users/UserListPage.ts
 msgid "Create"
 msgstr ""
 
@@ -1012,6 +1014,11 @@ msgstr ""
 msgid "Create Prompt"
 msgstr ""
 
+#: src/pages/users/UserListPage.ts
+#: src/pages/users/UserListPage.ts
+msgid "Create Service account"
+msgstr ""
+
 #: src/pages/flows/BoundStagesList.ts
 msgid "Create Stage"
 msgstr ""
@@ -1034,6 +1041,10 @@ msgstr ""
 msgid "Create User"
 msgstr ""
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Create group"
+msgstr ""
+
 #: src/pages/applications/ApplicationForm.ts
 msgid "Create provider"
 msgstr ""
@@ -1447,6 +1458,10 @@ msgstr ""
 msgid "Enabled"
 msgstr ""
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Enabling this toggle will create a group named after the user, with the user as member."
+msgstr ""
+
 #: src/pages/flows/FlowForm.ts
 msgid "Enrollment"
 msgstr ""
@@ -2907,6 +2922,7 @@ msgstr ""
 #: src/flows/stages/identification/IdentificationStage.ts
 #: src/flows/stages/identification/IdentificationStage.ts
 #: src/flows/stages/password/PasswordStage.ts
+#: src/pages/users/ServiceAccountForm.ts
 msgid "Password"
 msgstr ""
 
@@ -3321,6 +3337,7 @@ msgid "Required"
 msgstr ""
 
 #: src/pages/user-settings/UserSelfForm.ts
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 msgstr ""
@@ -3965,6 +3982,7 @@ msgstr ""
 msgid "Successfully created transport."
 msgstr ""
 
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 msgid "Successfully created user."
 msgstr ""
@@ -4711,6 +4729,10 @@ msgstr ""
 msgid "Use the user's username, but deny enrollment when the username already exists."
 msgstr ""
 
+#: src/pages/users/ServiceAccountForm.ts
+msgid "Use the username and password below to authenticate. The password can be retrieved later on the Tokens page."
+msgstr ""
+
 #: src/pages/providers/proxy/ProxyProviderForm.ts
 msgid "Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /akprox must be routed to the outpost (when using a manged outpost, this is done for you)."
 msgstr ""
@@ -4834,6 +4856,8 @@ msgstr ""
 #: src/pages/policies/reputation/UserReputationListPage.ts
 #: src/pages/stages/identification/IdentificationStageForm.ts
 #: src/pages/user-settings/UserSelfForm.ts
+#: src/pages/users/ServiceAccountForm.ts
+#: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts

web/src/pages/users/ServiceAccountForm.ts

@@ -0,0 +1,87 @@
+import { CoreApi, UserServiceAccountRequest, UserServiceAccountResponse } from "@goauthentik/api";
+import { t } from "@lingui/macro";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import "../../elements/forms/HorizontalFormElement";
+import { Form } from "../../elements/forms/Form";
+import { ModalForm } from "../../elements/forms/ModalForm";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+@customElement("ak-user-service-account")
+export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
+    @property({ attribute: false })
+    result?: UserServiceAccountResponse;
+
+    getSuccessMessage(): string {
+        return t`Successfully created user.`;
+    }
+
+    send = (data: UserServiceAccountRequest): Promise<UserServiceAccountResponse> => {
+        return new CoreApi(DEFAULT_CONFIG)
+            .coreUsersServiceAccountCreate({
+                userServiceAccountRequest: data,
+            })
+            .then((result) => {
+                this.result = result;
+                (this.parentElement as ModalForm).showSubmitButton = false;
+                return result;
+            });
+    };
+
+    resetForm(): void {
+        super.resetForm();
+        this.result = undefined;
+    }
+
+    renderRequestForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal label=${t`Username`} ?required=${true} name="name">
+                <input type="text" value="" class="pf-c-form-control" required />
+                <p class="pf-c-form__helper-text">
+                    ${t`Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.`}
+                </p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal name="createGroup">
+                <div class="pf-c-check">
+                    <input type="checkbox" class="pf-c-check__input" ?checked=${true} />
+                    <label class="pf-c-check__label"> ${t`Create group`} </label>
+                </div>
+                <p class="pf-c-form__helper-text">
+                    ${t`Enabling this toggle will create a group named after the user, with the user as member.`}
+                </p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+    renderResponseForm(): TemplateResult {
+        return html`<p>
+                ${t`Use the username and password below to authenticate. The password can be retrieved later on the Tokens page.`}
+            </p>
+            <form class="pf-c-form pf-m-horizontal">
+                <ak-form-element-horizontal label=${t`Username`}>
+                    <input
+                        type="text"
+                        readonly
+                        value=${ifDefined(this.result?.username)}
+                        class="pf-c-form-control"
+                    />
+                </ak-form-element-horizontal>
+                <ak-form-element-horizontal label=${t`Password`}>
+                    <input
+                        type="text"
+                        readonly
+                        value=${ifDefined(this.result?.token)}
+                        class="pf-c-form-control"
+                    />
+                </ak-form-element-horizontal>
+            </form>`;
+    }
+
+    renderForm(): TemplateResult {
+        if (this.result) {
+            return this.renderResponseForm();
+        }
+        return this.renderRequestForm();
+    }
+}

web/src/pages/users/UserListPage.ts

@@ -14,6 +14,7 @@ import "../../elements/forms/DeleteBulkForm";
 import "./UserActiveForm";
 import "./UserForm";
 import "./UserResetEmailForm";
+import "./ServiceAccountForm";
 import { showMessage } from "../../elements/messages/MessageContainer";
 import { MessageLevel } from "../../elements/messages/Message";
 import { first } from "../../utils";
@@ -247,6 +248,14 @@ export class UserListPage extends TablePage<User> {
                 <ak-user-form slot="form"> </ak-user-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
+            <ak-forms-modal .closeAfterSuccessfulSubmit=${false} .cancelText=${t`Close`}>
+                <span slot="submit"> ${t`Create`} </span>
+                <span slot="header"> ${t`Create Service account`} </span>
+                <ak-user-service-account slot="form"> </ak-user-service-account>
+                <button slot="trigger" class="pf-c-button pf-m-secondary">
+                    ${t`Create Service account`}
+                </button>
+            </ak-forms-modal>
             ${super.renderToolbar()}
         `;
     }