tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

Made the settings a little nicer

Browse source
This commit is contained in:
Alois 2026-04-10 20:48:26 +02:00
commit 93db9fe54a
2 changed files with 48 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/src/features/settings/layout.tsx
View file

@ -2,17 +2,25 @@ import { Button } from "@tensamin/ui/cmp/button";
import options from "@tensamin/shared/settings";
import { cn, useIsMobile } from "@tensamin/ui/utils";
import { Outlet, useNavigate } from "@tanstack/react-router";
import { Outlet, useLocation, useNavigate } from "@tanstack/react-router";
export default function Screen() {
const isMobile = useIsMobile();
const location = useLocation();
return (
<div className="flex h-full w-full">
{!isMobile && <SettingsSidebar />}
{/* Page */}
<div className="bg-background w-full h-full p-3">
<div className="bg-background w-full h-full p-3 flex flex-col gap-3">
<h1 className="text-xl font-semibold">
{location.pathname
.split("/")
.pop()
?.replace(/-/g, " ")
.replace(/\b\w/g, (l) => l.toUpperCase())}
</h1>
<Outlet />
</div>
</div>

73
apps/web/src/routes/settings/security.tsx
View file

@ -71,41 +71,44 @@ function QrCodeLogin() {
const [qrCodeVisible, setQrCodeVisible] = useState(false);
return (
<div className="relative rounded-lg w-50 border-3 aspect-square overflow-hidden">
{qrCodeBase64 && (
<img className="w-full h-full" src={qrCodeBase64} alt="QR Code" />
)}
{!qrCodeVisible && (
<>
<div className="absolute top-0 left-0 w-full h-full backdrop-blur-sm bg-background/50" />
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<AlertDialog>
<AlertDialogTrigger render={<Button>Show QR Code</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This will expose your private key! This is the same as
sharing the .tu file! It's very tedious to change the
private key, so only do this if you are sure no one can
steal it!
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
render={
<Button onClick={() => setQrCodeVisible(true)}>
Show QR Code
</Button>
}
/>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</>
)}
<div className="flex flex-col gap-1 pl-2">
<p>Login QR Code</p>
<div className="relative rounded-lg w-50 border-3 aspect-square overflow-hidden">
{qrCodeBase64 && (
<img className="w-full h-full" src={qrCodeBase64} alt="QR Code" />
)}
{!qrCodeVisible && (
<>
<div className="absolute top-0 left-0 w-full h-full backdrop-blur-sm bg-background/50" />
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<AlertDialog>
<AlertDialogTrigger render={<Button>Show QR Code</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
Exposing this QR code is the same as sharing your .tu
file. Since changing your private key is quite tedious,
only do this when you're confident the key won't be
compromised.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
render={
<Button onClick={() => setQrCodeVisible(true)}>
Show QR Code
</Button>
}
/>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</>
)}
</div>
</div>
);
}