feat(desktop): optimize login form

DIYgod · DIYgod · commit e7f88b778845 · 2025-05-07T22:50:23.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/auth/Form.tsx b/apps/desktop/layer/renderer/src/modules/auth/Form.tsx
@@ -18,7 +18,7 @@ import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import { z } from "zod"
 
-import { useCurrentModal, useModalStack } from "~/components/ui/modal/stacked/hooks"
+import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { loginHandler, signUp, twoFactor } from "~/lib/auth"
 import { handleSessionChanges } from "~/queries/auth"
 
@@ -41,7 +41,6 @@ export function LoginWithPassword({ runtime }: { runtime: LoginRuntime }) {
   })
 
   const { present } = useModalStack()
-  const { dismiss } = useCurrentModal()
 
   const recaptchaRef = useRef<ReCAPTCHA>(null)
 
@@ -133,20 +132,6 @@ export function LoginWithPassword({ runtime }: { runtime: LoginRuntime }) {
           >
             {t("login.continueWith", { provider: t("words.email") })}
           </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="lg"
-            onClick={() => {
-              dismiss()
-              present({
-                content: RegisterForm,
-                title: t("register.label", { app_name: APP_NAME }),
-              })
-            }}
-          >
-            {t("login.signUp")}
-          </Button>
         </div>
       </form>
     </Form>
@@ -164,7 +149,7 @@ const registerFormSchema = z
     path: ["confirmPassword"],
   })
 
