Validations added temporarily

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>

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>

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;
+}

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}
     />

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 }) => {

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} />}
               />
 

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" />
+                  <TextField
-                  <div className={styles.prompts}>
+                    placeHolder="Enter organization name"
-                    <svg
+                    required
-                      xmlns="http://www.w3.org/2000/svg"
+                    ref={inputRef}
-                      width="20"
+                    hasError={error}
-                      height="20"
+                  />
-                      viewBox="0 0 20 20"
+                  <Prompts show={true} />
-                      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>
                 </div>
               </div>
-            </div>
+            </form>
           </div>
         </div>
       </div>

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;

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" />
+                  <TextField placeHolder="Enter project name" required />
-                  <div className={styles.prompts}>
+                  <Prompts show={true} />
-                    <WarningIcon />
-                    <p>The name is already in used. You can try another.</p>
-                  </div>
                 </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>

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;

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={() =>
+                          setChecked={() => {
-                            setDisableReadiness(!disableReadiness)
+                            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>

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;

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}>