From 0f015cadc7f10fafb336d90c9d5d65b21d039f50 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 11 Aug 2023 15:25:24 -0300
Subject: [PATCH] Fixed password required not showing

---
 .../src/components/inputComponent/index.tsx   | 59 ++++++++++++++-----
 src/frontend/src/pages/signUpPage/index.tsx   | 23 ++++----
 src/frontend/src/types/components/index.ts    |  2 +
 3 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 7adb029c3..5e3c5543c 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/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(
diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx
index 0fe5accc8..5050d77e1 100644
--- a/src/frontend/src/pages/signUpPage/index.tsx
+++ b/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
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index aa3de1bca..7c7a7732f 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/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;