feat: guest login qr code

public/locales/en/auth.json

@@ -31,7 +31,7 @@
   "check_email_desc": " We’ve sent you a magic link to {{email}}. Click on the link to continue.",
   "use_different": "Use a different email",
   "welcome": "Welcome to {{name}} server",
-  "guest_login_tip": "Please sign in to send a message",
+  "guest_login_tip": "Please scan QR code or sign in to send a message",
   "sign_in": "Sign In",
   "sign_up": "Sign Up",
   "signing_up": "Signing Up"

public/locales/zh/auth.json

@@ -31,7 +31,7 @@
   "placeholder_pwd": "输入密码",
   "placeholder_confirm_pwd": "确认密码",
   "welcome": "欢迎来到 {{name}} 👏🏻",
-  "guest_login_tip": "请登录后发消息",
+  "guest_login_tip": "请扫码或登录后发消息",
   "sign_in": "登录",
   "sign_up": "注册",
   "signing_up": "注册中"

src/common/component/QRCode.tsx

@@ -3,15 +3,16 @@ import { QRCodeCanvas } from 'qrcode.react';
 import { useAppSelector } from '../../app/store';
 
 type Props = {
-    link: string
+    link: string,
+    size?: number
 }
 
-const QRCode = ({ link }: Props) => {
+const QRCode = ({ link, size = 512 }: Props) => {
     const logo = useAppSelector(store => store.server.logo);
     return (
         <QRCodeCanvas value={link}
-            className="rounded border border-solid border-gray-200 dark:border-gray-100 p-1 !w-full !h-full"
-            size={512}
+            className="rounded border border-solid border-gray-200 dark:border-gray-500 p-1 !w-full !h-full"
+            size={size}
             bgColor={"#fff"}
             fgColor={"#22ccee"}
             level={"L"}
@@ -20,8 +21,8 @@ const QRCode = ({ link }: Props) => {
                 src: logo,
                 x: undefined,
                 y: undefined,
-                height: 80,
-                width: 80,
+                height: size / 6,
+                width: size / 6,
                 excavate: true,
             }} />
     );

src/routes/chat/GuestBlankPlaceholder.tsx

@@ -4,6 +4,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { resetAuthData } from "../../app/slices/auth.data";
 import { useAppSelector } from "../../app/store";
+import QRCode from "../../common/component/QRCode";
 import Button from "../../common/component/styled/Button";
 import useLogout from "../../common/hook/useLogout";
 // type Props = {};
@@ -22,8 +23,11 @@ const GuestBlankPlaceholder = () => {
   return (
     <section className="flex flex-col items-center bg-transparent">
       <h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold text-center">{t("welcome", { name: serverName })}</h2>
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-2">
         <span className="text-gray-400 dark:text-gray-200 my-3 text-sm">{t("guest_login_tip")}</span>
+        <div className="w-44 h-44 self-center mb-4">
+          <QRCode size={1200} link={`https://voce.chat/login?s=${encodeURIComponent("https://privoce.voce.chat")}`} />
+        </div>
         <Button onClick={handleSignIn} className="small">{t("sign_in")}</Button>
       </div>
     </section>