feat: quick login qrcode for mobile app

public/locales/en-US/application.json

@@ -479,9 +479,9 @@
     "language": "Language",
     "iOSApp": "iOS App",
     "connectByiOS": "Connect to <0>{{title}}</0> through iOS devices.",
-    "downloadOurApp": "Download our iOS App:",
-    "fillInEndpoint": "Enter \"{{url}}\" as the \"Endpoint\";",
-    "loginApp": "Sign in using your Email and password.",
+    "downloadOurApp": "Download our iOS APP:",
+    "fillInEndpoint": "Scan below QR Code with our App (DO NOT use other app to scan):",
+    "loginApp": "You can start using the iOS App now. If you encounter problems with the QR Code, you can also try to manually enter your username and password to log in.",
     "aboutCloudreve": "About Cloudreve",
     "githubRepo": "GitHub Repository",
     "homepage": "Homepage"

public/locales/zh-CN/application.json

@@ -479,8 +479,8 @@
     "iOSApp": "iOS 客户端",
     "connectByiOS": "通过 iOS 设备连接到 <0>{{title}}</0>",
     "downloadOurApp": "下载并安装我们的 iOS 应用：",
-    "fillInEndpoint": "在 “站点地址” 中填入 “{{url}}”；",
-    "loginApp": "输入您的用户名及密码完成登录。",
+    "fillInEndpoint": "使用我们的 iOS 应用扫描下方二维码（其他扫码应用无效）：",
+    "loginApp": "完成绑定，你可以开始使用 iOS 客户端了。如果扫码绑定遇到问题，你也可以尝试手动输入用户名和密码登录。",
     "aboutCloudreve": "关于 Cloudreve",
     "githubRepo": "GitHub 仓库",
     "homepage": "主页"

public/locales/zh-TW/application.json

@@ -478,10 +478,10 @@
     "iOSApp": "iOS 用戶端",
     "connectByiOS": "通過 iOS 設備連接到 <0>{{title}}</0>",
     "downloadOurApp": "下載並安裝我們的 iOS 應用：",
-    "fillInEndpoint": "在 “站點地址” 中填入 “{{url}}”；",
-    "loginApp": "輸入您的使用者名稱及密碼完成登錄。",
+    "fillInEndpoint": "使用我們的 iOS 應用掃描下方二維碼（其他掃碼應用無效）：",
+    "loginApp": "完成綁定，你可以開始使用 iOS 客戶端了。如果掃碼綁定遇到問題，你也可以嘗試手動輸入用戶名和密碼登錄。",
     "aboutCloudreve": "關於 Cloudreve",
     "githubRepo": "GitHub 倉庫",
-    "homepage": "首頁"
+    "homepage": "主頁"
   }
 }

src/component/Setting/AppPromotion.js

@@ -5,6 +5,7 @@ import { useTheme, fade } from "@material-ui/core/styles";
 import Box from "@material-ui/core/Box";
 import { useSelector } from "react-redux";
 import Link from "@material-ui/core/Link";
+import AppQRCode from "./AppQRCode";
 
 const PhoneSkeleton = () => {
     const theme = useTheme();
@@ -150,10 +151,11 @@ export default function AppPromotion() {
                             </li>
                             <li>
                                 <Typography variant="h6" component="p">
-                                    {t("fillInEndpoint", {
-                                        url: window.location.origin,
-                                    })}
+                                    {t("fillInEndpoint")}
                                 </Typography>
+                                <Box marginTop={1}>
+                                    <AppQRCode />
+                                </Box>
                             </li>
                             <li>
                                 <Typography variant="h6" component="p">

src/component/Setting/AppQRCode.js

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { CircularProgress, makeStyles } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@material-ui/core/styles";
+import Box from "@material-ui/core/Box";
+import { QRCodeSVG } from "qrcode.react";
+import { randomStr } from "../../utils";
+import classNames from "classnames";
+import API from "../../middleware/Api";
+import { useDispatch } from "react-redux";
+import { toggleSnackbar } from "../../redux/explorer";
+
+const useStyles = makeStyles((theme) => ({
+    blur: {
+        filter: "blur(8px)",
+    },
+    container: {
+        position: "relative",
+        width: 128,
+    },
+    progress: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        marginLeft: -12,
+        marginTop: -12,
+        zIndex: 1,
+    },
+    qrcode: {
+        transition: "all .3s ease-in",
+    },
+}));
+
+export default function AppQRCode() {
+    const [content, setContent] = useState(randomStr(32));
+    const [loading, setLoading] = useState(true);
+    const { t } = useTranslation("application", { keyPrefix: "setting" });
+    const theme = useTheme();
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) =>
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    );
+
+    const refresh = () => {
+        setLoading(true);
+        API.get("/user/session")
+            .then((response) => {
+                setContent(response.data);
+                setLoading(false);
+            })
+            .catch((error) => {
+                setLoading(false);
+                ToggleSnackbar("top", "right", error.message, "error");
+            });
+    };
+
+    useEffect(() => {
+        refresh();
+        const interval = window.setInterval(refresh, 1000 * 45);
+        return () => {
+            window.clearInterval(interval);
+        };
+    }, []);
+
+    return (
+        <Box className={classes.container}>
+            {loading && (
+                <CircularProgress size={24} className={classes.progress} />
+            )}
+            <QRCodeSVG
+                className={classNames(classes.qrcode, {
+                    [classes.blur]: loading,
+                })}
+                value={content}
+            />
+        </Box>
+    );
+}