Validations added temporarily

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>

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;