fix: refresh the user data after a change

Fixes #1843

src/types/current-user.model.ts

@@ -71,4 +71,5 @@ export interface IUser extends ICurrentUser {
   feedTokens: IFeedToken[];
   authAuthorizedApplications: IApplicationToken[];
   conversations: Paginate<IConversation>;
+  moderation: string;
 }

src/views/Admin/AdminUserProfile.vue

@@ -177,16 +177,22 @@
         <tr>
           <td v-if="user.role == ICurrentUserRole.PENDING && !user.disabled">
             <div class="buttons">
-              <o-button @click="acceptAccount" variant="success">{{
+              <o-button
-                t("Accept")
+                id="acceptAccount"
-              }}</o-button>
+                @click="acceptAccount"
+                variant="success"
+                >{{ t("Accept") }}</o-button
+              >
             </div>
           </td>
           <td>
             <div class="buttons" v-if="!user.disabled">
-              <o-button @click="deleteAccount" variant="danger">{{
+              <o-button
-                t("Ban")
+                id="deleteAccount"
-              }}</o-button>
+                @click="deleteAccount"
+                variant="danger"
+                >{{ t("Ban") }}</o-button
+              >
             </div>
             <div v-else>
               <div
@@ -195,9 +201,12 @@
               >
                 {{ t("The user has been banned") }}
               </div>
-              <o-button @click="unbanAccount" variant="danger">{{
+              <o-button
-                t("Unban")
+                id="unbanAccount"
-              }}</o-button>
+                @click="unbanAccount"
+                variant="danger"
+                >{{ t("Unban") }}</o-button
+              >
             </div>
           </td>
         </tr>
@@ -359,18 +368,18 @@ import { computed, inject, reactive, ref, watch } from "vue";
 import { useHead } from "@/utils/head";
 import { useI18n } from "vue-i18n";
 import { formatDateTimeString } from "@/filters/datetime";
-import { useRouter } from "vue-router";
 import { IPerson } from "@/types/actor";
 import { Dialog } from "@/plugins/dialog";
 
 const props = defineProps<{ id: string }>();
 
-const { result: userResult, loading: loadingUser } = useQuery<{ user: IUser }>(
+const {
-  GET_USER,
+  result: userResult,
-  () => ({
+  loading: loadingUser,
-    id: props.id,
+  refetch: refetchUser,
-  })
+} = useQuery<{ user: IUser }>(GET_USER, () => ({
-);
+  id: props.id,
+}));
 
 const user = computed(() => userResult.value?.user);
 
@@ -485,8 +494,6 @@ const roleName = (role: ICurrentUserRole): string => {
   }
 };
 
-const router = useRouter();
-
 const { mutate: deleteUserAccount } = useMutation<
   { deleteProfile: { id: string } },
   { userId: string }
@@ -512,7 +519,7 @@ const deleteAccount = async (): Promise<void> => {
       deleteUserAccount({
         userId: props.id,
       });
-      return router.push({ name: RouteName.USERS });
+      refetchUser();
     },
   });
 };
@@ -530,7 +537,7 @@ const unbanAccount = async (): Promise<void> => {
       unbanUserAccount({
         userId: props.id,
       });
-      return router.push({ name: RouteName.USERS });
+      refetchUser();
     },
   });
 };
@@ -542,7 +549,7 @@ const acceptAccount = async () => {
     role: ICurrentUserRole.USER,
     notify: true,
   });
-  router.push({ name: RouteName.ADMIN_USER_PROFILE, id: props.id });
+  refetchUser();
 };
 
 const profiles = computed((): IPerson[] | undefined => {
@@ -556,7 +563,7 @@ const confirmUser = async () => {
     confirmed: true,
     notify: newUser.notify,
   });
-  router.push({ name: RouteName.ADMIN_USER_PROFILE, id: props.id });
+  refetchUser();
 };
 
 const updateUserRole = async () => {
@@ -566,7 +573,7 @@ const updateUserRole = async () => {
     role: newUser.role,
     notify: newUser.notify,
   });
-  router.push({ name: RouteName.ADMIN_USER_PROFILE, id: props.id });
+  refetchUser();
 };
 
 const updateUserEmail = async () => {
@@ -576,7 +583,7 @@ const updateUserEmail = async () => {
     email: newUser.email,
     notify: newUser.notify,
   });
