enh: user role update confirm dialog

src/lib/components/admin/Users/UserList.svelte

@@ -23,6 +23,8 @@
 	import AddUserModal from '$lib/components/admin/Users/UserList/AddUserModal.svelte';
 
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import RoleUpdateConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+
 	import Badge from '$lib/components/common/Badge.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
@@ -49,7 +51,17 @@
 
 	let showUserChatsModal = false;
 	let showEditUserModal = false;
+	let showUpdateRoleModal = false;
 
+	const onUpdateRole = (user) => {
+		if (user.role === 'user') {
+			updateRoleHandler(user.id, 'admin');
+		} else if (user.role === 'pending') {
+			updateRoleHandler(user.id, 'user');
+		} else {
+			updateRoleHandler(user.id, 'pending');
+		}
+	};
 	const updateRoleHandler = async (id, role) => {
 		const res = await updateUserRole(localStorage.token, id, role).catch((error) => {
 			toast.error(`${error}`);
@@ -114,6 +126,22 @@
 	}}
 />
 
+<RoleUpdateConfirmDialog
+	bind:show={showUpdateRoleModal}
+	on:confirm={() => {
+		onUpdateRole(selectedUser);
+	}}
+	title={$i18n.t('Update User Role')}
+	message={$i18n.t(`Are you sure you want to update this user\'s role to **{{ROLE}}**?`, {
+		ROLE:
+			selectedUser?.role === 'user'
+				? 'admin'
+				: selectedUser?.role === 'pending'
+					? 'user'
+					: 'pending'
+	})}
+/>
+
 {#key selectedUser}
 	<EditUserModal
 		bind:show={showEditUserModal}
@@ -372,13 +400,8 @@
 						<button
 							class=" translate-y-0.5"
 							on:click={() => {
-								if (user.role === 'user') {
+								selectedUser = user;
-									updateRoleHandler(user.id, 'admin');
+								showUpdateRoleModal = true;
-								} else if (user.role === 'pending') {
-									updateRoleHandler(user.id, 'user');
-								} else {
-									updateRoleHandler(user.id, 'pending');
-								}
 							}}
 						>
 							<Badge

src/lib/components/common/ConfirmDialog.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
+
 	import { onMount, getContext, createEventDispatcher } from 'svelte';
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
 	import { fade } from 'svelte/transition';
 	import { flyAndScale } from '$lib/utils/transitions';
+	import { marked } from 'marked';
 
 	export let title = '';
 	export let message = '';
@@ -90,7 +93,8 @@
 				<slot>
 					<div class=" text-sm text-gray-500 flex-1">
 						{#if message !== ''}
-							{message}
+							{@const html = DOMPurify.sanitize(marked.parse(message))}
+							{@html html}
 						{:else}
 							{$i18n.t('This action cannot be undone. Do you wish to continue?')}
 						{/if}