may retry when auto login failed (#808)

enjoy/src/i18n/en.json

@@ -216,6 +216,7 @@
   "select": "Select",
   "libraryPath": "Library Path",
   "login": "Login",
+  "reLogin": "Re-login",
   "loginBeforeYouStart": "Login before you start",
   "loginSuccess": "Login Success",
   "whereYourResourcesAreStored": "Where your resources are stored",

enjoy/src/i18n/zh-CN.json

@@ -216,6 +216,7 @@
   "select": "选择",
   "libraryPath": "资源库保存路径",
   "login": "登录",
+  "reLogin": "重新登录",
   "loginBeforeYouStart": "登录后开始使用",
   "loginSuccess": "登录成功",
   "whereYourResourcesAreStored": "选择资源库保存路径",

enjoy/src/renderer/components/misc/login-form.tsx

@@ -4,8 +4,13 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Button,
+  toast,
 } from "@renderer/components/ui";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { AppSettingsProviderContext } from "@renderer/context";
 import { t } from "i18next";
 import {
@@ -16,9 +21,40 @@ import {
   MixinLoginButton,
 } from "@renderer/components";
 import { EmailLoginForm } from "./email-login-form";
+import { Client } from "@/api";
 
 export const LoginForm = () => {
-  const { user } = useContext(AppSettingsProviderContext);
+  const { user, EnjoyApp, login, apiUrl } = useContext(
+    AppSettingsProviderContext
+  );
+  const [rememberedUser, setRememberedUser] = useState(null);
+
+  const loginWithRememberedUser = async () => {
+    if (!rememberedUser) return;
+    const client = new Client({
+      baseUrl: apiUrl,
+      accessToken: rememberedUser.accessToken,
+    });
+
+    client
+      .me()
+      .then((user) => {
+        if (user?.id) {
+          login(Object.assign({}, rememberedUser, user));
+        }
+      })
+      .catch((error) => {
+        toast.error(error.message);
+      });
+  };
+
+  useEffect(() => {
+    if (user) return;
+
+    EnjoyApp.settings.getUser().then((user) => {
+      setRememberedUser(user);
+    });
+  }, [user]);
 
   if (user) {
     return (
@@ -30,6 +66,52 @@ export const LoginForm = () => {
     );
   }
 
+  if (rememberedUser) {
+    return (
+      <div className="px-4 py-2 border rounded-lg w-full max-w-sm">
+        <div className="flex items-start justify-between py-4">
+          <div className="">
+            <div className="flex items-center space-x-2">
+              <Avatar>
+                <AvatarImage
+                  crossOrigin="anonymous"
+                  src={rememberedUser.avatarUrl}
+                />
+                <AvatarFallback className="text-xl">
+                  {rememberedUser.name[0].toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="">
+                <div className="text-sm font-semibold">
+                  {rememberedUser.name}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {rememberedUser.id}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => setRememberedUser(null)}
+            >
+              {t("reLogin")}
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={loginWithRememberedUser}
+            >
+              {t("login")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <Card className="w-full max-w-sm">
       <CardHeader>

enjoy/src/renderer/context/app-settings-provider.tsx

@@ -128,8 +128,6 @@ export const AppSettingsProvider = ({
     client.me().then((user) => {
       if (user?.id) {
         login(Object.assign({}, currentUser, user));
-      } else {
-        logout();
       }
     });
   };