feat: valid email token

src/routes/sendMagicLink/index.js

@@ -8,18 +8,22 @@ import StyledWrapper from "./styled";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 import { useSendMagicLinkMutation } from "../../app/services/auth";
+import SentTip from "./SentTip";
 
 export default function SendMagicLinkPage() {
+  const [sent, setSent] = useState(false);
   const [
     sendMagicLink,
     { isSuccess, isLoading, error },
   ] = useSendMagicLinkMutation();
+
   // const navigateTo = useNavigate();
   // const dispatch = useDispatch();
   const [email, setEmail] = useState("");
   useEffect(() => {
     if (isSuccess) {
       toast.success("Send Email Successfully!");
+      setSent(true);
     }
   }, [isSuccess]);
 
@@ -54,32 +58,44 @@ export default function SendMagicLinkPage() {
     console.log(value);
     setEmail(value);
   };
+  const handleReset = () => {
+    setEmail("");
+    setSent(false);
+  };
   return (
     <StyledWrapper>
       <div className="form">
-        <div className="tips">
-          <img
-            src={`${BASE_URL}/resource/organization/logo`}
-            alt="logo"
-            className="logo"
-          />
-          <h2 className="title">Login to Rustchat</h2>
-          <span className="desc">Please enter your Email</span>
-        </div>
-        <form onSubmit={handleLogin}>
-          <Input
-            type="email"
-            className="large"
-            name="email"
-            value={email}
-            required
-            placeholder="Enter your email"
-            onChange={handleInput}
-          />
-          <Button type="submit" disabled={isLoading || !email}>
-            {isLoading ? "Sending" : `Continue with Email`}
-          </Button>
-        </form>
+        {sent ? (
+          <SentTip email={email} reset={handleReset} />
+        ) : (
+          <>
+            <div className="tips">
+              <img
+                src={`${BASE_URL}/resource/organization/logo`}
+                alt="logo"
+                className="logo"
+              />
+              <h2 className="title">Login to Rustchat</h2>
+              <span className="desc">Please enter your Email</span>
+            </div>
+            <form onSubmit={handleLogin}>
+              <Input
+                type="email"
+                className="large"
+                name="email"
+                autoFocus
+                value={email}
+                required
+                // pattern={`^\S+@\S+\.\S+$`}
+                placeholder="Enter your email"
+                onChange={handleInput}
+              />
+              <Button type="submit" disabled={isLoading || !email}>
+                {isLoading ? "Sending" : `Continue with Email`}
+              </Button>
+            </form>
+          </>
+        )}
       </div>
     </StyledWrapper>
   );