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 options from "@tensamin/shared/settings";
import { cn, useIsMobile } from "@tensamin/ui/utils"; 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() { export default function Screen() {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const location = useLocation();
return ( return (
<div className="flex h-full w-full"> <div className="flex h-full w-full">
{!isMobile && <SettingsSidebar />} {!isMobile && <SettingsSidebar />}
{/* Page */} {/* 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 /> <Outlet />
</div> </div>
</div> </div>

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

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