-  router.push({ name: RouteName.ADMIN_USER_PROFILE, id: props.id });
+  refetchUser();
 };
 
 const { mutate: updateUser } = useMutation<

tests/unit/specs/components/admin/__snapshots__/adminUsersProfileView.spec.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UsersView > Show moderate list 1`] = `
+exports[`UsersView > Ban user 1`] = `
 "<div>
   <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
   <section>
@@ -14,93 +14,10 @@ exports[`UsersView > Show moderate list 1`] = `
                 <tr class="border-b">
                   <td class="py-4 px-2 whitespace-nowrap align-middle">Email</td>
                   <td class="py-4 px-2 align-middle">truc@mobilizon.test</td>
-                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2">
+                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2"><button type="button" class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--small o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-pencil"></i></span><span class="o-btn__label">Change email</span>
-                    <!--v-if-->
+                      <!----></span>
-                    <o-button-stub tag="router-link" variant="text" size="small" iconleft="magnify" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false" to="[object Object]"></o-button-stub>
+                    </button>
-                  </td>
+                    <router-link-stub class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button" to="[object Object]"></router-link-stub>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Language</td>
-                  <td class="py-4 px-2 align-middle">French</td>
-                  <td></td>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Role</td>
-                  <td class="py-4 px-2 whitespace-nowrap"><span class="bg-orange-100 text-orange-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">Pending</span></td>
-                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
-                    <!--v-if-->
-                  </td>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Moderation</td>
-                  <td class="py-4 px-2 align-middle">moderation text</td>
-                  <td></td>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Confirmed</td>
-                  <td class="py-4 px-2 align-middle">Saturday, August 30, 2025 at 11:56 AM</td>
-                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
-                    <!--v-if-->
-                  </td>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last sign-in</td>
-                  <td class="py-4 px-2 align-middle">Unknown</td>
-                  <td></td>
-                </tr>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last IP adress</td>
-                  <td class="py-4 px-2 align-middle">Unknown</td>
-                  <td></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!--v-if-->
-  <section class="my-4">
-    <h2 class="text-lg font-bold mb-3">Actions</h2>
-    <table>
-      <tr>
-        <td>
-          <div class="buttons">
-            <o-button-stub tag="button" variant="success" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false"></o-button-stub>
-          </div>
-        </td>
-        <td>
-          <div class="buttons">
-            <o-button-stub tag="button" variant="danger" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false"></o-button-stub>
-          </div>
-        </td>
-      </tr>
-    </table>
-  </section>
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" has-modal-card="" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" has-modal-card="" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
-</div>"
-`;
-
-exports[`UsersView > Show simple list 1`] = `
-"<div>
-  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
-  <section>
-    <h2 class="text-lg font-bold mb-3">Details</h2>
-    <div class="flex flex-col">
-      <div class="overflow-x-auto">
-        <div class="inline-block py-2 min-w-full sm:px-2">
-          <div class="overflow-hidden shadow-md sm:rounded-lg">
-            <table class="table w-full">
-              <tbody>
-                <tr class="border-b">
-                  <td class="py-4 px-2 whitespace-nowrap align-middle">Email</td>
-                  <td class="py-4 px-2 align-middle">truc@mobilizon.test</td>
-                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2">
-                    <o-button-stub tag="button" variant="text" size="small" iconleft="pencil" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false"></o-button-stub>
-                    <o-button-stub tag="router-link" variant="text" size="small" iconleft="magnify" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false" to="[object Object]"></o-button-stub>
                   </td>
                 </tr>
                 <tr class="border-b">
@@ -111,9 +28,9 @@ exports[`UsersView > Show simple list 1`] = `
                 <tr class="border-b">
                   <td class="py-4 px-2 whitespace-nowrap align-middle">Role</td>
                   <td class="py-4 px-2 whitespace-nowrap"><span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">User</span></td>
-                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center"><button type="button" class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--small o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-chevron-double-up"></i></span><span class="o-btn__label">Change role</span>
-                    <o-button-stub tag="button" variant="text" size="small" iconleft="chevron-double-up" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false"></o-button-stub>
+                      <!----></span>
-                  </td>
+                    </button></td>
                 </tr>
                 <tr class="border-b">
                   <td class="py-4 px-2 whitespace-nowrap align-middle">Login status</td>
@@ -166,15 +83,716 @@ exports[`UsersView > Show simple list 1`] = `
       <tr>
         <!--v-if-->
         <td>
