From f2e8f16af8ac1ede6bacdfba1d4e4f18b2655544 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Wed, 7 May 2025 13:55:48 -0400
Subject: [PATCH] update pagespeed input field jsx

---
 client/src/Pages/Settings/index.jsx | 46 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/client/src/Pages/Settings/index.jsx b/client/src/Pages/Settings/index.jsx
index 834d7d4b6..b2f90f554 100644
--- a/client/src/Pages/Settings/index.jsx
+++ b/client/src/Pages/Settings/index.jsx
@@ -321,22 +321,38 @@ const Settings = () => {
 							</Typography>
 						</Box>
 						<Box>
-							<TextInput
-								id="pagespeedApiKey"
-								label="PageSpeed API Key"
-								value={form.pagespeedApiKey}
-								type={apiKeyFieldType}
-								onChange={handleChange}
-								optionalLabel="(Optional)"
-								error={!!errors.pagespeedApiKey}
-								helperText={errors.pagespeedApiKey}
-								endAdornment={
-									<PasswordEndAdornment
-										fieldType={apiKeyFieldType}
-										setFieldType={setApiKeyFieldType}
+							<Stack direction="row" alignItems="center" gap={theme.spacing(4)}>
+								<Box flex={1}>
+									<TextInput
+										id="pagespeedApiKey"
+										label="PageSpeed API Key"
+										value={form.pagespeedApiKey}
+										type={apiKeyFieldType}
+										onChange={handleChange}
+										disabled={isApiKeySet}
+										optionalLabel="(Optional)"
+										error={!!errors.pagespeedApiKey}
+										helperText={
+											isApiKeySet
+												? "API key is set. Click Reset to change it."
+												: errors.pagespeedApiKey
+										}
+										endAdornment={
+											!isApiKeySet && (
+												<PasswordEndAdornment
+													fieldType={apiKeyFieldType}
+													setFieldType={setApiKeyFieldType}
+												/>
+											)
+										}
 									/>
-								}
-							/>
+								</Box>
+								{isApiKeySet && (
+									<Button onClick={handleResetApiKey} variant="outlined">
+										Reset
+									</Button>
+								)}
+							</Stack>
 						</Box>
 				</ConfigBox>
 				{isAdmin && (