Fixed password required not showing

src/frontend/src/components/inputComponent/index.tsx

@@ -1,3 +1,4 @@
+import * as Form from "@radix-ui/react-form";
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils/utils";
@@ -7,6 +8,8 @@ export default function InputComponent({
   value,
   onChange,
   disabled,
+  required = false,
+  isForm = false,
   password,
   editNode = false,
   placeholder = "Type something...",
@@ -23,21 +26,47 @@ export default function InputComponent({
 
   return (
     <div className="relative w-full">
-      <Input
-        value={value}
-        disabled={disabled}
-        className={classNames(
-          password && !pwdVisible && value !== "" ? " text-clip password " : "",
-          editNode ? " input-edit-node " : "",
-          password && editNode ? "pr-8" : "",
-          password && !editNode ? "pr-10" : "",
-          className
-        )}
-        placeholder={password && editNode ? "Key" : placeholder}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-      />
+      {isForm ? (
+        <Form.Control asChild>
+          <Input
+            value={value}
+            disabled={disabled}
+            required={required}
+            className={classNames(
+              password && !pwdVisible && value !== ""
+                ? " text-clip password "
+                : "",
+              editNode ? " input-edit-node " : "",
+              password && editNode ? "pr-8" : "",
+              password && !editNode ? "pr-10" : "",
+              className
+            )}
+            placeholder={password && editNode ? "Key" : placeholder}
+            onChange={(e) => {
+              onChange(e.target.value);
+            }}
+          />
+        </Form.Control>
+      ) : (
+        <Input
+          value={value}
+          disabled={disabled}
+          required={required}
+          className={classNames(
+            password && !pwdVisible && value !== ""
+              ? " text-clip password "
+              : "",
+            editNode ? " input-edit-node " : "",
+            password && editNode ? "pr-8" : "",
+            password && !editNode ? "pr-10" : "",
+            className
+          )}
+          placeholder={password && editNode ? "Key" : placeholder}
+          onChange={(e) => {
+            onChange(e.target.value);
+          }}
+        />
+      )}
       {password && (
         <button
           className={classNames(

src/frontend/src/pages/signUpPage/index.tsx

@@ -81,18 +81,17 @@ export default function SignUp(): JSX.Element {
               <Form.Label className="data-[invalid]:label-invalid">
                 Password <span className="font-medium text-destructive">*</span>
               </Form.Label>
-
-              <Form.Control asChild>
-                <InputComponent
-                  onChange={(value) => {
-                    handleInput({ target: { name: "password", value } });
-                  }}
-                  value={password}
-                  password={true}
-                  placeholder="Password"
-                  className="w-full"
-                />
-              </Form.Control>
+              <InputComponent
+                onChange={(value) => {
+                  handleInput({ target: { name: "password", value } });
+                }}
+                value={password}
+                isForm
+                password={true}
+                required
+                placeholder="Password"
+                className="w-full"
+              />
 
               <Form.Message className="field-invalid" match="valueMissing">
                 Please enter a password

src/frontend/src/types/components/index.ts

@@ -7,6 +7,8 @@ export type InputComponentType = {
   disabled?: boolean;
   onChange: (value: string) => void;
   password: boolean;
+  required?: boolean;
+  isForm?: boolean;
   editNode?: boolean;
   onChangePass?: (value: boolean | boolean) => void;
   showPass?: boolean;