-          <div class="buttons">
+          <div class="buttons"><button type="button" class="o-btn o-btn--danger" role="button" data-oruga="button" id="deleteAccount"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Ban</span>
-            <o-button-stub tag="button" variant="danger" rounded="false" expanded="false" disabled="false" outlined="false" loading="false" inverted="false" nativetype="button" role="button" iconboth="false"></o-button-stub>
+              <!----></span>
+            </button></div>
+        </td>
+      </tr>
+    </table>
+  </section>
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <div class="" style="width: auto;">
+            <header class="">
+              <h2>Change user email</h2>
+            </header>
+            <section class="">
+              <div data-oruga="field" class="o-field o-field--filled"><label class="o-field__label" for="">Previous email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input id="" data-oruga-input="email" type="email" class="o-input o-input--disabled" autocomplete="off" disabled="">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div>
+              <div data-oruga="field" class="o-field"><label class="o-field__label" for="">New email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input required="" id="" data-oruga-input="email" type="email" class="o-input" autocomplete="off" placeholder="new@email.com">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+            </section>
+            <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+                <!----></span>
+              </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change email</span>
+                <!----></span>
+              </button></footer>
+          </div>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Change user role</h2>
+          </header>
+          <section>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="ADMINISTRATOR"><span class="o-radio__label">Administrator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="MODERATOR"><span class="o-radio__label">Moderator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" autocomplete="off" value="USER"><span class="o-radio__label">User</span></label></div>
+              </div>
+              <!---->
+            </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+          </section>
+          <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change role</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Confirm user</h2>
+          </header>
+          <section><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label></section>
+          <footer><button type="button" class="o-btn" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Confirm user</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`UsersView > Show moderate list 1`] = `
+"<div>
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <section>
+    <h2 class="text-lg font-bold mb-3">Details</h2>
+    <div class="flex flex-col">
+      <div class="overflow-x-auto">
+        <div class="inline-block py-2 min-w-full sm:px-2">
+          <div class="overflow-hidden shadow-md sm:rounded-lg">
+            <table class="table w-full">
+              <tbody>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Email</td>
+                  <td class="py-4 px-2 align-middle">truc@mobilizon.test</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2">
+                    <!--v-if-->
+                    <router-link-stub class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button" to="[object Object]"></router-link-stub>
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Language</td>
+                  <td class="py-4 px-2 align-middle">French</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Role</td>
+                  <td class="py-4 px-2 whitespace-nowrap"><span class="bg-orange-100 text-orange-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">Pending</span></td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
+                    <!--v-if-->
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Moderation</td>
+                  <td class="py-4 px-2 align-middle">moderation text</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Confirmed</td>
+                  <td class="py-4 px-2 align-middle">Saturday, August 30, 2025 at 11:56 AM</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
+                    <!--v-if-->
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last sign-in</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last IP adress</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!--v-if-->
+  <section class="my-4">
+    <h2 class="text-lg font-bold mb-3">Actions</h2>
+    <table>
+      <tr>
+        <td>
+          <div class="buttons"><button type="button" class="o-btn o-btn--success" role="button" data-oruga="button" id="acceptAccount"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Accept</span>
+              <!----></span>
+            </button></div>
+        </td>
+        <td>
+          <div class="buttons"><button type="button" class="o-btn o-btn--danger" role="button" data-oruga="button" id="deleteAccount"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Ban</span>
+              <!----></span>
+            </button></div>
+        </td>
+      </tr>
+    </table>
+  </section>
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <div class="" style="width: auto;">
+            <header class="">
+              <h2>Change user email</h2>
+            </header>
+            <section class="">
+              <div data-oruga="field" class="o-field o-field--filled"><label class="o-field__label" for="">Previous email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input id="" data-oruga-input="email" type="email" class="o-input o-input--disabled" autocomplete="off" disabled="">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div>
+              <div data-oruga="field" class="o-field"><label class="o-field__label" for="">New email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input required="" id="" data-oruga-input="email" type="email" class="o-input" autocomplete="off" placeholder="new@email.com">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+            </section>
+            <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+                <!----></span>
+              </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change email</span>
+                <!----></span>
+              </button></footer>
+          </div>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Change user role</h2>
+          </header>
+          <section>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="ADMINISTRATOR"><span class="o-radio__label">Administrator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="MODERATOR"><span class="o-radio__label">Moderator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="USER"><span class="o-radio__label">User</span></label></div>
+              </div>
+              <!---->
+            </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+          </section>
+          <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change role</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Confirm user</h2>
+          </header>
+          <section><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label></section>
+          <footer><button type="button" class="o-btn" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Confirm user</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`UsersView > Show simple list 1`] = `
+"<div>
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <section>
+    <h2 class="text-lg font-bold mb-3">Details</h2>
+    <div class="flex flex-col">
+      <div class="overflow-x-auto">
+        <div class="inline-block py-2 min-w-full sm:px-2">
+          <div class="overflow-hidden shadow-md sm:rounded-lg">
+            <table class="table w-full">
+              <tbody>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Email</td>
+                  <td class="py-4 px-2 align-middle">truc@mobilizon.test</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2"><button type="button" class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--small o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-pencil"></i></span><span class="o-btn__label">Change email</span>
+                      <!----></span>
+                    </button>
+                    <router-link-stub class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button" to="[object Object]"></router-link-stub>
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Language</td>
+                  <td class="py-4 px-2 align-middle">French</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Role</td>
+                  <td class="py-4 px-2 whitespace-nowrap"><span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">User</span></td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center"><button type="button" class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--small o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-chevron-double-up"></i></span><span class="o-btn__label">Change role</span>
+                      <!----></span>
+                    </button></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Login status</td>
+                  <td class="py-4 px-2 align-middle">Activated</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Confirmed</td>
+                  <td class="py-4 px-2 align-middle">Saturday, August 30, 2025 at 11:56 AM</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
+                    <!--v-if-->
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last sign-in</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last IP adress</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Total number of participations</td>
+                  <td class="py-4 px-2 align-middle">14</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Uploaded media total size</td>
+                  <td class="py-4 px-2 align-middle">6,76&nbsp;mégaoctets</td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="my-4">
+    <h2 class="text-lg font-bold mb-3">Profiles</h2>
+    <div class="flex flex-wrap justify-center sm:justify-start gap-4">
+      <router-link-stub to="[object Object]" replace="false" custom="false" ariacurrentvalue="page" viewtransition="false"></router-link-stub>
+    </div>
+  </section>
+  <section class="my-4">
+    <h2 class="text-lg font-bold mb-3">Actions</h2>
+    <table>
+      <tr>
+        <!--v-if-->
+        <td>
+          <div class="buttons"><button type="button" class="o-btn o-btn--danger" role="button" data-oruga="button" id="deleteAccount"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Ban</span>
+              <!----></span>
+            </button></div>
+        </td>
+      </tr>
+    </table>
+  </section>
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <div class="" style="width: auto;">
+            <header class="">
+              <h2>Change user email</h2>
+            </header>
+            <section class="">
+              <div data-oruga="field" class="o-field o-field--filled"><label class="o-field__label" for="">Previous email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input id="" data-oruga-input="email" type="email" class="o-input o-input--disabled" autocomplete="off" disabled="">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div>
+              <div data-oruga="field" class="o-field"><label class="o-field__label" for="">New email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input required="" id="" data-oruga-input="email" type="email" class="o-input" autocomplete="off" placeholder="new@email.com">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+            </section>
+            <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+                <!----></span>
+              </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change email</span>
+                <!----></span>
+              </button></footer>
+          </div>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Change user role</h2>
+          </header>
+          <section>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="ADMINISTRATOR"><span class="o-radio__label">Administrator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="MODERATOR"><span class="o-radio__label">Moderator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" autocomplete="off" value="USER"><span class="o-radio__label">User</span></label></div>
+              </div>
+              <!---->
+            </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+          </section>
+          <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change role</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Confirm user</h2>
+          </header>
+          <section><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label></section>
+          <footer><button type="button" class="o-btn" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Confirm user</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`UsersView > Unban user 1`] = `
+"<div>
+  <breadcrumbs-nav links="[object Object],[object Object],[object Object]"></breadcrumbs-nav>
+  <section>
+    <h2 class="text-lg font-bold mb-3">Details</h2>
+    <div class="flex flex-col">
+      <div class="overflow-x-auto">
+        <div class="inline-block py-2 min-w-full sm:px-2">
+          <div class="overflow-hidden shadow-md sm:rounded-lg">
+            <table class="table w-full">
+              <tbody>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Email</td>
+                  <td class="py-4 px-2 align-middle">truc@mobilizon.test</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex flex flex-col items-start gap-2">
+                    <!--v-if-->
+                    <router-link-stub class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button" to="[object Object]"></router-link-stub>
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Language</td>
+                  <td class="py-4 px-2 align-middle">French</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Role</td>
+                  <td class="py-4 px-2 whitespace-nowrap"><span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">User</span></td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center">
+                    <!--v-if-->
+                  </td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Login status</td>
+                  <td class="py-4 px-2 align-middle">Disabled</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Confirmed</td>
+                  <td class="py-4 px-2 align-middle">Saturday, August 30, 2025 at 11:56 AM</td>
+                  <td class="py-4 px-2 whitespace-nowrap flex items-center"><button type="button" class="o-btn o-btn--small o-btn--text" role="button" data-oruga="button"><span class="o-btn__wrapper"><span class="o-icon o-icon--small o-btn__icon o-btn__icon-left" data-oruga="icon"><i class="mdi mdi-check"></i></span><span class="o-btn__label">Confirm user</span>
+                      <!----></span>
+                    </button></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last sign-in</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Last IP adress</td>
+                  <td class="py-4 px-2 align-middle">Unknown</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Total number of participations</td>
+                  <td class="py-4 px-2 align-middle">14</td>
+                  <td></td>
+                </tr>
+                <tr class="border-b">
+                  <td class="py-4 px-2 whitespace-nowrap align-middle">Uploaded media total size</td>
+                  <td class="py-4 px-2 align-middle">6,76&nbsp;mégaoctets</td>
+                  <td></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="my-4">
+    <h2 class="text-lg font-bold mb-3">Profiles</h2>
+    <div class="flex flex-wrap justify-center sm:justify-start gap-4">
+      <router-link-stub to="[object Object]" replace="false" custom="false" ariacurrentvalue="page" viewtransition="false"></router-link-stub>
+    </div>
+  </section>
+  <section class="my-4">
+    <h2 class="text-lg font-bold mb-3">Actions</h2>
+    <table>
+      <tr>
+        <!--v-if-->
+        <td>
+          <div>
+            <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg" role="alert">The user has been banned</div><button type="button" class="o-btn o-btn--danger" role="button" data-oruga="button" id="unbanAccount"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Unban</span>
+              <!----></span>
+            </button>
           </div>
         </td>
       </tr>
     </table>
   </section>
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
+  <!--teleport start-->
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" has-modal-card="" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
-  <o-modal-stub active="false" fullscreen="false" width="960" animation="zoom-out" cancelable="escape,x,outside,button" scroll="keep" trapfocus="true" ariarole="dialog" aria-label="Edit user email" destroyonhide="false" autofocus="true" closeicon="close" closeiconsize="medium" teleport="false" events="[object Object]" container="body" has-modal-card="" close-button-aria-label="Close" aria-modal=""></o-modal-stub>
+    <div close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <div class="" style="width: auto;">
+            <header class="">
+              <h2>Change user email</h2>
+            </header>
+            <section class="">
+              <div data-oruga="field" class="o-field o-field--filled"><label class="o-field__label" for="">Previous email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input id="" data-oruga-input="email" type="email" class="o-input o-input--disabled" autocomplete="off" disabled="">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div>
+              <div data-oruga="field" class="o-field"><label class="o-field__label" for="">New email</label>
+                <div class="o-field__body">
+                  <div class="o-field o-field--addons">
+                    <div data-oruga="input" class="o-input__wrapper"><input required="" id="" data-oruga-input="email" type="email" class="o-input" autocomplete="off" placeholder="new@email.com">
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                  </div>
+                </div>
+                <!---->
+              </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+            </section>
+            <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+                <!----></span>
+              </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change email</span>
+                <!----></span>
+              </button></footer>
+          </div>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Change user role</h2>
+          </header>
+          <section>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="ADMINISTRATOR"><span class="o-radio__label">Administrator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio" data-oruga="radio" role="radio" aria-checked="false"><input type="radio" data-oruga-input="radio" class="o-radio__input" autocomplete="off" value="MODERATOR"><span class="o-radio__label">Moderator</span></label></div>
+              </div>
+              <!---->
+            </div>
+            <div data-oruga="field" class="o-field">
+              <!---->
+              <div class="o-field__body">
+                <div class="o-field o-field--addons"><label class="o-radio o-radio--checked" data-oruga="radio" role="radio" aria-checked="true"><input type="radio" data-oruga-input="radio" class="o-radio__input o-radio__input--checked" autocomplete="off" value="USER"><span class="o-radio__label">User</span></label></div>
+              </div>
+              <!---->
+            </div><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label>
+          </section>
+          <footer class="mt-2 flex gap-2"><button type="button" class="o-btn o-btn--outlined" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Change role</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
+  <!--teleport start-->
+  <transition-stub name="zoom-out" appear="false" persisted="false" css="true">
+    <div has-modal-card="" close-button-aria-label="Close" aria-modal="false" data-oruga="modal" class="o-modal" tabindex="-1" role="dialog" aria-label="Edit user email" style="display: none;">
+      <div class="o-modal__overlay" tabindex="-1" aria-hidden="true"></div>
+      <div class="o-modal__content" style="max-width: 960px;">
+        <form>
+          <header>
+            <h2>Confirm user</h2>
+          </header>
+          <section><label class="o-chk o-chk--checked" data-oruga="checkbox" role="checkbox" aria-checked="true"><input type="checkbox" data-oruga-input="checkbox" class="o-chk__input o-chk__input--checked" autocomplete="off" true-value="true" false-value="false"><span class="o-chk__label">Notify the user of the change</span></label></section>
+          <footer><button type="button" class="o-btn" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Close</span>
+              <!----></span>
+            </button><button type="submit" class="o-btn o-btn--primary" role="button" data-oruga="button"><span class="o-btn__wrapper"><!----><span class="o-btn__label">Confirm user</span>
+              <!----></span>
+            </button></footer>
+        </form><span class="o-icon o-icon--clickable o-icon--medium o-modal__close" data-oruga="icon" style="display: none;"><i class="mdi mdi-close mdi-36px"></i></span>
+      </div>
+    </div>
+  </transition-stub>
+  <!--teleport end-->
 </div>"
 `;

