feat: magic link entry for APP

src/routes/reg/Register.tsx

@@ -152,7 +152,7 @@ export default function Reg() {
       {enableGithubLogin && (
         <GithubLoginButton type="register" client_id={githubAuthConfig?.client_id} />
       )}
-      <SignInLink />
+      <SignInLink token={magicToken} />
     </>
   );
 }

src/routes/reg/SignInLink.tsx

@@ -1,8 +1,13 @@
 import styled from "styled-components";
 
-const StyledSignInLink = styled.p`
+const StyledSignInLink = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 30px;
+  >.item{
     text-align: center;
-  margin: 24px 0 8px;
+    margin: 0;
     > span {
       font-weight: 400;
       font-size: 14px;
@@ -10,7 +15,6 @@ const StyledSignInLink = styled.p`
       color: #667085;
       margin-right: 4px;
     }
-
     > a {
       font-weight: 500;
       font-size: 14px;
@@ -18,16 +22,25 @@ const StyledSignInLink = styled.p`
       color: #22d3ee;
       cursor: pointer;
     }
+}
 `;
 
-export default function SignInLink() {
+export default function SignInLink({ token }: { token?: string }) {
+  const isMobile = "ontouchstart" in document.documentElement;
   const handleSignIn = () => {
     location.href = "/#/login";
   };
+  const showAppEntry = isMobile && !!token;
   return (
     <StyledSignInLink>
+      <li className="item">
         <span>Have an account?</span>
         <a onClick={handleSignIn}>Sign In</a>
+      </li>
+      {showAppEntry && <li className="item">
+        <span>Using a mobile device? Open in</span>
+        <a href={`https://voce.chat?magic_link=${encodeURIComponent(`${location.origin}?magic_token=${token}`)}`} target={"_blank"} rel="noreferrer">VoceChat App</a>
+      </li>}
     </StyledSignInLink>
   );
 }