-function RegisterForm() {
+export function RegisterForm() {
   const { t } = useTranslation("app")
 
   const form = useForm<z.infer<typeof registerFormSchema>>({
diff --git a/apps/desktop/layer/renderer/src/modules/auth/LoginModalContent.tsx b/apps/desktop/layer/renderer/src/modules/auth/LoginModalContent.tsx
@@ -4,34 +4,23 @@ import { Folo } from "@follow/components/icons/folo.js"
 import { Logo } from "@follow/components/icons/logo.js"
 import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { Divider } from "@follow/components/ui/divider/Divider.js"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipTrigger,
-} from "@follow/components/ui/tooltip/index.js"
 import type { LoginRuntime } from "@follow/shared/auth"
 import { stopPropagation } from "@follow/utils/dom"
-import { clsx } from "@follow/utils/utils"
 import { m } from "motion/react"
-import { useTranslation } from "react-i18next"
+import { useState } from "react"
+import { Trans, useTranslation } from "react-i18next"
 
 import { useCurrentModal } from "~/components/ui/modal/stacked/hooks"
 import { loginHandler } from "~/lib/auth"
 import { useAuthProviders } from "~/queries/users"
 
-import { LoginWithPassword } from "./Form"
+import { LoginWithPassword, RegisterForm } from "./Form"
 
 interface LoginModalContentProps {
   runtime: LoginRuntime
   canClose?: boolean
 }
 
-const overrideAuthProvidersClassName = {
-  github: "!text-dark dark:!text-white",
-  apple: "!text-[#1F2937] dark:!text-[#E5E7EB]",
-}
-
 export const LoginModalContent = (props: LoginModalContentProps) => {
   const modal = useCurrentModal()
 
@@ -42,59 +31,81 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
 
   const isMobile = useMobile()
 
-  const providers = Object.entries(authProviders || []).filter(([key]) => key !== "credential")
+  const providers = Object.entries(authProviders || [])
+
+  const [isRegister, setIsRegister] = useState(true)
+  const [isEmail, setIsEmail] = useState(false)
 
   const Inner = (
     <>
-      <div className="-mt-8 mb-4 flex items-center justify-center">
-        <Logo className="size-14" />
+      <div className="-mt-9 mb-4 flex items-center justify-center">
+        <Logo className="size-16" />
       </div>
-      <div className="mb-4 mt-6 flex items-center justify-center text-center">
-        <span className="text-2xl">{t("signin.sign_in_to")}</span>
-        <Folo className="ml-2 size-10" />
+      <div className="mb-6 mt-4 flex items-center justify-center text-center">
+        <span className="text-3xl">
+          {isRegister ? t("signin.sign_up_to") : t("signin.sign_in_to")}
+        </span>
+        <Folo className="ml-2 size-14" />
       </div>
 
-      <LoginWithPassword runtime={runtime} />
-      {providers.length > 0 && (
+      {/* {isRegister ? <RegisterForm /> : <LoginWithPassword runtime={runtime} />} */}
+      {/* {providers.length > 0 && (
         <div className="my-3 w-full space-y-2">
           <div className="flex items-center justify-center">
             <Divider className="flex-1" />
             <p className="text-text-tertiary px-4 text-center text-sm">{t("login.or")}</p>
             <Divider className="flex-1" />
           </div>
         </div>
-      )}
-      <div className="mb-3 flex items-center justify-center gap-4">
-        {providers.map(([key, provider]) => (
-          <Tooltip key={key} delayDuration={0}>
-            <TooltipTrigger asChild>
-              <MotionButtonBase
-                onClick={() => {
+      )} */}
+      {isEmail ? (
+        isRegister ? (
+          <RegisterForm />
+        ) : (
+          <LoginWithPassword runtime={runtime} />
+        )
+      ) : (
+        <div className="mb-3 flex flex-col items-center justify-center gap-4">
+          {providers.map(([key, provider]) => (
+            <MotionButtonBase
+              key={key}
+              onClick={() => {
+                if (key === "credential") {
+                  setIsEmail(true)
+                } else {
                   loginHandler(key, "app")
+                }
+              }}
+              className="center hover:bg-material-medium relative w-full gap-2 rounded-xl border p-2.5 pl-5 font-semibold duration-200"
+            >
+              <img
+                className="absolute left-9 h-5"
+                style={{
+                  color: provider.color,
                 }}
-              >
-                <div
-                  className={clsx(
-                    "center hover:bg-material-medium inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6",
-                    overrideAuthProvidersClassName[key],
-                  )}
-                  dangerouslySetInnerHTML={{
-                    __html: provider.icon,
-                  }}
-                  style={{
-                    color: provider.color,
-                  }}
-                />
-              </MotionButtonBase>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent>
-                {t("login.continueWith", { provider: provider.name })}
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
-        ))}
-      </div>
+                src={provider.icon64}
+              />
+              <span>{t("login.continueWith", { provider: provider.name })}</span>
+            </MotionButtonBase>
+          ))}
+        </div>
+      )}
+      <Divider className="mb-5 mt-6" />
+      {isEmail ? (
+        <div className="pb-2 text-center" onClick={() => setIsEmail(false)}>
+          Back
+        </div>
+      ) : (
+        <div className="pb-2 text-center" onClick={() => setIsRegister(!isRegister)}>
+          <Trans
+            t={t}
+            i18nKey={isRegister ? "login.have_account" : "login.no_account"}
+            components={{
+              strong: <span className="text-accent" />,
+            }}
+          />
+        </div>
+      )}
     </>
   )
   if (isMobile) {
diff --git a/apps/desktop/layer/renderer/src/queries/users.ts b/apps/desktop/layer/renderer/src/queries/users.ts
@@ -20,6 +20,7 @@ export interface AuthProvider {
   id: string
   color: string
   icon: string
+  icon64: string
 }
 export const useAuthProviders = () => {
   const isInMASReview = useIsInMASReview()
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -228,6 +228,8 @@
   "login.continueWith": "Continue with {{provider}}",
   "login.email": "Email",
   "login.forget_password.note": "Forgot your password?",
+  "login.have_account": "Already have an account? <strong>Sign in →</strong>",
+  "login.no_account": "Don't have an account? <strong>Sign up →</strong>",
   "login.or": "OR",
   "login.password": "Password",
   "login.signUp": "Sign up with email",
@@ -296,7 +298,6 @@
   "quick_add.title": "Quick Follow",
   "register.confirm_password": "Confirm Password",
   "register.email": "Email",
-  "register.label": "Sign up to {{app_name}}",
   "register.login": "Login",
   "register.note": "Already have an account? <LoginLink />",
   "register.password": "Password",
@@ -368,6 +369,7 @@
   "sidebar.select_sort_method": "Select a sort method",
   "signin.continue_with": "Continue with {{provider}}",
   "signin.sign_in_to": "Sign in to",
+  "signin.sign_up_to": "Sign up to",
   "sync_indicator.disabled": "Due to security reasons, sync is disabled.",
   "sync_indicator.offline": "Offline",
   "sync_indicator.synced": "Synced with server",
diff --git a/locales/app/ja.json b/locales/app/ja.json
@@ -261,7 +261,6 @@
   "quick_add.title": "クイックフォロー",
   "register.confirm_password": "パスワードを確認する",
   "register.email": "Email",
-  "register.label": "{{app_name}} アカウントを作成する",
   "register.login": "ログイン",
   "register.note": "既にアカウントをお持ちですか？ <LoginLink />",
   "register.password": "パスワード",
diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
@@ -223,14 +223,16 @@
   "feed_item.error_since": "源失效：",
   "feed_item.not_publicly_visible": "在个人页面上隐藏",
   "login.confirm_password.label": "确认密码",
-  "login.continueWith": "使用 {{provider}} 登入",
+  "login.continueWith": "使用 {{provider}} 继续",
   "login.email": "邮件地址",
   "login.forget_password.note": "忘记了密码？",
+  "login.have_account": "已有账户？<strong>登录 →</strong>",
+  "login.no_account": "没有账户？<strong>注册 →</strong>",
   "login.or": "或",
   "login.password": "密码",
   "login.signUp": "使用邮件地址注册",
   "login.submit": "提交",
-  "login.with_email.title": "使用邮件地址登入",
+  "login.with_email.title": "使用邮件地址登录",
   "mark_all_read_button.auto_confirm_info": "{{countdown}} 秒后自动确认。",
   "mark_all_read_button.confirm": "确认",
   "mark_all_read_button.confirm_mark_all": "将 <which /> 标记为已读？",
@@ -294,8 +296,7 @@
   "quick_add.title": "快速订阅",
   "register.confirm_password": "确认密码",
   "register.email": "邮件地址",
-  "register.label": "创建 {{app_name}} 账户",
-  "register.login": "登入",
+  "register.login": "登录",
   "register.note": "已有账户？<LoginLink />",
   "register.password": "密码",
   "register.submit": "创建账户",
@@ -364,8 +365,9 @@
   "sidebar.feed_column.context_menu.rename_category_success": "分类重命名成功",
   "sidebar.feed_column.context_menu.title": "移动至新分类",
   "sidebar.select_sort_method": "选择排序方法",
-  "signin.continue_with": "使用 {{provider}} 登入",
-  "signin.sign_in_to": "登入至",
+  "signin.continue_with": "使用 {{provider}} 登录",
+  "signin.sign_in_to": "登录",
+  "signin.sign_up_to": "注册",
   "sync_indicator.disabled": "出于安全原因，已禁用同步",
   "sync_indicator.offline": "离线",
   "sync_indicator.synced": "已同步至云端",
@@ -418,7 +420,7 @@
   "words.link": "链接",
   "words.lists": "列表",
   "words.load_archived_entries": "加载已归档条目",
-  "words.login": "登入",
+  "words.login": "登录",
   "words.mint": "Mint",
   "words.newTab": "新标签页",
   "words.power": "Power",
diff --git a/locales/app/zh-TW.json b/locales/app/zh-TW.json
@@ -208,7 +208,7 @@
   "feed_item.error_since": "RSS 摘要失效：",
   "feed_item.not_publicly_visible": "在您的個人頁面上隱藏",
   "login.confirm_password.label": "確認密碼",
-  "login.continueWith": "透過 {{provider}} 登入",
+  "login.continueWith": "透過 {{provider}} 繼續",
   "login.email": "電子信箱",
   "login.forget_password.note": "忘記密碼了嗎？",
   "login.or": "或",
@@ -274,7 +274,6 @@
   "quick_add.title": "快速跟隨",
   "register.confirm_password": "確認密碼",
   "register.email": "電子信箱",
-  "register.label": "創建 {{app_name}} 帳號",
   "register.login": "登入",
   "register.note": "已經有帳號了嗎？ <LoginLink />",
   "register.password": "密碼",

Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export interface AuthProvider {`
`20`	`20`	`id: string`
`21`	`21`	`color: string`
`22`	`22`	`icon: string`
	`23`	`+ icon64: string`
`23`	`24`	`}`
`24`	`25`	`export const useAuthProviders = () => {`
`25`	`26`	`const isInMASReview = useIsInMASReview()`