tests/unit/specs/components/admin/adminUsersProfileView.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { DefaultApolloClient } from "@vue/apollo-composable";
-import { config, shallowMount } from "@vue/test-utils";
+import { config, mount } from "@vue/test-utils";
 import buildCurrentUserResolver from "@/apollo/user";
 import flushPromises from "flush-promises";
 import { cache } from "@/apollo/memory";
@@ -10,16 +10,19 @@ import {
   RequestHandler,
 } from "mock-apollo-client";
 import AdminUserProfile from "@/views/Admin/AdminUserProfile.vue";
-import { GET_USER } from "@/graphql/user";
+import {
+  DELETE_ACCOUNT_AS_MODERATOR,
+  GET_USER,
+  UNBAN_ACCOUNT_AS_MODERATOR,
+} from "@/graphql/user";
 import { ADMIN_UPDATE_USER, LANGUAGES_CODES } from "@/graphql/admin";
 import { Oruga } from "@oruga-ui/oruga-next";
-import { nullMock } from "../../common";
+import { htmlRemoveId, nullMock } from "../../common";
 import {
   createRouterMock,
   injectRouterMock,
   VueRouterMock,
 } from "vue-router-mock";
-import { SettingsRouteName } from "@/router/settings";
 
 let mockClient: MockApolloClient | null;
 let requestHandlers: Record<string, RequestHandler>;
