web/admin: unify rendering and sorting of user lists

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

web/src/elements/user/utils.ts

@@ -0,0 +1,19 @@
+import { User } from "@goauthentik/api";
+
+export function UserOption(user: User): string {
+    let finalString = user.username;
+    if (user.name || user.email) {
+        finalString += " (";
+        if (user.name) {
+            finalString += user.name;
+            if (user.email) {
+                finalString += ", ";
+            }
+        }
+        if (user.email) {
+            finalString += user.email;
+        }
+        finalString += ")";
+    }
+    return finalString;
+}

web/src/pages/applications/ApplicationCheckAccessForm.ts

@@ -9,6 +9,7 @@ import { Application, CoreApi, PolicyTestResult } from "@goauthentik/api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { Form } from "../../elements/forms/Form";
 import "../../elements/forms/HorizontalFormElement";
+import { UserOption } from "../../elements/user/utils";
 
 @customElement("ak-application-check-access-form")
 export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
@@ -84,7 +85,7 @@ export class ApplicationCheckAccessForm extends Form<{ forUser: number }> {
                                         ?selected=${user.pk.toString() === this.request?.toString()}
                                         value=${user.pk}
                                     >
-                                        ${user.username}
+                                        ${UserOption(user)}
                                     </option>`;
                                 });
                             }),

web/src/pages/groups/GroupForm.ts

@@ -15,6 +15,7 @@ import "../../elements/chips/Chip";
 import "../../elements/chips/ChipGroup";
 import "../../elements/forms/HorizontalFormElement";
 import { ModelForm } from "../../elements/forms/ModelForm";
+import { UserOption } from "../../elements/user/utils";
 import { first } from "../../utils";
 import "./MemberSelectModal";
 
@@ -138,7 +139,7 @@ export class GroupForm extends ModelForm<Group, string> {
                                                     this.requestUpdate();
                                                 }}
                                             >
-                                                ${user.username}
+                                                ${UserOption(user)}
                                             </ak-chip>`;
                                         });
                                     }),

web/src/pages/policies/PolicyBindingForm.ts

@@ -14,6 +14,7 @@ import { CoreApi, PoliciesApi, Policy, PolicyBinding } from "@goauthentik/api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/forms/HorizontalFormElement";
 import { ModelForm } from "../../elements/forms/ModelForm";
+import { UserOption } from "../../elements/user/utils";
 import { first, groupBy } from "../../utils";
 
 enum target {
@@ -237,7 +238,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
                             ${until(
                                 new CoreApi(DEFAULT_CONFIG)
                                     .coreUsersList({
-                                        ordering: "name",
+                                        ordering: "username",
                                     })
                                     .then((users) => {
                                         return users.results.map((user) => {
@@ -245,7 +246,7 @@ export class PolicyBindingForm extends ModelForm<PolicyBinding, string> {
                                                 value=${ifDefined(user.pk)}
                                                 ?selected=${user.pk === this.instance?.user}
                                             >
-                                                ${user.name}
+                                                ${UserOption(user)}
                                             </option>`;
                                         });
                                     }),

web/src/pages/policies/PolicyTestForm.ts

@@ -18,6 +18,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/CodeMirror";
 import { Form } from "../../elements/forms/Form";
 import "../../elements/forms/HorizontalFormElement";
+import { UserOption } from "../../elements/user/utils";
 import { first } from "../../utils";
 
 @customElement("ak-policy-test-form")
@@ -90,7 +91,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                                         user.pk.toString()}
                                         value=${user.pk}
                                     >
-                                        ${user.username}
+                                        ${UserOption(user)}
                                     </option>`;
                                 });
                             }),

web/src/pages/property-mappings/PropertyMappingTestForm.ts

@@ -19,6 +19,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/CodeMirror";
 import { Form } from "../../elements/forms/Form";
 import "../../elements/forms/HorizontalFormElement";
+import { UserOption } from "../../elements/user/utils";
 import { first } from "../../utils";
 
 @customElement("ak-property-mapping-test-form")
@@ -80,7 +81,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
                                         user.pk.toString()}
                                         value=${user.pk}
                                     >
-                                        ${user.username}
+                                        ${UserOption(user)}
                                     </option>`;
                                 });
                             }),

web/src/pages/tokens/TokenForm.ts

@@ -10,6 +10,7 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/forms/FormGroup";
 import "../../elements/forms/HorizontalFormElement";
 import { ModelForm } from "../../elements/forms/ModelForm";
+import { UserOption } from "../../elements/user/utils";
 import { dateTimeLocal, first } from "../../utils";
 
 @customElement("ak-token-form")
@@ -67,7 +68,7 @@ export class TokenForm extends ModelForm<Token, string> {
                                         value=${user.pk}
                                         ?selected=${this.instance?.user === user.pk}
                                     >
-                                        ${user.username}
+                                        ${UserOption(user)}
                                     </option>`;
                                 });
                             }),