xiaolai · an-lee · May 13, 2024 · May 11, 2024 · May 11, 2024 · May 11, 2024
diff --git a/1000-hours/package.json b/1000-hours/package.json
@@ -8,7 +8,7 @@
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
     "mermaid": "^10.9.0",
-    "sass": "^1.77.0",
+    "sass": "^1.77.1",
     "vitepress": "^1.1.4",
     "vitepress-plugin-mermaid": "^2.0.16",
     "vue": "^3.4.27"

diff --git a/enjoy/package.json b/enjoy/package.json
@@ -52,9 +52,9 @@
     "@types/lodash": "^4.17.1",
     "@types/mark.js": "^8.11.12",
     "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@types/validator": "^13.11.9",
+    "@types/validator": "^13.11.10",
     "@types/wavesurfer.js": "^6.0.12",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
@@ -83,7 +83,7 @@
     "@andrkrn/ffprobe-static": "^5.2.0",
     "@electron-forge/publisher-s3": "^7.4.0",
     "@hookform/resolvers": "^3.3.4",
-    "@langchain/community": "^0.0.55",
+    "@langchain/community": "^0.0.56",
     "@langchain/google-genai": "^0.0.12",
     "@mozilla/readability": "^0.5.0",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -129,7 +129,7 @@
     "dayjs": "^1.11.11",
     "decamelize": "^6.0.0",
     "decamelize-keys": "^2.0.1",
-    "echogarden": "^1.3.3",
+    "echogarden": "^1.4.3",
     "electron-context-menu": "^4.0.0",
     "electron-log": "^5.1.4",
     "electron-settings": "^4.0.4",
@@ -139,16 +139,16 @@
     "fs-extra": "^11.2.0",
     "html-to-text": "^9.0.5",
     "https-proxy-agent": "^7.0.4",
-    "i18next": "^23.11.3",
-    "intl-tel-input": "^22.0.2",
+    "i18next": "^23.11.4",
+    "intl-tel-input": "^23.0.4",
     "js-md5": "^0.8.3",
-    "langchain": "^0.1.36",
+    "langchain": "^0.1.37",
     "lodash": "^4.17.21",
     "lucide-react": "^0.378.0",
     "mark.js": "^8.11.1",
     "microsoft-cognitiveservices-speech-sdk": "^1.36.0",
     "next-themes": "^0.3.0",
-    "openai": "^4.44.0",
+    "openai": "^4.45.0",
     "pitchfinder": "^2.3.2",
     "postcss": "^8.4.38",
     "proxy-agent": "^6.4.0",
@@ -159,18 +159,18 @@
     "react-hotkeys-hook": "^4.5.0",
     "react-i18next": "^14.1.1",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.1",
     "react-tooltip": "^5.26.4",
     "reflect-metadata": "^0.2.2",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.7",
     "sequelize": "^6.37.3",
     "sequelize-typescript": "^2.1.6",
     "sonner": "^1.4.41",
     "sqlite3": "^5.1.7",
     "tailwind-scrollbar-hide": "^1.1.7",
     "umzug": "^3.8.0",
     "update-electron-app": "^3.0.0",
-    "wavesurfer.js": "^7.7.13",
+    "wavesurfer.js": "^7.7.14",
     "zod": "^3.23.8",
     "zod-to-json-schema": "^3.23.0"
   }