@@ -78,6 +81,10 @@ const getUserMock = {
   },
 };
 
+// A copy of the user that is banned
+const getUserMockBan = structuredClone(getUserMock);
+getUserMockBan.data.user.disabled = true;
+
 const getModerateMock = {
   data: {
     user: {
@@ -137,17 +144,27 @@ describe("UsersView", () => {
     });
     requestHandlers = {
       languagecode: vi.fn().mockResolvedValue(languageCodeMock),
-      get_users: vi.fn().mockResolvedValue(currentUserMock),
+      get_user: vi.fn().mockResolvedValue(currentUserMock),
       update_user: vi.fn().mockResolvedValue(nullMock),
+      ban_user: vi.fn().mockResolvedValue(nullMock),
+      unban_user: vi.fn().mockResolvedValue(nullMock),
     };
     mockClient.setRequestHandler(LANGUAGES_CODES, requestHandlers.languagecode);
-    mockClient.setRequestHandler(GET_USER, requestHandlers.get_users);
+    mockClient.setRequestHandler(GET_USER, requestHandlers.get_user);
     mockClient.setRequestHandler(
       ADMIN_UPDATE_USER,
       requestHandlers.update_user
     );
+    mockClient.setRequestHandler(
+      DELETE_ACCOUNT_AS_MODERATOR,
+      requestHandlers.ban_user
+    );
+    mockClient.setRequestHandler(
+      UNBAN_ACCOUNT_AS_MODERATOR,
+      requestHandlers.unban_user
+    );
 
-    const wrapper = shallowMount(AdminUserProfile, {
+    const wrapper = mount(AdminUserProfile, {
       props: { id: "1234" },
       stubs: ["router-link", "router-view"],
       global: {
@@ -164,9 +181,9 @@ describe("UsersView", () => {
     await wrapper.vm.$nextTick();
     await flushPromises();
     expect(wrapper.exists()).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
     expect(requestHandlers.languagecode).toHaveBeenCalledTimes(1);
-    expect(requestHandlers.get_users).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(1);
     expect(requestHandlers.update_user).toHaveBeenCalledTimes(0);
   });
 
@@ -177,27 +194,76 @@ describe("UsersView", () => {
     await wrapper.vm.$nextTick();
     await flushPromises();
     expect(wrapper.exists()).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
     expect(requestHandlers.languagecode).toHaveBeenCalledTimes(0);
-    expect(requestHandlers.get_users).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(1);
     expect(requestHandlers.update_user).toHaveBeenCalledTimes(0);
-    const btn = wrapper.find('o-button-stub[variant="success"]');
+    const btn = wrapper.find("#acceptAccount");
     expect(btn.exists()).toBe(true);
     btn.trigger("click");
     await flushPromises();
     expect(requestHandlers.languagecode).toHaveBeenCalledTimes(0);
-    expect(requestHandlers.get_users).toHaveBeenCalledTimes(1);
+    // The user is refreshed after the update
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(2);
     expect(requestHandlers.update_user).toHaveBeenCalledTimes(1);
     expect(requestHandlers.update_user).toHaveBeenCalledWith({
       id: "1234",
       notify: true,
       role: "USER",
     });
+  });
+
+  it("Ban user", async () => {
+    const wrapper = generateWrapper();
+    await wrapper.vm.$nextTick();
     await flushPromises();
-    await flushPromises();
+    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.router.push).toHaveBeenCalledWith({
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
-      name: SettingsRouteName.ADMIN_USER_PROFILE,
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(1);
-      id: "1234",
+    expect(requestHandlers.ban_user).toHaveBeenCalledTimes(0);
+
+    // Find ban button
+    const btn = wrapper.find("#deleteAccount");
+    expect(btn.exists()).toBe(true);
+    btn.trigger("click");
+
+    // TODO The definitive button "Ban the account" is in a dialog pop-up outside of the component
+    // Sadly, we can't access this pop-up and click on the button to fully test
+    /*
+    // ban_user has been called 
+    expect(requestHandlers.ban_user).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.ban_user).toHaveBeenCalledWith({
+      userId: "1234",
     });
+    */
+  });
+
+  it("Unban user", async () => {
+    const wrapper = generateWrapper(getUserMockBan);
+    await wrapper.vm.$nextTick();
+    await flushPromises();
+    expect(wrapper.exists()).toBe(true);
+    expect(htmlRemoveId(wrapper.html())).toMatchSnapshot();
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.ban_user).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.unban_user).toHaveBeenCalledTimes(0);
+
+    // Find ban button
+    const btn = wrapper.find("#unbanAccount");
+    expect(btn.exists()).toBe(true);
+    btn.trigger("click");
+
+    // TODO The definitive button "Unban the account" is in a dialog pop-up outside of the component
+    // Sadly, we can't access this pop-up and click on the button to fully test
+    /*
+    // unban_user has been called 
+    expect(requestHandlers.get_user).toHaveBeenCalledTimes(2);
+    expect(requestHandlers.ban_user).toHaveBeenCalledTimes(0);
+    expect(requestHandlers.unban_user).toHaveBeenCalledTimes(1);
+    expect(requestHandlers.ban_user).toHaveBeenCalledWith({
+      userId: "1234",
+    });
+    */
   });
 });