feat: copy user ip/mac on tap

LoV432 · Jan 1, 2024 · 36170b0 · 36170b0
1 parent 1ef677c
commit 36170b0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/app/components/dashboard/DashboardCardCurrentStatus/DashboardCardCurrentStatus.client.tsx b/app/components/dashboard/DashboardCardCurrentStatus/DashboardCardCurrentStatus.client.tsx
@@ -5,6 +5,7 @@ import type {
 	pppoeStatusReturnType
 } from '@/lib/get-pppoe-status';
 import { formatUpTime } from '@/lib/format-uptime';
+import CopyToast from '../../misc/CopyToast';
 export function DashboardCardCurrentStatus({
 	pppoeStatusPrerender
 }: {
@@ -81,13 +82,3 @@ function returnStatusBool(status: string) {
 	}
 	return false;
 }
-
-function CopyToast() {
-	return (
-		<div className="toast toast-end toast-top z-50">
-			<div className="alert alert-success border-2 border-green-900 text-lg font-semibold">
-				<span>IP address copied to clipboard.</span>
-			</div>
-		</div>
-	);
-}
diff --git a/app/components/misc/CopyToast.tsx b/app/components/misc/CopyToast.tsx
@@ -0,0 +1,9 @@
+export default function CopyToast() {
+	return (
+		<div className="toast toast-end toast-top z-50">
+			<div className="alert alert-success border-2 border-green-900 text-lg font-semibold">
+				<span>Copied to clipboard</span>
+			</div>
+		</div>
+	);
+}
diff --git a/app/components/user-cards/UserCard.client.tsx b/app/components/user-cards/UserCard.client.tsx
@@ -6,9 +6,21 @@ import { allSpeedStates } from '../boundaries/SpeedBoundarie.client';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { userReturnType } from '@/app/api/dhcp-event/route';
+import CopyToast from '../misc/CopyToast';
 export default function UserCard({ user }: { user: userReturnType }) {
 	const [localUpdateTime, setLocalUpdateTime] = useState('');
 	const [showDetails, setShowDetails] = useState(false);
+	const [showToast, setShowToast] = useState(false);
+
+	function copyText(text: string) {
+		// TODO: This whole copy/toast logic is duplicate of DashboardCardCurrentStatus.client.tsx. Find a way to merge?
+		navigator.clipboard.writeText(text);
+		setShowToast(true);
+		setTimeout(() => {
+			setShowToast(false);
+		}, 3000);
+	}
+
 	useEffect(() => {
 		setLocalUpdateTime(
 			new Date(user.last_updated).toLocaleString('en-US', {
@@ -38,12 +50,22 @@ export default function UserCard({ user }: { user: userReturnType }) {
 							{user.display_name || user.name}
 						</p>
 					</h2>
-					<h2 className="card-title border-b border-white border-opacity-30 pb-2">
+					<h2
+						onClick={() => {
+							copyText(user.ip);
+						}}
+						className="card-title cursor-pointer border-b border-white border-opacity-30 pb-2"
+					>
 						{user.ip}
 					</h2>
 					{showDetails ? (
 						<>
-							<h2 className="card-title border-b border-white border-opacity-30 pb-2">
+							<h2
+								onClick={() => {
+									copyText(user.mac_address);
+								}}
+								className="card-title cursor-pointer border-b border-white border-opacity-30 pb-2"
+							>
 								{user.mac_address.toUpperCase()}
 							</h2>
 							<h2 className="card-title border-b border-white border-opacity-30 pb-2">
@@ -64,6 +86,7 @@ export default function UserCard({ user }: { user: userReturnType }) {
 					</div>
 				</div>
 			</div>
+			{showToast ? <CopyToast /> : null}
 		</>
 	);
 }