From 35bf858977fc36e9b5cbde18fdaa3afcaef641e1 Mon Sep 17 00:00:00 2001
From: tigattack <10629864+tigattack@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:18:20 +0100
Subject: [PATCH] fix(frontend): use `useId()` for input IDs

---
 .../src/components/FirstTimeAdminSetup.jsx    | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/FirstTimeAdminSetup.jsx b/frontend/src/components/FirstTimeAdminSetup.jsx
index 006d413..c057e55 100644
--- a/frontend/src/components/FirstTimeAdminSetup.jsx
+++ b/frontend/src/components/FirstTimeAdminSetup.jsx
@@ -4,6 +4,12 @@ import { useAuth } from "../contexts/AuthContext";
 
 const FirstTimeAdminSetup = () => {
 	const { login } = useAuth();
+	const firstNameId = useId();
+	const lastNameId = useId();
+	const usernameId = useId();
+	const emailId = useId();
+	const passwordId = useId();
+	const confirmPasswordId = useId();
 	const [formData, setFormData] = useState({
 		username: "",
 		email: "",
@@ -163,14 +169,14 @@ const FirstTimeAdminSetup = () => {
 						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 							<div>
 								<label
-									htmlFor="firstName"
+									htmlFor={firstNameId}
 									className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 								>
 									First Name
 								</label>
 								<input
 									type="text"
-									id="firstName"
+									id={firstNameId}
 									name="firstName"
 									value={formData.firstName}
 									onChange={handleInputChange}
@@ -182,14 +188,14 @@ const FirstTimeAdminSetup = () => {
 							</div>
 							<div>
 								<label
-									htmlFor="lastName"
+									htmlFor={lastNameId}
 									className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 								>
 									Last Name
 								</label>
 								<input
 									type="text"
-									id="lastName"
+									id={lastNameId}
 									name="lastName"
 									value={formData.lastName}
 									onChange={handleInputChange}
@@ -203,14 +209,14 @@ const FirstTimeAdminSetup = () => {
 
 						<div>
 							<label
-								htmlFor="username"
+								htmlFor={usernameId}
 								className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 							>
 								Username
 							</label>
 							<input
 								type="text"
-								id="username"
+								id={usernameId}
 								name="username"
 								value={formData.username}
 								onChange={handleInputChange}
@@ -223,14 +229,14 @@ const FirstTimeAdminSetup = () => {
 
 						<div>
 							<label
-								htmlFor="email"
+								htmlFor={emailId}
 								className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 							>
 								Email Address
 							</label>
 							<input
 								type="email"
-								id="email"
+								id={emailId}
 								name="email"
 								value={formData.email}
 								onChange={handleInputChange}
@@ -243,14 +249,14 @@ const FirstTimeAdminSetup = () => {
 
 						<div>
 							<label
-								htmlFor="password"
+								htmlFor={passwordId}
 								className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 							>
 								Password
 							</label>
 							<input
 								type="password"
-								id="password"
+								id={passwordId}
 								name="password"
 								value={formData.password}
 								onChange={handleInputChange}
@@ -263,14 +269,14 @@ const FirstTimeAdminSetup = () => {
 
 						<div>
 							<label
-								htmlFor="confirmPassword"
+								htmlFor={confirmPasswordId}
 								className="block text-sm font-medium text-secondary-700 dark:text-secondary-300 mb-2"
 							>
 								Confirm Password
 							</label>
 							<input
 								type="password"
-								id="confirmPassword"
+								id={confirmPasswordId}
 								name="confirmPassword"
 								value={formData.confirmPassword}
 								onChange={handleInputChange}