feat: valid email token

src/common/component/styled/Button.js

@@ -11,6 +11,9 @@ const StyledButton = styled.button`
   line-height: 24px;
   color: #fff;
   background-color: #22ccee;
+  &.flex {
+    width: 100%;
+  }
   &:hover,
   &:active {
     background-color: #06aed4;

src/routes/reg/RegWithUsername.js

@@ -8,15 +8,28 @@ import { setAuthData } from "../../app/slices/auth.data";
 
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
-import { useLoginMutation } from "../../app/services/auth";
+import {
+  useLoginMutation,
+  useCheckInviteTokenValidMutation,
+} from "../../app/services/auth";
 import toast from "react-hot-toast";
 
 export default function RegWithUsername() {
   const { token } = useParams();
+  const [
+    checkTokenInvalid,
+    { data: isTokenValid, isLoading: checkingToken },
+  ] = useCheckInviteTokenValidMutation();
   const [login, { isLoading, error, isSuccess, data }] = useLoginMutation();
   // const navigateTo = useNavigate();
   const dispatch = useDispatch();
   const [username, setUsername] = useState("");
+  useEffect(() => {
+    if (token) {
+      checkTokenInvalid(token);
+    }
+  }, [token]);
+
   useEffect(() => {
     console.log("errr", error);
     switch (error?.status) {
@@ -53,6 +66,13 @@ export default function RegWithUsername() {
     setUsername(value);
   };
   if (!token) return "no token";
+  if (checkingToken) return "checking token valid...";
+  if (!isTokenValid)
+    return (
+      <div className="tips">
+        <h2 className="title error">Invalided Token!</h2>
+      </div>
+    );
   return (
     <>
       <div className="tips">

src/routes/reg/styled.js

@@ -28,6 +28,9 @@ const StyledWrapper = styled.div`
         line-height: 32px;
         color: #101828;
         margin-bottom: 8px;
+        &.error {
+          color: red;
+        }
       }
       .desc {
         text-align: center;

src/routes/sendMagicLink/SentTip.js

@@ -0,0 +1,15 @@
+// import React from "react";
+import Button from "../../common/component/styled/Button";
+export default function SentTip({ email, reset }) {
+  return (
+    <div className="tips">
+      <h2 className="title">Check your email</h2>
+      <span className="desc">
+        We’ve sent you a magic link to {email}. Click on the link to continue.
+      </span>
+      <Button onClick={reset} className="main flex">
+        Use a different email
+      </Button>
+    </div>
+  );
+}

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

src/routes/sendMagicLink/styled.js

@@ -5,7 +5,8 @@ const StyledWrapper = styled.div`
   align-items: center;
   height: 100vh;
   .form {
-    padding: 36px 40px 32px 40px;
+    max-width: 440px;
+    padding: 32px 40px 32px 40px;
     /* border: 1px solid #eee; */
     box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
       0px 2px 4px -2px rgba(16, 24, 40, 0.06);
@@ -14,7 +15,6 @@ const StyledWrapper = styled.div`
       display: flex;
       flex-direction: column;
       align-items: center;
-      padding-bottom: 24px;
       .logo {
         width: 56px;
         height: 56px;
@@ -28,12 +28,14 @@ const StyledWrapper = styled.div`
         color: #101828;
         margin-bottom: 8px;
       }
-    }
-    .desc {
-      font-weight: normal;
-      font-size: 16px;
-      line-height: 24px;
-      color: #667085;
+      .desc {
+        text-align: center;
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 24px;
+        color: #667085;
+        margin-bottom: 24px;
+      }
     }
     form {
       display: flex;