xevion/dynamic-preauth
1
0
Fork 0
mirror of https://github.com/Xevion/dynamic-preauth.git synced 2025-12-11 10:07:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

improve display views, add random generation for demo version, improve badge flex, add ephemeral note

Browse Source
This commit is contained in:
Xevion
2024-12-22 10:28:50 -06:00
parent 9f142327b9
commit b88296c410
3 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/StatefulDemo.tsx
View File

@@ -12,14 +12,20 @@ type SessionData = {
}; };
const StatefulDemo = ({ class: className }: StatefulDemoProps) => { const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
const randomBits = (bits: number) =>
Math.floor(Math.random() * 2 ** bits)
.toString(16)
.padStart(bits / 4, "0")
.toUpperCase();
const [session, setSession] = useState<SessionData | null>({ const [session, setSession] = useState<SessionData | null>({
id: "0x59AF5BC09", id: "0×" + randomBits(32),
downloads: ["0xABF4", "0x1F3A", "0x2F3A"], downloads: Array.from({ length: 7 }).map(() => "0×" + randomBits(16)),
}); });
return ( return (
<div class={cn(className, "px-5 leading-6")}> <div class={cn(className, "px-5 leading-6")}>
<p class="mt-3"> <p class="mt-3 mb-3">
This demo uses websockets to communicate between the server and the This demo uses websockets to communicate between the server and the
browser. Each download gets a unique identifier bound to the user browser. Each download gets a unique identifier bound to the user
session. session.
@@ -33,9 +39,10 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
</> </>
) : null} ) : null}
</p> </p>
<div> <div class="flex flex-wrap justify-center gap-y-2.5">
{session?.downloads.map((download) => ( {session?.downloads.map((download) => (
<Badge <Badge
className="grow-0"
onClick={function onClick() { onClick={function onClick() {
const audio = new Audio("/notify.wav"); const audio = new Audio("/notify.wav");
audio.volume = 0.3; audio.volume = 0.3;
@@ -46,6 +53,13 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
</Badge> </Badge>
))} ))}
</div> </div>
<div class="mt-4 p-2 bg-zinc-900/90 rounded-md border border-zinc-700">
<p class="my-0">
The server running this is completely ephemeral, can restart at any
time, and purges data on regular intervals - at which point the
executables you've downloaded will no longer function.
</p>
</div>
</div> </div>
); );
}; };

2
frontend/src/layouts/Base.astro
View File

@@ -7,7 +7,7 @@
<link rel="preload" href="/notify.wav" as="audio" /> <link rel="preload" href="/notify.wav" as="audio" />
<title>Dynamic Preauth</title> <title>Dynamic Preauth</title>
</head> </head>
<body class="noise after:opacity-70"> <body class="md:noise after:opacity-70">
<slot /> <slot />
</body> </body>
</html> </html>

2
frontend/src/pages/index.astro
View File

@@ -7,7 +7,7 @@ import "@/globals.scss";
<Base> <Base>
<div class="w-screen h-screen flex flex-col items-center middle"> <div class="w-screen h-screen flex flex-col items-center middle">
<div <div
class="noise-card rounded-sm relative z-20 border-zinc-700 border w-full max-w-[40rem] mt-16 mb-8 shadow-lg" class="noise-card rounded-sm relative z-20 border-zinc-700 md:border w-full max-w-[40rem] md:mt-16 mb-8 shadow-lg"
style={{ style={{
backgroundPosition: backgroundPosition:
Math.random() * 100 + "px " + Math.random() * 100 + "px", Math.random() * 100 + "px " + Math.random() * 100 + "px",