From 89677d9cc9b015dc2ee2e13423ea03ea88472d29 Mon Sep 17 00:00:00 2001
From: Delta6626 <hassan911ee@gmail.com>
Date: Sat, 2 May 2026 02:05:00 +0400
Subject: [PATCH 1/3] Fix broken validation

---
 .../project/components/delete-project-dialog.tsx    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/project/components/delete-project-dialog.tsx b/apps/web/src/project/components/delete-project-dialog.tsx
index 0086384e8..6059be8b4 100644
--- a/apps/web/src/project/components/delete-project-dialog.tsx
+++ b/apps/web/src/project/components/delete-project-dialog.tsx
@@ -10,6 +10,9 @@ import {
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
+import { useState } from "react";
+
+const REQUIRED_CONFIRMATION_TEXT = "DELETE";
 
 export function DeleteProjectDialog({
 	isOpen,
@@ -25,6 +28,8 @@ export function DeleteProjectDialog({
 	const count = projectNames.length;
 	const isSingle = count === 1;
 	const singleName = isSingle ? projectNames[0] : null;
+	
+	const [confirmationInput, setConfirmationInput] = useState<string>("");
 
 	return (
 		<Dialog open={isOpen} onOpenChange={onOpenChange}>
@@ -60,11 +65,13 @@ export function DeleteProjectDialog({
 					</Alert>
 					<div className="flex flex-col gap-3">
 						<Label className="text-xs font-semibold text-slate-500">
-							Type "DELETE" to confirm
+							{`Type "${REQUIRED_CONFIRMATION_TEXT}" to confirm`}
 						</Label>
 						<Input
+							onChange={(e) => {setConfirmationInput(e.target.value)}}
+							value={confirmationInput}
 							type="text"
-							placeholder="DELETE"
+							placeholder={REQUIRED_CONFIRMATION_TEXT}
 							size="lg"
 							variant="destructive"
 						/>
@@ -74,7 +81,7 @@ export function DeleteProjectDialog({
 					<Button variant="outline" onClick={() => onOpenChange(false)}>
 						Cancel
 					</Button>
-					<Button variant="destructive" onClick={onConfirm}>
+					<Button variant="destructive" onClick={onConfirm} disabled={confirmationInput != REQUIRED_CONFIRMATION_TEXT}>
 						Delete project
 					</Button>
 				</DialogFooter>

From 7c48a21fac55a74b185144d58e14a2f84e24a9fd Mon Sep 17 00:00:00 2001
From: Delta6626 <hassan911ee@gmail.com>
Date: Sat, 2 May 2026 13:07:58 +0400
Subject: [PATCH 2/3] use strict inequality operator

---
 apps/web/src/project/components/delete-project-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/project/components/delete-project-dialog.tsx b/apps/web/src/project/components/delete-project-dialog.tsx
index 6059be8b4..cf218a4a5 100644
--- a/apps/web/src/project/components/delete-project-dialog.tsx
+++ b/apps/web/src/project/components/delete-project-dialog.tsx
@@ -81,7 +81,7 @@ export function DeleteProjectDialog({
 					<Button variant="outline" onClick={() => onOpenChange(false)}>
 						Cancel
 					</Button>
-					<Button variant="destructive" onClick={onConfirm} disabled={confirmationInput != REQUIRED_CONFIRMATION_TEXT}>
+					<Button variant="destructive" onClick={onConfirm} disabled={confirmationInput !== REQUIRED_CONFIRMATION_TEXT}>
 						Delete project
 					</Button>
 				</DialogFooter>

From ac9216d0d1da6a346129f31e6f5eeacd3b625df2 Mon Sep 17 00:00:00 2001
From: Delta6626 <hassan911ee@gmail.com>
Date: Sat, 2 May 2026 13:11:17 +0400
Subject: [PATCH 3/3] assign 'id' to input and 'htmlFor' attribute to label

---
 apps/web/src/project/components/delete-project-dialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/project/components/delete-project-dialog.tsx b/apps/web/src/project/components/delete-project-dialog.tsx
index cf218a4a5..363d49632 100644
--- a/apps/web/src/project/components/delete-project-dialog.tsx
+++ b/apps/web/src/project/components/delete-project-dialog.tsx
@@ -64,10 +64,11 @@ export function DeleteProjectDialog({
 						</AlertDescription>
 					</Alert>
 					<div className="flex flex-col gap-3">
-						<Label className="text-xs font-semibold text-slate-500">
+						<Label htmlFor="confirmation-input" className="text-xs font-semibold text-slate-500">
 							{`Type "${REQUIRED_CONFIRMATION_TEXT}" to confirm`}
 						</Label>
 						<Input
+							id={"confirmation-input"}
 							onChange={(e) => {setConfirmationInput(e.target.value)}}
 							value={confirmationInput}
 							type="text"