diff --git a/enjoy/src/api/client.ts b/enjoy/src/api/client.ts
@@ -71,13 +71,29 @@ export class Client {
 
   auth(params: {
     provider: "mixin" | "github" | "bandu" | "email";
-    code: string;
+    code?: string;
+    deviceCode?: string;
     phoneNumber?: string;
     email?: string;
+    mixinId?: string;
   }): Promise<UserType> {
     return this.api.post("/api/sessions", decamelizeKeys(params));
   }
 
+  info(): Promise<any> {
+    return this.api.get("/api/info");
+  }
+
+  deviceCode(provider = "github"): Promise<{
+    deviceCode: string;
+    userCode: string;
+    verificationUri: string;
+    expiresIn: number;
+    interval: number;
+  }> {
+    return this.api.post("/api/sessions/device_code", { provider });
+  }
+
   me(): Promise<UserType> {
     return this.api.get("/api/me");
   }
@@ -93,7 +109,11 @@ export class Client {
     return this.api.put(`/api/users/${id}`, decamelizeKeys(params));
   }
 
-  loginCode(params: { phoneNumber?: string; email?: string }): Promise<void> {
+  loginCode(params: {
+    phoneNumber?: string;
+    email?: string;
+    mixinId?: string;
+  }): Promise<void> {
     return this.api.post("/api/sessions/login_code", decamelizeKeys(params));
   }
 
@@ -166,7 +186,15 @@ export class Client {
     page?: number;
     items?: number;
     userId?: string;
-    type?: "all" | "recording" | "medium" | "story" | "prompt" | "text" | "gpt" | "note";
+    type?:
+      | "all"
+      | "recording"
+      | "medium"
+      | "story"
+      | "prompt"
+      | "text"
+      | "gpt"
+      | "note";
     by?: "following" | "all";
   }): Promise<
     {

diff --git a/enjoy/src/i18n/en.json b/enjoy/src/i18n/en.json
@@ -196,6 +196,9 @@
   "verificationCode": "Verification code",
   "email": "Email",
   "phoneNumber": "Phone number",
+  "mixinId": "Mixin ID",
+  "inputMixinId": "Input your Mixin ID",
+  "dontHaveMixinAccount": "don't have Mixin account?",
   "youCanAlsoLoginWith": "You can also login with",
   "transcribe": "Transcribe",
   "stillTranscribing": "AI is still working on the transcription. Please wait for a while.",

diff --git a/enjoy/src/i18n/zh-CN.json b/enjoy/src/i18n/zh-CN.json
@@ -195,6 +195,9 @@
   "verificationCode": "验证码",
   "email": "邮箱",
   "phoneNumber": "手机号",
+  "mixinId": "Mixin 号",
+  "inputMixinId": "请输入您的 Mixin ID",
+  "dontHaveMixinAccount": "没有 Mixin 账号？",
   "youCanAlsoLoginWith": "您也可以使用以下方式登录",
   "delete": "删除",
   "transcribe": "语音转文本",

diff --git a/enjoy/src/renderer/components/misc/bandu-login-form.tsx b/enjoy/src/renderer/components/misc/bandu-login-form.tsx
@@ -0,0 +1,176 @@
+import {
+  Button,
+  toast,
+  Input,
+  Label,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+} from "@renderer/components/ui";
+import { useContext, useEffect, useRef, useState } from "react";
+import { AppSettingsProviderContext } from "@renderer/context";
+import { t } from "i18next";
+import intlTelInput from "intl-tel-input";
+import "intl-tel-input/build/css/intlTelInput.css";
+
+export const BanduLoginButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          data-tooltip-id="global-tooltip"
+          data-tooltip-content="学升"
+          className="w-10 h-10 rounded-full"
+        >
+          <img
+            src="assets/bandu-logo.svg"
+            className="w-full h-full"
+            alt="bandu-logo"
+          />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="bottom" className="h-screen">
+        <div className="w-full h-full flex">
+          <div className="m-auto">{open && <BanduLoginForm />}</div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export const BanduLoginForm = () => {
+  const ref = useRef<HTMLInputElement>(null);
+  const [iti, setIti] = useState<any>(null);
+  const [phoneNumber, setPhoneNumber] = useState<string>("");
+  const [code, setCode] = useState<string>("");
+  const [codeSent, setCodeSent] = useState<boolean>(false);
+  const [countdown, setCountdown] = useState<number>(0);
+  const { login, webApi } = useContext(AppSettingsProviderContext);
+
+  const validatePhone = () => {
+    if (
+      iti?.isValidNumber() &&
+      iti?.getNumberType() === (intlTelInput.utils.numberType as any)?.MOBILE
+    ) {
+      setPhoneNumber(iti.getNumber());
+    } else {
+      setPhoneNumber("");
+    }
+  };
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    intlTelInput(ref.current, {
+      initialCountry: "cn",
+      utilsScript:
+        "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.4/build/js/utils.js",
+    });
+    setIti(intlTelInput(ref.current));
+
+    return () => {
+      iti?.destroy();
+    };
+  }, [ref]);
+
+  useEffect(() => {
+    iti?.setCountry("cn");
+  }, [iti]);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    if (countdown > 0) {
+      timeout = setTimeout(() => {
+        setCountdown(countdown - 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [countdown]);
+
+  return (
+    <div className="w-80">
+      <div className="flex items-center justify-center mb-4">
+        <img src="assets/bandu-logo.svg" className="w-20 h-20" alt="bandu" />
+      </div>
+
+      <div className="grid gap-6">
+        <div className="grid gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="phone">{t("phoneNumber")}</Label>
+            <input
+              id="phone"
+              value={phoneNumber}
+              onInput={validatePhone}
+              onBlur={validatePhone}
+              className="border text-lg py-2 px-4 rounded w-80"
+              ref={ref}
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="verrificationCode">{t("verificationCode")}</Label>
+            <Input
+              id="verrificationCode"
+              className="border py-2 h-10 px-4 rounded"
+              type="text"
+              minLength={5}
+              maxLength={5}
+              placeholder={t("verificationCode")}
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <Button
+            variant="secondary"
+            size="lg"
+            className="w-full"
+            disabled={!phoneNumber || countdown > 0}
+            onClick={() => {
+              webApi
+                .loginCode({ phoneNumber })
+                .then(() => {
+                  toast.success(t("codeSent"));
+                  setCodeSent(true);
+                  setCountdown(120);
+                })
+                .catch((err) => {
+                  toast.error(err.message);
+                });
+            }}
+          >
+            {countdown > 0 && <span className="mr-2">{countdown}</span>}
+            <span>{codeSent ? t("resend") : t("sendCode")}</span>
+          </Button>
+          <Button
+            variant="default"
+            size="lg"
+            className="w-full"
+            disabled={!code || code.length < 5 || !phoneNumber}
+            onClick={() => {
+              webApi
+                .auth({ provider: "bandu", code, phoneNumber })
+                .then((user) => {
+                  if (user?.id && user?.accessToken) login(user);
+                })
+                .catch((err) => {
+                  toast.error(err.message);
+                });
+            }}
+          >
+            {t("login")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};