danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor(login): extract reset password dialog to its own component

Browse source
This commit is contained in:
Nicolas Meienberger 2025-12-26 17:13:26 +01:00
parent 3a54f11b6d
commit 3ecf006977
2 changed files with 41 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/client/modules/auth/components/reset-password-dialog.tsx Normal file
View file

@ -0,0 +1,40 @@
import { toast } from "sonner";
import { Button } from "~/client/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "~/client/components/ui/dialog";
import { copyToClipboard } from "~/utils/clipboard";
const RESET_PASSWORD_COMMAND = "docker exec -it zerobyte bun run cli reset-password";
type ResetPasswordDialogProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
};
export const ResetPasswordDialog = ({ open, onOpenChange }: ResetPasswordDialogProps) => {
const handleCopy = async () => {
await copyToClipboard(RESET_PASSWORD_COMMAND);
toast.success("Command copied to clipboard");
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>Reset your password</DialogTitle>
<DialogDescription>
To reset your password, run the following command on the server where Zerobyte is installed.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="rounded-md bg-muted p-4 font-mono text-sm break-all">{RESET_PASSWORD_COMMAND}</div>
<p className="text-sm text-muted-foreground">
This command will start an interactive session where you can enter a new password for your account.
</p>
<Button onClick={handleCopy} variant="outline" className="w-full">
Copy Command
</Button>
</div>
</DialogContent>
</Dialog>
);
};

34
app/client/modules/auth/routes/login.tsx
View file

@ -7,13 +7,12 @@ import { useNavigate } from "react-router";
import { toast } from "sonner"; import { toast } from "sonner";
import { AuthLayout } from "~/client/components/auth-layout"; import { AuthLayout } from "~/client/components/auth-layout";
import { Button } from "~/client/components/ui/button"; import { Button } from "~/client/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "~/client/components/ui/dialog";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form"; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/client/components/ui/form";
import { Input } from "~/client/components/ui/input"; import { Input } from "~/client/components/ui/input";
import { authMiddleware } from "~/middleware/auth"; import { authMiddleware } from "~/middleware/auth";
import type { Route } from "./+types/login"; import type { Route } from "./+types/login";
import { loginMutation } from "~/client/api-client/@tanstack/react-query.gen"; import { loginMutation } from "~/client/api-client/@tanstack/react-query.gen";
import { copyToClipboard } from "~/utils/clipboard"; import { ResetPasswordDialog } from "../components/reset-password-dialog";
export const clientMiddleware = [authMiddleware]; export const clientMiddleware = [authMiddleware];
@ -119,34 +118,3 @@ export default function LoginPage() {
</AuthLayout> </AuthLayout>
); );
} }
const RESET_PASSWORD_COMMAND = "docker exec -it zerobyte bun run cli reset-password";
function ResetPasswordDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
const handleCopy = async () => {
await copyToClipboard(RESET_PASSWORD_COMMAND);
toast.success("Command copied to clipboard");
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>Reset your password</DialogTitle>
<DialogDescription>
To reset your password, run the following command on the server where Zerobyte is installed.
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="rounded-md bg-muted p-4 font-mono text-sm break-all">{RESET_PASSWORD_COMMAND}</div>
<p className="text-sm text-muted-foreground">
This command will start an interactive session where you can enter a new password for your account.
</p>
<Button onClick={handleCopy} variant="outline" className="w-full">
Copy Command
</Button>
</div>
</DialogContent>
</Dialog>
);
}