Add impersonation feature to user management

- Introduced an ImpersonationBar component for admin users to impersonate other users, enhancing user management capabilities.
- Updated the ProfileForm to include an option for allowing impersonation, with a description for clarity.
- Modified the DashboardLayout to conditionally display the impersonation bar based on user roles and cloud settings.
- Added database schema changes to support the new impersonation feature, including a new column for allowImpersonation in the user table.
- Implemented necessary API updates to handle impersonation actions and user data retrieval.

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -10,6 +10,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -28,12 +29,14 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { Switch } from "@/components/ui/switch";
 
 const profileSchema = z.object({
 	email: z.string(),
 	password: z.string().nullable(),
 	currentPassword: z.string().nullable(),
 	image: z.string().optional(),
+	allowImpersonation: z.boolean().optional().default(false),
 });
 
 type Profile = z.infer<typeof profileSchema>;
@@ -56,6 +59,7 @@ const randomImages = [
 export const ProfileForm = () => {
 	const _utils = api.useUtils();
 	const { data, refetch, isLoading } = api.user.get.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	const {
 		mutateAsync,
@@ -79,6 +83,7 @@ export const ProfileForm = () => {
 			password: "",
 			image: data?.user?.image || "",
 			currentPassword: "",
+			allowImpersonation: data?.user?.allowImpersonation || false,
 		},
 		resolver: zodResolver(profileSchema),
 	});
@@ -91,12 +96,17 @@ export const ProfileForm = () => {
 					password: form.getValues("password") || "",
 					image: data?.user?.image || "",
 					currentPassword: form.getValues("currentPassword") || "",
+					allowImpersonation: data?.user?.allowImpersonation,
 				},
 				{
 					keepValues: true,
 				},
 			);
 
+			form.reset({
+				allowImpersonation: data?.user?.allowImpersonation,
+			});
+
 			if (data.user.email) {
 				generateSHA256Hash(data.user.email).then((hash) => {
 					setGravatarHash(hash);
@@ -111,6 +121,7 @@ export const ProfileForm = () => {
 			password: values.password || undefined,
 			image: values.image,
 			currentPassword: values.currentPassword || undefined,
+			allowImpersonation: values.allowImpersonation,
 		})
 			.then(async () => {
 				await refetch();
@@ -256,7 +267,34 @@ export const ProfileForm = () => {
 													</FormItem>
 												)}
 											/>
+											{isCloud && (
+												<FormField
+													control={form.control}
+													name="allowImpersonation"
+													render={({ field }) => (
+														<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+															<div className="space-y-0.5">
+																<FormLabel>Allow Impersonation</FormLabel>
+																<FormDescription>
+																	Enable this option to allow Dokploy Cloud
+																	administrators to temporarily access your
+																	account for troubleshooting and support
+																	purposes. This helps them quickly identify and
+																	resolve any issues you may encounter.
+																</FormDescription>
+															</div>
+															<FormControl>
+																<Switch
+																	checked={field.value}
+																	onCheckedChange={field.onChange}
+																/>
+															</FormControl>
+														</FormItem>
+													)}
+												/>
+											)}
 										</div>
+
 										<div className="flex items-center justify-end gap-2">
 											<Button type="submit" isLoading={isUpdating}>
 												{t("settings.common.save")}