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,33 +1,46 @@
 import styled from "styled-components";
 
-const StyledSignInLink = styled.p`
+const StyledSignInLink = styled.ul`
-  text-align: center;
+  display: flex;
-  margin: 24px 0 8px;
+  flex-direction: column;
-  > span {
+  gap: 8px;
-    font-weight: 400;
+  margin-top: 30px;
-    font-size: 14px;
+  >.item{
-    line-height: 20px;
+    text-align: center;
-    color: #667085;
+    margin: 0;
-    margin-right: 4px;
+    > span {
-  }
+      font-weight: 400;
-
+      font-size: 14px;
-  > a {
+      line-height: 20px;
-    font-weight: 500;
+      color: #667085;
-    font-size: 14px;
+      margin-right: 4px;
-    line-height: 20px;
+    }
-    color: #22d3ee;
+    > a {
-    cursor: pointer;
+      font-weight: 500;
-  }
+      font-size: 14px;
+      line-height: 20px;
+      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>
-      <span>Have an account?</span>
+      <li className="item">
-      <a onClick={handleSignIn}>Sign In</a>
+        <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>
   );
 }