added api key settings validation

src/_variables.scss

@@ -2,4 +2,7 @@
 	--mind-brand-color: #e455df;
 	--mind-brand-darken-color: #bb56df;
 	--mind-brand-color-2: #4376ec;
+
+	--mind-error-color: #e74f4f;
+	--mind-error-light-color: #faf4f4;
 }

src/admin/page-settings/index.js

@@ -3,6 +3,11 @@
  */
 import './style.scss';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -15,11 +20,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import isValidOpenAIApiKey from '../../utils/is-valid-openai-api-key';
 import { ReactComponent as LoadingIcon } from '../../icons/loading.svg';
 
 export default function PageSettings() {
 	const [pendingSettings, setPendingSettings] = useState({});
 	const [settingsChanged, setSettingsChanged] = useState(false);
+	const [isInvalidAPIKey, setIsInvalidAPIKey] = useState(false);
 
 	const { updateSettings } = useDispatch('mind/settings');
 
@@ -64,7 +71,13 @@ export default function PageSettings() {
 						</a>
 					</div>
 				</div>
-				<div className="mind-admin-settings-card-input">
+				<div
+					className={clsx(
+						'mind-admin-settings-card-input',
+						isInvalidAPIKey &&
+							'mind-admin-settings-card-input-error'
+					)}
+				>
 					<input
 						id="mind-settings-openai-api-key"
 						type="text"
@@ -78,6 +91,11 @@ export default function PageSettings() {
 							});
 						}}
 					/>
+					{isInvalidAPIKey && (
+						<div className="mind-admin-setting-error">
+							{__('Please enter a valid API key', 'mind')}
+						</div>
+					)}
 				</div>
 			</div>
 			{error && <div className="mind-admin-settings-error">{error}</div>}
@@ -87,7 +105,14 @@ export default function PageSettings() {
 					onClick={(e) => {
 						e.preventDefault();
 
-						updateSettings(pendingSettings);
+						if (
+							isValidOpenAIApiKey(pendingSettings.openai_api_key)
+						) {
+							setIsInvalidAPIKey(false);
+							updateSettings(pendingSettings);
+						} else {
+							setIsInvalidAPIKey(true);
+						}
 					}}
 				>
 					{__('Save Changes', 'mind')}

src/admin/page-settings/style.scss

@@ -39,15 +39,23 @@
 			}
 		}
 	}
+	.mind-admin-settings-card-input-error input {
+		border-color: var(--mind-error-color);
+	}
 }
 
 .mind-admin-settings-error {
 	padding: 20px;
 	margin-top: 20px;
 	margin-bottom: -20px;
-	background-color: #faf4f4;
+	background-color: var(--mind-error-light-color);
-	color: #e74f4f;
+	color: var(--mind-error-color);
-	border-left: 3px solid #e74f4f;
+	border-left: 3px solid var(--mind-error-color);
+}
+.mind-admin-setting-error {
+	font-size: 12px;
+	margin-top: 2px;
+	color: var(--mind-error-color);
 }
 
 .mind-admin-settings-actions {

src/utils/is-valid-openai-api-key/index.js

@@ -0,0 +1,4 @@
+export default function isValidOpenAIApiKey(apiKey) {
+	const regex = /^sk-[a-zA-Z0-9]{32,}/;
+	return regex.test(apiKey);
+}