From dae12d74ee47f840d1c68b2dadc80e294f66a582 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Thu, 5 Mar 2026 11:52:21 +0800
Subject: [PATCH] Validations added temporarily

---
 frontend/src/app/agents/add/page.jsx          | 11 ++-
 .../buttons/primarybutton/PrimaryButton.jsx   |  2 +-
 .../app/components/fields/styles.module.css   |  4 +-
 .../src/app/components/fields/textfield.jsx   |  7 +-
 .../src/app/components/prompts/Prompts.jsx    |  1 -
 .../app/components/topHeader/TopHeader.jsx    |  4 +-
 frontend/src/app/organization/add/page.jsx    | 76 ++++++++++---------
 .../app/organization/add/styles.module.css    | 37 +--------
 frontend/src/app/projects/add/page.jsx        | 14 ++--
 .../src/app/projects/add/styles.module.css    | 40 +---------
 .../projects/view/add-from-scratch/page.jsx   | 62 +++++++++++----
 .../view/add-from-scratch/styles.module.css   | 27 +------
 .../AddVariableModal/AddVariableModal.jsx     |  2 +-
 13 files changed, 116 insertions(+), 171 deletions(-)

diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index 2e181be..219a580 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -28,7 +28,7 @@ const Page = () => {
           {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
             <TopToolTip />
-            <div className={createAgentStyle.inputMainContainer}>
+            <form className={createAgentStyle.inputMainContainer} id="form">
               {/* Header */}
               <div className={createAgentStyle.headerContainer}>
                 <div className={createAgentStyle.headerTxt}>
@@ -43,7 +43,7 @@ const Page = () => {
                   {/* <p className={createAgentStyle.required}>*</p> */}
                 </div>
                 {/* Input Field */}
-                <TextField placeHolder="Enter agent name" />
+                <TextField placeHolder="Enter agent name" required />
                 <Prompts show={false} />
               </div>
               {/* Kubernetes API input */}
@@ -92,10 +92,13 @@ const Page = () => {
                   {/* <p className={createAgentStyle.required}>*</p> */}
                 </div>
                 {/* Input Field */}
-                <TextField placeHolder="e.g., http://agent-01.example.com:8080" />
+                <TextField
+                  placeHolder="e.g., http://agent-01.example.com:8080"
+                  required
+                />
                 <Prompts show={false} />
               </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
index 4aa1e3e..3301c4d 100644
--- a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
+++ b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 import AddIcon from "../../icons/add";
 const PrimaryButton = (props) => {
   return (
-    <button className={styles.button} {...props}>
+    <button className={styles.button} {...props} type="submit">
       {props?.icon}
       {props.text}
     </button>
diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css
index d197282..141a0f0 100644
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -51,7 +51,9 @@
   border: 1px solid #616583;
   color: #85869b;
   cursor: not-allowed;
-
   pointer-events: none;
   user-select: none;
 }
+.input:invalid {
+  border: 1px solid #b43939;
+}
diff --git a/frontend/src/app/components/fields/textfield.jsx b/frontend/src/app/components/fields/textfield.jsx
index 7c01f7a..f1c168e 100644
--- a/frontend/src/app/components/fields/textfield.jsx
+++ b/frontend/src/app/components/fields/textfield.jsx
@@ -1,10 +1,11 @@
-import React from "react";
+"use client";
 import styles from "./styles.module.css";
-const TextField = ({ placeHolder, ...props }) => {
+const TextField = ({ placeHolder, hasError, ...props }) => {
   return (
     <input
-      className={styles.input}
+      className={`${styles.input} ${hasError ? styles.error : null}`}
       type="text"
+      pattern="[a-z]*"
       placeholder={placeHolder}
       {...props}
     />
diff --git a/frontend/src/app/components/prompts/Prompts.jsx b/frontend/src/app/components/prompts/Prompts.jsx
index f842a68..d332b60 100644
--- a/frontend/src/app/components/prompts/Prompts.jsx
+++ b/frontend/src/app/components/prompts/Prompts.jsx
@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import styles from "./styles.module.css";
 
 const Prompts = ({ show }) => {
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index 3e996b3..607cc43 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -89,7 +89,9 @@ const TopHeader = (props) => {
             <>
               <PrimaryButton
                 text="Save"
-                onClick={() => setTriggerAlert(!triggerAlert)}
+                form="form"
+                type="submit"
+                /*   onClick={() => setTriggerAlert(!triggerAlert)} */
                 icon={<CheckIcon width={20} height={20} />}
               />
 
diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx
index d00a549..c3bea80 100644
--- a/frontend/src/app/organization/add/page.jsx
+++ b/frontend/src/app/organization/add/page.jsx
@@ -1,13 +1,39 @@
-import React from "react";
+"use client";
+import React, { useRef, useState } from "react";
 import globalStyle from "../../globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import Image from "next/image";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
+import Alert from "@/app/components/alerts/Alert";
+import Prompts from "@/app/components/prompts/Prompts";
 const AddCredentials = () => {
+  const [triggerAlert, setTriggerAlert] = useState(false);
+  const inputRef = useRef();
+  const [error, setError] = useState(false);
+  const HandleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!inputRef.current.value.trim()) {
+      setError(true);
+      console.log("alsdjfakjhsks"); // triggers red border
+      return;
+    }
+
+    setError(false);
+    setTriggerAlert(true);
+  };
+
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create Organization"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
@@ -18,7 +44,11 @@ const AddCredentials = () => {
           />
           <div className={styles.contentContainer}>
             <TopToolTip />
-            <div className={styles.createOrganizationFormContainer}>
+            <form
+              className={styles.createOrganizationFormContainer}
+              id="form"
+              onSubmit={HandleSubmit}
+            >
               <div className={styles.organizationBadgeContainer}>
                 <div className={styles.organizationBadge}>
                   <div className={styles.organizationBadgeDetails}>
@@ -72,42 +102,16 @@ const AddCredentials = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <TextField placeHolder="Enter organization name" />
-                  <div className={styles.prompts}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 8.01088 16.7098 6.10322 15.3033 4.6967C13.8968 3.29018 11.9891 2.5 10 2.5C8.01088 2.5 6.10322 3.29018 4.6967 4.6967C3.29018 6.10322 2.5 8.01088 2.5 10Z"
-                        stroke="#CCA04F"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M10 6.66699V10.0003"
-                        stroke="#CCA04F"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M10 13.333H10.0083"
-                        stroke="#CCA04F"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                    <p>The name is already in used. You can try another.</p>
-                  </div>
+                  <TextField
+                    placeHolder="Enter organization name"
+                    required
+                    ref={inputRef}
+                    hasError={error}
+                  />
+                  <Prompts show={true} />
                 </div>
               </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/organization/add/styles.module.css b/frontend/src/app/organization/add/styles.module.css
index 7824d5a..aacd6c8 100644
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -154,42 +154,7 @@
   gap: 8px;
   align-self: stretch;
 }
-.inputField > input {
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  background-color: transparent;
-  color: white;
-  font-family: Inter;
-  font-size: 16px;
-  outline: none;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  caret-color: #575bc7;
-}
-.inputField > input:focus {
-  border-radius: 6px;
-  border: 1px solid #a8aac1;
-  background: rgba(75, 79, 109, 0.25);
-}
-.inputField > input:hover {
-  background: rgba(75, 79, 109, 0.25);
-}
-.inputField > input::placeholder {
-  color: #85869b;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
+
 .prompts {
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/projects/add/page.jsx b/frontend/src/app/projects/add/page.jsx
index 0d3e2e8..ecd45fa 100644
--- a/frontend/src/app/projects/add/page.jsx
+++ b/frontend/src/app/projects/add/page.jsx
@@ -6,6 +6,7 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
 import WarningIcon from "@/app/components/icons/warning";
+import Prompts from "@/app/components/prompts/Prompts";
 const AddProject = () => {
   return (
     <div className={globalStyle.section}>
@@ -20,7 +21,7 @@ const AddProject = () => {
           />
           <div className={styles.contentContainer}>
             <TopToolTip />
-            <div className={styles.createProjectFormContainer}>
+            <form className={styles.createProjectFormContainer} id="form">
               <div className={styles.inputGroup}>
                 <div className={styles.label}>
                   <p>
@@ -28,11 +29,8 @@ const AddProject = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <TextField placeHolder="Enter project name" />
-                  <div className={styles.prompts}>
-                    <WarningIcon />
-                    <p>The name is already in used. You can try another.</p>
-                  </div>
+                  <TextField placeHolder="Enter project name" required />
+                  <Prompts show={true} />
                 </div>
               </div>
               <div className={styles.inputGroup}>
@@ -42,7 +40,7 @@ const AddProject = () => {
                   </p>
                 </div>
                 <div className={styles.inputField}>
-                  <TextField placeHolder="Version" />
+                  <TextField placeHolder="Version" required />
                 </div>
               </div>
               <div className={styles.inputGroup}>
@@ -79,7 +77,7 @@ const AddProject = () => {
                   />
                 </div>
               </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/projects/add/styles.module.css b/frontend/src/app/projects/add/styles.module.css
index ae0fc03..7bbb7c2 100644
--- a/frontend/src/app/projects/add/styles.module.css
+++ b/frontend/src/app/projects/add/styles.module.css
@@ -52,45 +52,7 @@
   gap: 8px;
   align-self: stretch;
 }
-.inputField > input,
-.inputField > select {
-  display: flex;
-  height: 44px;
-  padding: 12px 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 6px;
-  border: 1px solid #616583;
-  background-color: transparent;
-  color: white;
-  font-family: Inter;
-  font-size: 16px;
-  outline: none;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  caret-color: #575bc7;
-}
-.inputField > input:focus {
-  border-radius: 6px;
-  border: 1px solid #959aff;
-  background: rgba(75, 79, 109, 0.25);
-}
-.inputField > input:hover {
-  background: rgba(75, 79, 109, 0.25);
-}
-.inputField > input::placeholder,
-.inputField > select {
-  color: #85869b;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
+
 .prompts {
   display: flex;
   align-items: center;
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index 2eff235..b0bb826 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -19,6 +19,13 @@ const AddServices = () => {
   const [disableScaling, setDisableScaling] = useState(true);
   const [disableReadiness, setDisableReadiness] = useState(true);
   const [disableLiveness, setDisableLiveness] = useState(true);
+  const [minPods, setMinPods] = useState("");
+  const [maxPods, setMaxPods] = useState("");
+  const [readinessPath, setReadinessPath] = useState("");
+  const [readinessPort, setReadinessPort] = useState("");
+  const [livenessPath, setLivenessPath] = useState("");
+  const [livenessPort, setLivenessPort] = useState("");
+
   return (
     <div className={globalStyle.section}>
       {triggerAddVariable && (
@@ -40,7 +47,7 @@ const AddServices = () => {
             requiredButtons={["title", "save"]}
           />
           <div className={styles.contentContainer}>
-            <div className={styles.fieldsContainerCreateNew}>
+            <form className={styles.fieldsContainerCreateNew} id="form">
               <div className={styles.projectDetails}>
                 <div className={styles.projectDetailsHeader}>
                   <p>Project Details</p>
@@ -59,11 +66,11 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>Name</p>
-                      <TextField placeHolder="Enter service name" />
+                      <TextField placeHolder="Enter service name" required />
                     </div>
                     <div>
                       <p>Version</p>
-                      <TextField placeHolder="Service version" />
+                      <TextField placeHolder="Service version" required />
                     </div>
                   </div>
                   <div>
@@ -71,13 +78,13 @@ const AddServices = () => {
                       <p>
                         Image <span>(Optional)</span>
                       </p>
-                      <TextField placeHolder="Enter image name" />
+                      <TextField placeHolder="Enter image name" required />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Port</p>
-                      <TextField placeHolder="Enter port" />
+                      <TextField placeHolder="Enter port" required />
                     </div>
                   </div>
                   <div>
@@ -114,21 +121,21 @@ const AddServices = () => {
                   <div>
                     <div>
                       <p>CPU Request (MB)</p>
-                      <TextField placeHolder="250" />
+                      <TextField placeHolder="250" required />
                     </div>
                     <div>
                       <p>CPU Limit (MB)</p>
-                      <TextField placeHolder="250" />
+                      <TextField placeHolder="250" required />
                     </div>
                   </div>
                   <div>
                     <div>
                       <p>Memory Request (MB)</p>
-                      <TextField placeHolder="250" />
+                      <TextField placeHolder="250" required />
                     </div>
                     <div>
                       <p>Memory Limit (MB)</p>
-                      <TextField placeHolder="500" />
+                      <TextField placeHolder="500" required />
                     </div>
                   </div>
                 </div>
@@ -141,7 +148,11 @@ const AddServices = () => {
                         <p>Auto Scaling</p>
                         <CustomCheckbox
                           id="scalingCheckBox"
-                          setChecked={() => setDisableScaling(!disableScaling)}
+                          setChecked={() => {
+                            setDisableScaling(!disableScaling);
+                            setMinPods("");
+                            setMaxPods("");
+                          }}
                         />
                       </div>
                     </div>
@@ -154,12 +165,18 @@ const AddServices = () => {
                             <TextField
                               placeHolder="1"
                               disabled={disableScaling}
+                              required={maxPods.trim() !== ""}
+                              onChange={(e) => setMinPods(e.target.value)}
+                              value={minPods}
                             />
                           </div>
                           <div>
                             <p>Maximum pods</p>
                             <TextField
                               placeHolder="1"
+                              value={maxPods}
+                              required={minPods.trim() !== ""}
+                              onChange={(e) => setMaxPods(e.target.value)}
                               disabled={disableScaling}
                             />
                           </div>
@@ -175,9 +192,11 @@ const AddServices = () => {
                         <p>Readiness</p>
                         <CustomCheckbox
                           id="readiNessCheckBox"
-                          setChecked={() =>
-                            setDisableReadiness(!disableReadiness)
-                          }
+                          setChecked={() => {
+                            setDisableReadiness(!disableReadiness);
+                            setReadinessPath("");
+                            setReadinessPort("");
+                          }}
                         />
                       </div>
                     </div>
@@ -190,6 +209,9 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness path"
                               disabled={disableReadiness}
+                              value={readinessPath}
+                              required={readinessPort.trim() !== ""}
+                              onChange={(e) => setReadinessPath(e.target.value)}
                             />
                           </div>
                           <div>
@@ -197,6 +219,9 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter Readiness port"
                               disabled={disableReadiness}
+                              value={readinessPort}
+                              required={readinessPath.trim() !== ""}
+                              onChange={(e) => setReadinessPort(e.target.value)}
                             />
                           </div>
                         </div>
@@ -214,6 +239,8 @@ const AddServices = () => {
                           setChecked={() => {
                             console.log("alsdjhfkjas");
                             setDisableLiveness(!disableLiveness);
+                            setLivenessPath("");
+                            setLivenessPort("");
                           }}
                         />
                       </div>
@@ -226,14 +253,19 @@ const AddServices = () => {
                             <TextField
                               placeHolder="Enter liveness path"
                               disabled={disableLiveness}
+                              value={livenessPath}
+                              required={livenessPort.trim() !== ""}
+                              onChange={(e) => setLivenessPath(e.target.value)}
                             />
                           </div>
                           <div>
                             <p>Liveness Port</p>
-
                             <TextField
                               placeHolder="Enter liveness port"
                               disabled={disableLiveness}
+                              value={livenessPort}
+                              required={livenessPath.trim() !== ""}
+                              onChange={(e) => setLivenessPort(e.target.value)}
                             />
                           </div>
                         </div>
@@ -242,7 +274,7 @@ const AddServices = () => {
                   </div>
                 </div>
               </div>
-            </div>
+            </form>
             <div className={variableStyles.variables}>
               <div className={variableStyles.variablesHeader}>
                 <div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
index d1e2f5d..0e062b5 100644
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -65,7 +65,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
   align-self: stretch;
 }
 .fieldsCreateNew > div:nth-child(1) {
@@ -98,30 +98,7 @@
 .resourceFields > div > div p > span {
   color: #85869b;
 }
-.fieldsCreateNew > div > div input,
-.fieldsCreateNew > div > div select,
-.resourceFields > div > div input,
-.resourceFields > div > div select {
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 4px;
-  border: 1px solid #4b4f6d;
-  background-color: transparent;
-  color: white;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.16px;
-}
-.fieldsCreateNew > div > div input::placeholder,
-.resourceFields > div > div input::placeholder {
-  color: #85869b;
-}
+
 .repositoryForm {
   display: flex;
   padding: 12px;
diff --git a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
index 3eead7e..4ca99c3 100644
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -7,7 +7,7 @@ import AddIcon from "@/app/components/icons/add";
 import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
 import SelectField from "@/app/components/select/SelectField";
 const AddVariableModal = (props) => {
-  const [isGeneric, setIsGeneric] = useState();
+  const [isGeneric, setIsGeneric] = useState(true);
   return (
     <div className={styles.container}>
       <div className={styles.modal}>