refactor: login with magic link

src/routes/sendMagicLink/index.tsx

@@ -1,30 +1,23 @@
-import { ChangeEvent, FormEvent, useEffect, useState } from "react";
+import { useEffect } from "react";
 import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
-import BASE_URL from "@/app/config";
 import { useSendLoginMagicLinkMutation } from "@/app/services/auth";
-import { useAppSelector } from "@/app/store";
-import Divider from "@/components/Divider";
-import Button from "@/components/styled/Button";
-import Input from "@/components/styled/Input";
-import SocialLoginButtons from "../login/SocialLoginButtons";
-import SignInLink from "../reg/SignInLink";
 import SentTip from "./SentTip";
 
 export default function SendMagicLinkPage() {
-  const { t } = useTranslation("auth");
-  const serverName = useAppSelector((store) => store.server.name);
-  const [sent, setSent] = useState(false);
+  const { email = "" } = useParams();
   const [sendMagicLink, { isSuccess, isLoading, error }] = useSendLoginMagicLinkMutation();
   const navigateTo = useNavigate();
-  const [email, setEmail] = useState("");
+  useEffect(() => {
+    if (email) {
+      sendMagicLink(email);
+    }
+  }, [email]);
 
   useEffect(() => {
     if (isSuccess) {
       toast.success("Send Email Successfully!");
-      setSent(true);
     }
   }, [isSuccess]);
 
@@ -52,64 +45,14 @@ export default function SendMagicLinkPage() {
     navigateTo("/login");
   };
 
-  const handleLogin = (evt: FormEvent<HTMLFormElement>) => {
-    evt.preventDefault();
-    sendMagicLink(email);
-  };
-
-  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
-    const { value } = evt.target;
-    setEmail(value);
-  };
-
-  const handleReset = () => {
-    setEmail("");
-    setSent(false);
-  };
   return (
-    <div className="flex-center h-screen dark:bg-gray-700">
-      <div className="py-8 px-10 shadow rounded-xl">
-        {sent ? (
-          <SentTip email={email} reset={handleReset} />
-        ) : (
-          <>
-            <div className="flex flex-col items-center">
-              <img
-                src={`${BASE_URL}/resource/organization/logo`}
-                alt="logo"
-                className="w-14 h-14 mb-7 rounded-full"
-              />
-              <h2 className="font-semibold text-2xl text-gray-800 dark:text-gray-200 mb-2">
-                {t("enter")} {serverName}{" "}
-              </h2>
-              <span className="text-center text-gray-500 mb-6">{t("placeholder_email")}</span>
-            </div>
-            <form onSubmit={handleLogin} className="flex flex-col gap-5 w-[360px]">
-              <Input
-                type="email"
-                className="large"
-                name="email"
-                autoFocus
-                value={email}
-                required
-                // pattern={`^\S+@\S+\.\S+$`}
-                placeholder={t("placeholder_email")}
-                onChange={handleInput}
-              />
-              <Button type="submit" disabled={isLoading || !email}>
-                {isLoading ? "Sending" : t("continue")}
-              </Button>
-            </form>
-            <Divider content="OR" />
-            <Button onClick={handlePwdPath} className="w-full">
-              {t("login.password")}
-            </Button>
-            <div className="flex flex-col gap-3 py-3 empty:hidden">
-              <SocialLoginButtons />
-            </div>
-            <SignInLink />
-          </>
-        )}
+    <div className="flex-center h-screen">
+      <div className="py-8 px-10 shadow-md rounded-xl bg-white dark:bg-gray-700">
+        {isSuccess ? (
+          <SentTip email={email} handleBack={handlePwdPath} />
+        ) : isLoading ? (
+          <div className="">Sending...</div>
+        ) : null}
       </div>
     </div>
   );