ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-08 23:46:09 +00:00
parent 823ee36c07
commit d0a2b80d68
2 changed files with 171 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/frontend/src/components/auth-provider.tsx
View File

@@ -1,16 +1,10 @@
import type { UserRecord } from "@issue/shared"; import type { UserRecord } from "@issue/shared";
import { AlertTriangle } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import Loading from "@/components/loading"; import Loading from "@/components/loading";
import LogInForm from "@/components/login-form"; import LogInForm from "@/components/login-form";
import { getServerURL } from "@/lib/utils"; 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 [loggedIn, setLoggedIn] = useState<boolean>();
const fetched = useRef(false); const fetched = useRef(false);
@@ -49,19 +43,6 @@ export function Auth({ children }: AuthProviderProps) {
if (loggedIn === false) if (loggedIn === false)
return ( return (
<div className="flex flex-col items-center justify-center gap-4 w-full h-[100vh]"> <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 /> <LogInForm />
</div> </div>
); );

256
packages/frontend/src/components/login-form.tsx
View File

@@ -1,13 +1,27 @@
/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */ /** biome-ignore-all lint/correctness/useExhaustiveDependencies: <> */
import { AlertTriangle, X } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Avatar from "@/components/avatar";
import { ServerConfigurationDialog } from "@/components/server-configuration-dialog"; import { ServerConfigurationDialog } from "@/components/server-configuration-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { Field } from "@/components/ui/field"; import { Field } from "@/components/ui/field";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { UploadAvatar } from "@/components/upload-avatar"; import { UploadAvatar } from "@/components/upload-avatar";
import { capitalise, cn, getServerURL } from "@/lib/utils"; 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() { 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 [mode, setMode] = useState<"login" | "register">("login");
const [name, setName] = useState(""); const [name, setName] = useState("");
@@ -114,100 +128,170 @@ export default function LogInForm() {
}; };
return ( return (
<div> <>
<form onSubmit={handleSubmit}> {/* under construction warning */}
<div {showWarning && (
className={cn( <div className="relative flex flex-col border p-4 items-center border-border/50 bg-border/10 gap-2 max-w-lg">
"relative flex flex-col gap-2 items-center border p-6 pb-4", <Button
error !== "" && "border-destructive", variant="dummy"
)} size="icon"
> className="absolute top-2 right-2"
<ServerConfigurationDialog /> onClick={() => {
<span className="text-xl ">{capitalise(mode)}</span> 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
className={cn(
"relative flex flex-col gap-2 items-center border p-6 pb-4",
error !== "" && "border-destructive",
)}
>
<ServerConfigurationDialog />
<span className="text-xl ">{capitalise(mode)}</span>
<div className={"flex flex-col items-center mb-0"}> <div className={"flex flex-col items-center mb-0"}>
{mode === "register" && ( {mode === "register" && (
<>
<UploadAvatar
name={name}
username={username || undefined}
avatarURL={avatarURL}
onAvatarUploaded={setAvatarUrl}
className={"mt-2 mb-4"}
/>
<Field
label="Full Name"
value={name}
onChange={(e) => setName(e.target.value)}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
submitAttempted={submitAttempted}
spellcheck={false}
/>
</>
)}
<Field
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
submitAttempted={submitAttempted}
spellcheck={false}
/>
<Field
label="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
hidden={true}
submitAttempted={submitAttempted}
spellcheck={false}
/>
</div>
{mode === "login" ? (
<> <>
<UploadAvatar <Button variant={"outline"} type={"submit"}>
name={name} Log in
username={username || undefined} </Button>
avatarURL={avatarURL} <Button
onAvatarUploaded={setAvatarUrl} className="text-xs hover:underline p-0"
className={"mt-2 mb-4"} variant={"dummy"}
/> type="button"
<Field onClick={() => {
label="Full Name" setMode("register");
value={name} resetForm();
onChange={(e) => setName(e.target.value)} }}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)} >
submitAttempted={submitAttempted} I don't have an account
spellcheck={false} </Button>
/> </>
) : (
<>
<Button variant={"outline"} type={"submit"}>
Register
</Button>
<Button
className="text-xs hover:underline p-0"
variant={"dummy"}
type="button"
onClick={() => {
setMode("login");
resetForm();
}}
>
I already have an account
</Button>
</> </>
)} )}
<Field
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
submitAttempted={submitAttempted}
spellcheck={false}
/>
<Field
label="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
validate={(v) => (v.trim() === "" ? "Cannot be empty" : undefined)}
hidden={true}
submitAttempted={submitAttempted}
spellcheck={false}
/>
</div> </div>
</form>
{mode === "login" ? ( <div className="flex items-end justify-end w-full text-xs -mb-4">
<> {error !== "" ? (
<Button variant={"outline"} type={"submit"}> <Label className="text-destructive text-sm">{error}</Label>
Log in
</Button>
<Button
className="text-xs hover:underline p-0"
variant={"dummy"}
type="button"
onClick={() => {
setMode("register");
resetForm();
}}
>
I don't have an account
</Button>
</>
) : ( ) : (
<> <Label className="opacity-0 text-sm">a</Label>
<Button variant={"outline"} type={"submit"}>
Register
</Button>
<Button
className="text-xs hover:underline p-0"
variant={"dummy"}
type="button"
onClick={() => {
setMode("login");
resetForm();
}}
>
I already have an account
</Button>
</>
)} )}
</div> </div>
</form>
<div className="flex items-end justify-end w-full text-xs -mb-4">
{error !== "" ? (
<Label className="text-destructive text-sm">{error}</Label>
) : (
<Label className="opacity-0 text-sm">a</Label>
)}
</div> </div>
</div> </>
); );
} }