Просмотр исходного кода

RHL-043 feat(admin-users): add tooltips for temporary password actions

Code_Uwe 1 месяц назад
Родитель
Сommit
9b1a4bf8da
1 измененных файлов с 69 добавлено и 46 удалено
  1. 69 46
      components/admin/users/UserTemporaryPasswordField.jsx

+ 69 - 46
components/admin/users/UserTemporaryPasswordField.jsx

@@ -12,6 +12,11 @@ import {
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import {
 	adminResetUserPassword,
@@ -181,53 +186,72 @@ export default function UserTemporaryPasswordField({
 
 	const controls = (
 		<div className="flex items-center gap-1">
-			<Button
-				type="button"
-				variant="outline"
-				size="icon-sm"
-				disabled={isDisabled}
-				onClick={handleResetPassword}
-				title="Temporäres Passwort setzen"
-				aria-label="Temporäres Passwort setzen"
-			>
-				{isResetting ? (
-					<Loader2 className="h-4 w-4 animate-spin" />
-				) : (
-					<KeyRound className="h-4 w-4" />
-				)}
-			</Button>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						type="button"
+						variant="outline"
+						size="icon-sm"
+						disabled={isDisabled}
+						onClick={handleResetPassword}
+						title="Temporäres Passwort setzen"
+						aria-label="Temporäres Passwort setzen"
+					>
+						{isResetting ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							<KeyRound className="h-4 w-4" />
+						)}
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent sideOffset={6}>
+					Temporäres Passwort setzen
+				</TooltipContent>
+			</Tooltip>
 
-			<Button
-				type="button"
-				variant="outline"
-				size="icon-sm"
-				disabled={isDisabled || !hasTempPassword}
-				onClick={handleToggleVisible}
-				title={isVisible ? "Passwort verbergen" : "Passwort anzeigen"}
-				aria-label={isVisible ? "Passwort verbergen" : "Passwort anzeigen"}
-			>
-				{isVisible ? (
-					<EyeOff className="h-4 w-4" />
-				) : (
-					<Eye className="h-4 w-4" />
-				)}
-			</Button>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						type="button"
+						variant="outline"
+						size="icon-sm"
+						disabled={isDisabled || !hasTempPassword}
+						onClick={handleToggleVisible}
+						title={isVisible ? "Passwort verbergen" : "Passwort anzeigen"}
+						aria-label={isVisible ? "Passwort verbergen" : "Passwort anzeigen"}
+					>
+						{isVisible ? (
+							<EyeOff className="h-4 w-4" />
+						) : (
+							<Eye className="h-4 w-4" />
+						)}
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent sideOffset={6}>
+					{isVisible ? "Passwort verbergen" : "Passwort anzeigen"}
+				</TooltipContent>
+			</Tooltip>
 
-			<Button
-				type="button"
-				variant="outline"
-				size="icon-sm"
-				disabled={isDisabled || !hasTempPassword}
-				onClick={handleCopyPassword}
-				title="Passwort kopieren"
-				aria-label="Passwort kopieren"
-			>
-				{copySuccess ? (
-					<Check className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
-				) : (
-					<Copy className="h-4 w-4" />
-				)}
-			</Button>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						type="button"
+						variant="outline"
+						size="icon-sm"
+						disabled={isDisabled || !hasTempPassword}
+						onClick={handleCopyPassword}
+						title="Passwort kopieren"
+						aria-label="Passwort kopieren"
+					>
+						{copySuccess ? (
+							<Check className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+						) : (
+							<Copy className="h-4 w-4" />
+						)}
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent sideOffset={6}>Passwort kopieren</TooltipContent>
+			</Tooltip>
 		</div>
 	);
 
@@ -261,4 +285,3 @@ export default function UserTemporaryPasswordField({
 		</div>
 	);
 }
-