web/admin: contextually add user to group when creating user from group page (#7586)

* move related user list to group folder

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

* contextually add user to group when created from group view page

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

* add banner

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

* format

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

---------

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

web/src/admin/groups/GroupViewPage.ts

@@ -1,5 +1,5 @@
 import "@goauthentik/admin/groups/GroupForm";
-import "@goauthentik/admin/users/RelatedUserList";
+import "@goauthentik/app/admin/groups/RelatedUserList";
 import "@goauthentik/app/elements/rbac/ObjectPermissionsPage";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { EVENT_REFRESH } from "@goauthentik/common/constants";

web/src/admin/groups/RelatedUserList.ts

@@ -24,7 +24,7 @@ import { UserOption } from "@goauthentik/elements/user/utils";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -402,7 +402,16 @@ export class RelatedUserList extends Table<User> {
                         <ak-forms-modal>
                             <span slot="submit"> ${msg("Create")} </span>
                             <span slot="header"> ${msg("Create User")} </span>
-                            <ak-user-form slot="form"> </ak-user-form>
+                            ${this.targetGroup
+                                ? html`
+                                      <div class="pf-c-banner pf-m-info" slot="above-form">
+                                          ${msg(
+                                              str`This user will be added to the group "${this.targetGroup.name}".`,
+                                          )}
+                                      </div>
+                                  `
+                                : nothing}
+                            <ak-user-form .group=${this.targetGroup} slot="form"> </ak-user-form>
                             <a slot="trigger" class="pf-c-dropdown__menu-item">
                                 ${msg("Create user")}
                             </a>
@@ -415,7 +424,17 @@ export class RelatedUserList extends Table<User> {
                         >
                             <span slot="submit"> ${msg("Create")} </span>
                             <span slot="header"> ${msg("Create Service account")} </span>
-                            <ak-user-service-account slot="form"> </ak-user-service-account>
+                            ${this.targetGroup
+                                ? html`
+                                      <div class="pf-c-banner pf-m-info" slot="above-form">
+                                          ${msg(
+                                              str`This user will be added to the group "${this.targetGroup.name}".`,
+                                          )}
+                                      </div>
+                                  `
+                                : nothing}
+                            <ak-user-service-account-form .group=${this.targetGroup} slot="form">
+                            </ak-user-service-account-form>
                             <a slot="trigger" class="pf-c-dropdown__menu-item">
                                 ${msg("Create Service account")}
                             </a>

web/src/admin/users/ServiceAccountForm.ts

@@ -4,19 +4,30 @@ import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModalForm } from "@goauthentik/elements/forms/ModalForm";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { CoreApi, UserServiceAccountRequest, UserServiceAccountResponse } from "@goauthentik/api";
+import {
+    CoreApi,
+    Group,
+    UserServiceAccountRequest,
+    UserServiceAccountResponse,
+} from "@goauthentik/api";
 
-@customElement("ak-user-service-account")
+@customElement("ak-user-service-account-form")
 export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
     @property({ attribute: false })
     result?: UserServiceAccountResponse;
 
+    @property({ attribute: false })
+    group?: Group;
+
     getSuccessMessage(): string {
+        if (this.group) {
+            return msg(str`Successfully created user and added to group ${this.group.name}`);
+        }
         return msg("Successfully created user.");
     }
 
@@ -26,6 +37,14 @@ export class ServiceAccountForm extends Form<UserServiceAccountRequest> {
         });
         this.result = result;
         (this.parentElement as ModalForm).showSubmitButton = false;
+        if (this.group) {
+            await new CoreApi(DEFAULT_CONFIG).coreGroupsAddUserCreate({
+                groupUuid: this.group.pk,
+                userAccountRequest: {
+                    pk: this.result.userPk,
+                },
+            });
+        }
         return result;
     }
 

web/src/admin/users/UserForm.ts

@@ -8,15 +8,18 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/Radio";
 import YAML from "yaml";
 
