added dismiss button and "login details" dialog to under construction warning

packages/frontend/src/components/auth-provider.tsx

@@ -1,16 +1,10 @@
 import type { UserRecord } from "@issue/shared";
-import { AlertTriangle } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import Loading from "@/components/loading";
 import LogInForm from "@/components/login-form";
 import { getServerURL } from "@/lib/utils";
 
-type AuthProviderProps = {
+export function Auth({ children }: { children: React.ReactNode; loggedInDefault?: boolean }) {
-    children: React.ReactNode;
-    loggedInDefault?: boolean;
-};
-
-export function Auth({ children }: AuthProviderProps) {
     const [loggedIn, setLoggedIn] = useState<boolean>();
     const fetched = useRef(false);
 
@@ -49,19 +43,6 @@ export function Auth({ children }: AuthProviderProps) {
     if (loggedIn === false)
         return (
             <div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]">
-                {/* under construction warning */}
-                <div className="flex flex-col border p-4 items-center border-border/50 bg-border/10 gap-2 max-w-lg">
-                    <AlertTriangle className="w-16 h-16 text-yellow-500" strokeWidth={1.5} />
-                    <p className="text-center text-sm text-muted-foreground font-500">
-                        This application is currently under construction. Your data is very likely to be lost
-                        at some point.
-                        <pre> </pre>
-                        <p className="font-700 underline underline-offset-3 text-foreground/85 decoration-yellow-500">
-                            It is not recommended for production use.
-                        </p>
-                        But you're more than welcome to have a look around!
-                    </p>
-                </div>
                 <LogInForm />
             </div>
         );

packages/frontend/src/components/login-form.tsx

@@ -1,13 +1,27 @@
 /** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */
+
+import { AlertTriangle, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import Avatar from "@/components/avatar";
 import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Field } from "@/components/ui/field";
 import { Label } from "@/components/ui/label";
 import { UploadAvatar } from "@/components/upload-avatar";
 import { capitalise, cn, getServerURL } from "@/lib/utils";
 
+const DEMO_USERS = [
+    { name: "User 1", username: "u1", password: "a" },
+    { name: "User 2", username: "u2", password: "a" },
+];
+
 export default function LogInForm() {
+    const [loginDetailsOpen, setLoginDetailsOpen] = useState(false);
+    const [showWarning, setShowWarning] = useState(() => {
+        return localStorage.getItem("hide-under-construction") !== "true";
+    });
+
     const [mode, setMode] = useState<"login" | "register">("login");
 
     const [name, setName] = useState("");
@@ -114,6 +128,75 @@ export default function LogInForm() {
     };
 
     return (
+        <>
+            {/* under construction warning */}
+            {showWarning && (
+                <div className="relative flex flex-col border p-4 items-center border-border/50 bg-border/10 gap-2 max-w-lg">
+                    <Button
+                        variant="dummy"
+                        size="icon"
+                        className="absolute top-2 right-2"
+                        onClick={() => {
+                            localStorage.setItem("hide-under-construction", "true");
+                            setShowWarning(false);
+                        }}
+                    >
+                        <X />
+                    </Button>
+                    <AlertTriangle className="w-16 h-16 text-yellow-500" strokeWidth={1.5} />
+                    <p className="text-center text-sm text-muted-foreground font-500">
+                        This application is currently under construction. Your data is very likely to be lost
+                        at some point.
+                        <pre> </pre>
+                        <p className="font-700 underline underline-offset-3 text-foreground/85 decoration-yellow-500">
+                            It is not recommended for production use.
+                        </p>
+                        But you're more than welcome to have a look around!
+                        <Dialog open={loginDetailsOpen} onOpenChange={setLoginDetailsOpen}>
+                            <DialogTrigger className="underline underline-offset-2 text-primary hover:text-primary/90 cursor-pointer mt-2">
+                                Login Details
+                            </DialogTrigger>
+                            <DialogContent className="w-xs" showCloseButton={false}>
+                                <div className="grid grid-cols-2 gap-4">
+                                    {DEMO_USERS.map((user) => (
+                                        <button
+                                            type="button"
+                                            key={user.username}
+                                            className="space-y-2 border border-background hover:border-border hover:bg-border/10 cursor-pointer p-2 text-left"
+                                            onClick={() => {
+                                                setMode("login");
+                                                setUsername(user.username);
+                                                setPassword(user.password);
+                                                setLoginDetailsOpen(false);
+                                                resetForm();
+                                            }}
+                                        >
+                                            <div className="flex items-center gap-2">
+                                                <Avatar name={user.name} username={user.username} />
+                                                <span className="font-semibold">{user.name}</span>
+                                            </div>
+                                            <div className="text-sm text-muted-foreground space-y-1">
+                                                <p>
+                                                    <span className="font-medium text-foreground">
+                                                        Username:
+                                                    </span>{" "}
+                                                    {user.username}
+                                                </p>
+                                                <p>
+                                                    <span className="font-medium text-foreground">
+                                                        Password:
+                                                    </span>{" "}
+                                                    {user.password}
+                                                </p>
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                            </DialogContent>
+                        </Dialog>
+                    </p>
+                </div>
+            )}
             <div>
                 <form onSubmit={handleSubmit}>
                     <div
@@ -209,5 +292,6 @@ export default function LogInForm() {
                     )}
                 </div>
             </div>
+        </>
     );
 }