feat: email validation in all forms

src/routes/setting/ProfileBasicEditModal.tsx

@@ -1,5 +1,4 @@
-import { ChangeEvent, FC, useEffect, useState } from "react";
-import styled from "styled-components";
+import { ChangeEvent, FC, useEffect, useState, useRef } from "react";
 import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
 import { useUpdateInfoMutation } from "../../app/services/user";
@@ -8,25 +7,11 @@ import Button from "../../common/component/styled/Button";
 import Modal from "../../common/component/Modal";
 import { useTranslation } from "react-i18next";
 
-const StyledEdit = styled(StyledModal)`
-  .input {
-    margin: 48px 0;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    label {
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      color: #6b7280;
-    }
-  }
-`;
 
 interface Props {
   label?: string;
   valueKey?: "name" | "email";
+  type?: string;
   value?: string;
   title?: string;
   intro?: string;
@@ -37,10 +22,12 @@ const ProfileBasicEditModal: FC<Props> = ({
   label = "Username",
   valueKey = "name",
   value = "",
+  type = "text",
   title = "Change your username",
   intro = "Enter a new username and your existing password.",
   closeModal
 }) => {
+  const formRef = useRef(null);
   const { t } = useTranslation();
   const [input, setInput] = useState(value);
   const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
@@ -48,6 +35,13 @@ const ProfileBasicEditModal: FC<Props> = ({
     setInput(evt.target.value);
   };
   const handleUpdate = () => {
+    if (!formRef || !formRef.current) return;
+    const formEle = formRef.current as HTMLFormElement;
+    if (!formEle.checkValidity()) {
+      formEle.reportValidity();
+      return;
+
+    }
     update({ [valueKey]: input });
   };
   useEffect(() => {
@@ -59,7 +53,7 @@ const ProfileBasicEditModal: FC<Props> = ({
   }, [isSuccess]);
   return (
     <Modal id="modal-modal">
-      <StyledEdit
+      <StyledModal
         title={title}
         description={intro}
         buttons={
@@ -71,11 +65,11 @@ const ProfileBasicEditModal: FC<Props> = ({
           </>
         }
       >
-        <div className="input">
-          <label htmlFor={valueKey}>{label}</label>
-          <Input name={valueKey} value={input} onChange={handleChange}></Input>
-        </div>
-      </StyledEdit>
+        <form ref={formRef} className="flex flex-col gap-2 w-full" action="/">
+          <label htmlFor={valueKey} className="text-sm text-[#6b7280]">{label}</label>
+          <Input name={valueKey} value={input} onChange={handleChange} type={type} required></Input>
+        </form>
+      </StyledModal>
     </Modal>
   );
 };