From 3ecf00697772c57090dcecb384b51c10922a7da5 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Fri, 26 Dec 2025 17:13:26 +0100
Subject: [PATCH] refactor(login): extract reset password dialog to its own
 component

---
 .../auth/components/reset-password-dialog.tsx | 40 +++++++++++++++++++
 app/client/modules/auth/routes/login.tsx      | 34 +---------------
 2 files changed, 41 insertions(+), 33 deletions(-)
 create mode 100644 app/client/modules/auth/components/reset-password-dialog.tsx

diff --git a/app/client/modules/auth/components/reset-password-dialog.tsx b/app/client/modules/auth/components/reset-password-dialog.tsx
new file mode 100644
index 00000000..d110b3b9
--- /dev/null
+++ b/app/client/modules/auth/components/reset-password-dialog.tsx
@@ -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>
+	);
+};
diff --git a/app/client/modules/auth/routes/login.tsx b/app/client/modules/auth/routes/login.tsx
index 0299ecc6..b62e0cca 100644
--- a/app/client/modules/auth/routes/login.tsx
+++ b/app/client/modules/auth/routes/login.tsx
@@ -7,13 +7,12 @@ import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { AuthLayout } from "~/client/components/auth-layout";
 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 { Input } from "~/client/components/ui/input";
 import { authMiddleware } from "~/middleware/auth";
 import type { Route } from "./+types/login";
 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];
 
@@ -119,34 +118,3 @@ export default function LoginPage() {
 		</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>
-	);
-}