-import { msg } from "@lit/localize";
+import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { CoreApi, User, UserTypeEnum } from "@goauthentik/api";
+import { CoreApi, Group, User, UserTypeEnum } from "@goauthentik/api";
 
 @customElement("ak-user-form")
 export class UserForm extends ModelForm<User, number> {
+    @property({ attribute: false })
+    group?: Group;
+
     static get defaultUserAttributes(): { [key: string]: unknown } {
         return {};
     }
@@ -42,6 +45,9 @@ export class UserForm extends ModelForm<User, number> {
         if (this.instance) {
             return msg("Successfully updated user.");
         } else {
+            if (this.group) {
+                return msg(str`Successfully created user and added to group ${this.group.name}`);
+            }
             return msg("Successfully created user.");
         }
     }
@@ -50,21 +56,31 @@ export class UserForm extends ModelForm<User, number> {
         if (data.attributes === null) {
             data.attributes = UserForm.defaultUserAttributes;
         }
+        let user;
         if (this.instance?.pk) {
-            return new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({
+            user = await new CoreApi(DEFAULT_CONFIG).coreUsersPartialUpdate({
                 id: this.instance.pk,
                 patchedUserRequest: data,
             });
         } else {
             data.groups = [];
-            return new CoreApi(DEFAULT_CONFIG).coreUsersCreate({
+            user = await new CoreApi(DEFAULT_CONFIG).coreUsersCreate({
                 userRequest: data,
             });
         }
+        if (this.group) {
+            await new CoreApi(DEFAULT_CONFIG).coreGroupsAddUserCreate({
+                groupUuid: this.group.pk,
+                userAccountRequest: {
+                    pk: user.pk,
+                },
+            });
+        }
+        return user;
     }
 
     renderForm(): TemplateResult {
-        return html` <ak-form-element-horizontal
+        return html`<ak-form-element-horizontal
                 label=${msg("Username")}
                 ?required=${true}
                 name="username"

web/src/admin/users/UserListPage.ts

@@ -399,7 +399,7 @@ export class UserListPage extends TablePage<User> {
             <ak-forms-modal .closeAfterSuccessfulSubmit=${false} .cancelText=${msg("Close")}>
                 <span slot="submit"> ${msg("Create")} </span>
                 <span slot="header"> ${msg("Create Service account")} </span>
-                <ak-user-service-account slot="form"> </ak-user-service-account>
+                <ak-user-service-account-form slot="form"> </ak-user-service-account-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">
                     ${msg("Create Service account")}
                 </button>

web/xliff/de.xlf

@@ -6063,6 +6063,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/en.xlf

@@ -6340,6 +6340,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/es.xlf

@@ -5979,6 +5979,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/fr.xlf

@@ -7965,6 +7965,9 @@ Les liaisons avec les groupes/utilisateurs sont vérifiées par rapport à l'uti
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/pl.xlf

@@ -6187,6 +6187,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/pseudo-LOCALE.xlf

@@ -7865,4 +7865,7 @@ Bindings to groups/users are checked against the user of the event.</source>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
 </trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
+</trans-unit>
 </body></file></xliff>

web/xliff/tr.xlf

@@ -5972,6 +5972,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh-Hans.xlf

@@ -7967,6 +7967,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh-Hant.xlf

@@ -6020,6 +6020,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>

web/xliff/zh_TW.xlf

@@ -6019,6 +6019,9 @@ Bindings to groups/users are checked against the user of the event.</source>
 </trans-unit>
 <trans-unit id="sd47f3d3c9741343d">
   <source>4: Very unguessable: strong protection from offline slow-hash scenario. (guesses &amp;gt;= 10^10)</source>
+</trans-unit>
+<trans-unit id="s3d2a8b86a4f5a810">
+  <source>Successfully created user and added to group <x id="0" equiv-text="${this.group.name}"/></source>
 </trans-unit>
     </body>
   </file>