feat: token expired modal

src/routes/reg/ExpiredTip.js

@@ -0,0 +1,35 @@
+// import React from "react";
+import styled from "styled-components";
+const Styled = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .title {
+    font-weight: 600;
+    font-size: 30px;
+    line-height: 38px;
+    color: #101828;
+    margin-bottom: 12px;
+  }
+  .desc {
+    text-align: center;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #667085;
+    &:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+`;
+export default function ExpiredTip() {
+  return (
+    <Styled>
+      <div className="title">Magic link expired</div>
+      <p className="desc">
+        Go back to your original Rustchat tab and request a new magic link.
+      </p>
+      <p className="desc">You can close this window now.</p>
+    </Styled>
+  );
+}

src/routes/reg/RegWithUsername.js

@@ -13,6 +13,7 @@ import {
   useCheckInviteTokenValidMutation,
 } from "../../app/services/auth";
 import toast from "react-hot-toast";
+import ExpiredTip from "./ExpiredTip";
 
 export default function RegWithUsername() {
   const { token } = useParams();
@@ -66,13 +67,8 @@ 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>
-    );
+  if (checkingToken) return "checking Magic Link...";
+  if (!isTokenValid) return <ExpiredTip />;
   return (
     <>
       <div className="tips">