web/admin: show warning when deleting currently logged in user

closes #1937

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

web/src/elements/forms/DeleteBulkForm.ts

@@ -187,6 +187,7 @@ export class DeleteBulkForm extends ModalButton {
                     <p class="pf-c-title">
                         ${t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`}
                     </p>
+                    <slot name="notice"></slot>
                 </form>
             </section>
             <section class="pf-c-page__main-section">

web/src/locales/en.po

@@ -5205,6 +5205,7 @@ msgid "UI settings"
 msgstr "UI settings"
 
 #: src/pages/events/EventInfo.ts
+#: src/pages/users/UserListPage.ts
 msgid "UID"
 msgstr "UID"
 
@@ -5770,6 +5771,10 @@ msgstr "Warning: Provider is not used by any Outpost."
 msgid "Warning: Provider not assigned to any application."
 msgstr "Warning: Provider not assigned to any application."
 
+#: src/pages/users/UserListPage.ts
+msgid "Warning: You're about to delete the user you're logged in as ({0}). Proceed at your own risk."
+msgstr "Warning: You're about to delete the user you're logged in as ({0}). Proceed at your own risk."
+
 #: src/pages/outposts/OutpostListPage.ts
 msgid "Warning: authentik Domain is not configured, authentication will not work."
 msgstr "Warning: authentik Domain is not configured, authentication will not work."

web/src/locales/fr_FR.po

@@ -5146,6 +5146,7 @@ msgid "UI settings"
 msgstr "Paramètres d'UI"
 
 #: src/pages/events/EventInfo.ts
+#: src/pages/users/UserListPage.ts
 msgid "UID"
 msgstr "UID"
 
@@ -5708,6 +5709,10 @@ msgstr ""
 msgid "Warning: Provider not assigned to any application."
 msgstr "Avertissement : le fournisseur n'est assigné à aucune application."
 
+#: src/pages/users/UserListPage.ts
+msgid "Warning: You're about to delete the user you're logged in as ({0}). Proceed at your own risk."
+msgstr ""
+
 #: src/pages/outposts/OutpostListPage.ts
 msgid "Warning: authentik Domain is not configured, authentication will not work."
 msgstr "Avertissement : le domaine d'authentik n'est pas configuré, l'authentification ne fonctionnera pas."

web/src/locales/pseudo-LOCALE.po

@@ -5185,6 +5185,7 @@ msgid "UI settings"
 msgstr ""
 
 #: src/pages/events/EventInfo.ts
+#: src/pages/users/UserListPage.ts
 msgid "UID"
 msgstr ""
 
@@ -5750,6 +5751,10 @@ msgstr ""
 msgid "Warning: Provider not assigned to any application."
 msgstr ""
 
+#: src/pages/users/UserListPage.ts
+msgid "Warning: You're about to delete the user you're logged in as ({0}). Proceed at your own risk."
+msgstr ""
+
 #: src/pages/outposts/OutpostListPage.ts
 msgid "Warning: authentik Domain is not configured, authentication will not work."
 msgstr ""

web/src/pages/users/UserListPage.ts

@@ -4,12 +4,14 @@ import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
+import PFAlert from "@patternfly/patternfly/components/Alert/alert.css";
 import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
 
 import { CoreApi, User } from "@goauthentik/api";
 
 import { AKResponse } from "../../api/Client";
 import { DEFAULT_CONFIG, tenant } from "../../api/Config";
+import { me } from "../../api/Users";
 import { uiConfig } from "../../common/config";
 import { PFColor } from "../../elements/Label";
 import "../../elements/buttons/ActionButton";
@@ -51,7 +53,7 @@ export class UserListPage extends TablePage<User> {
     hideServiceAccounts = getURLParam<boolean>("hideServiceAccounts", true);
 
     static get styles(): CSSResult[] {
-        return super.styles.concat(PFDescriptionList);
+        return super.styles.concat(PFDescriptionList, PFAlert);
     }
 
     async apiEndpoint(page: number): Promise<AKResponse<User>> {
@@ -86,6 +88,7 @@ export class UserListPage extends TablePage<User> {
                 return [
                     { key: t`Username`, value: item.username },
                     { key: t`ID`, value: item.pk.toString() },
+                    { key: t`UID`, value: item.uid },
                 ];
             }}
             .usedBy=${(item: User) => {
@@ -99,6 +102,28 @@ export class UserListPage extends TablePage<User> {
                 });
             }}
         >
+            ${until(
+                me().then((user) => {
+                    const shouldShowWarning = this.selectedElements.find((el) => {
+                        return el.pk === user.user.pk || el.pk == user.original?.pk;
+                    });
+                    if (shouldShowWarning) {
+                        return html`
+                            <div slot="notice" class="pf-c-form__alert">
+                                <div class="pf-c-alert pf-m-inline pf-m-warning">
+                                    <div class="pf-c-alert__icon">
+                                        <i class="fas fa-exclamation-circle"></i>
+                                    </div>
+                                    <h4 class="pf-c-alert__title">
+                                        ${t`Warning: You're about to delete the user you're logged in as (${shouldShowWarning.username}). Proceed at your own risk.`}
+                                    </h4>
+                                </div>
+                            </div>
+                        `;
+                    }
+                    return html``;
+                }),
+            )}
             <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
                 ${t`Delete`}
             </button>