feat: email validation in all forms

src/common/component/styled/Input.tsx

@@ -93,6 +93,7 @@ interface Props
       | "onBlur"
       | "pattern"
       | "disabled"
+      | "minLength"
     >,
     HTMLInputElement
   > {

src/routes/login/index.tsx

@@ -138,6 +138,7 @@ export default function LoginPage() {
             className="large"
             name="email"
             value={email}
+            type="email"
             required
             placeholder={t("placeholder_email")}
             data-type="email"

src/routes/reg/Register.tsx

@@ -55,10 +55,6 @@ export default function Reg() {
   const handleReg = async (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     const { email, password, confirmPassword } = input;
-    if (password.length < 6) {
-      toast.error("Password can't be less than 6 digits!");
-      return;
-    }
     if (password !== confirmPassword) {
       toast.error("Not Same Password!");
       return;
@@ -123,6 +119,7 @@ export default function Reg() {
           name="email"
           value={email}
           required
+          type="email"
           placeholder={t("placeholder_email")}
           data-type="email"
           onChange={handleInput}
@@ -133,6 +130,7 @@ export default function Reg() {
           value={password}
           name="password"
           required
+          minLength={6}
           data-type="password"
           onChange={handleInput}
           placeholder={t("placeholder_pwd")}
@@ -141,6 +139,7 @@ export default function Reg() {
           required
           onBlur={handleCompare}
           type="password"
+          minLength={6}
           name={"confirmPassword"}
           value={confirmPassword}
           data-type="confirmPassword"

src/routes/setting/MyAccount.tsx

@@ -100,12 +100,12 @@ const StyledWrapper = styled.div`
     border-radius: 8px;
   }
 `;
-type EditFields = "name" | "email";
+type EditField = "name" | "email" | "";
 export default function MyAccount() {
   const { t } = useTranslation("member");
   const { t: ct } = useTranslation();
   const [passwordModal, setPasswordModal] = useState(false);
-  const [editModal, setEditModal] = useState<EditFields | null>(null);
+  const [editModal, setEditModal] = useState<EditField>("");
   const [removeConfirmVisible, setRemoveConfirmVisible] = useState(false);
   const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
   const EditModalInfo = {
@@ -132,12 +132,12 @@ export default function MyAccount() {
   }, [uploadSuccess]);
 
   const handleBasicEdit = (evt: MouseEvent<HTMLButtonElement>) => {
-    const { edit } = evt.currentTarget.dataset as { edit: EditFields };
+    const { edit } = evt.currentTarget.dataset as { edit: EditField };
     setEditModal(edit);
   };
 
   const closeBasicEditModal = () => {
-    setEditModal(null);
+    setEditModal("");
   };
 
   const togglePasswordModal = () => {
@@ -198,6 +198,7 @@ export default function MyAccount() {
       </StyledWrapper>
       {editModal && (
         <ProfileBasicEditModal
+          type={editModal == "email" ? "email" : "text"}
           valueKey={editModal}
           {...EditModalInfo[editModal]}
           value={eval(editModal)}

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