diff --git a/app/details/DatabaseLine.tsx b/app/details/DatabaseLine.tsx new file mode 100644 index 00000000..6c2ec62e --- /dev/null +++ b/app/details/DatabaseLine.tsx @@ -0,0 +1,52 @@ +import { Button } from "@/components/ui/button" +import { useToast } from "@/components/ui/use-toast" +import { Copy, Eye, EyeOff } from "lucide-react"; +import { useState } from "react"; + +export function DatabaseLine(props: { label: string, value: string, masked?: string }) { + + const { toast } = useToast() + const [showPassword, setShowPassword] = useState(false); + + function copyToClipboard(value: string) { + navigator.clipboard.writeText(value) + .then(() => { + toast({ + variant: "default", + title: "Copied to clipboard", + description: "The value has been copied to your clipboard.", + }) + }) + .catch(() => { + toast({ + variant: "destructive", + title: "Failed to copy to clipboard", + description: "The value could not be copied to your clipboard.", + }) + }) + } + + function showMasked() { + setShowPassword(!showPassword) + } + + return ( +
+
{props.label}:
+ { + props.value.length > 0 && + <> + + {props.masked && + + } + + } +
+ ); +} diff --git a/app/details/page.tsx b/app/details/page.tsx new file mode 100644 index 00000000..42c7bde8 --- /dev/null +++ b/app/details/page.tsx @@ -0,0 +1,22 @@ +"use client"; + +import { useSession } from "next-auth/react"; +import { DatabaseLine } from "./DatabaseLine"; + +// Shows the details of a current database connection +export default function Page() { + + const { data: session, status } = useSession() + + return ( +
+

Connection Details

+
+ + + + +
+
+ ) +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index fafeb1ef..dc7919f2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,6 +5,7 @@ import Navbar from '@/components/custom/navbar' import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable' import NextAuth from 'next-auth' import { NextAuthProvider } from './providers' +import { Toaster } from '@/components/ui/toaster' const inter = Inter({ subsets: ['latin'] }) @@ -22,6 +23,7 @@ export default function RootLayout({ {children} + ) diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx index 2ed3d663..07421213 100644 --- a/components/custom/navbar.tsx +++ b/components/custom/navbar.tsx @@ -1,4 +1,4 @@ -import { LogOut, Menu } from "lucide-react"; +import { Info, LogOut, Menu, Waypoints } from "lucide-react"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { Switch } from "../ui/switch"; @@ -8,8 +8,8 @@ import { useTheme } from "next-themes"; export default function Navbar() { const { data: session, status } = useSession() - const { theme, setTheme, systemTheme} = useTheme() - + const { theme, setTheme, systemTheme } = useTheme() + const [mounted, setMounted] = useState(false) useEffect(() => { @@ -25,7 +25,7 @@ export default function Navbar() { } } - let darkmode = theme=="dark" || (theme=="system" && systemTheme=="dark") + let darkmode = theme == "dark" || (theme == "system" && systemTheme == "dark") return ( ) }