feat: redesign login modal

Signed-off-by: Innei <[email protected]>
CanglongCl · Dec 6, 2024 · 77dd6ce · 77dd6ce
1 parent 05e4563
commit 77dd6ce
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 174 deletions.
diff --git a/apps/renderer/src/modules/app-layout/feed-column/index.mobile.tsx b/apps/renderer/src/modules/app-layout/feed-column/index.mobile.tsx
@@ -1,9 +1,8 @@
 import { RootPortal } from "@follow/components/ui/portal/index.js"
+import { PresentSheet } from "@follow/components/ui/sheet/Sheet.js"
 import { Outlet } from "react-router"
 
 import { useLoginModalShow, useWhoami } from "~/atoms/user"
-import { PlainModal } from "~/components/ui/modal/stacked/custom-modal"
-import { DeclarativeModal } from "~/components/ui/modal/stacked/declarative-modal"
 import { useDailyTask } from "~/hooks/biz/useDailyTask"
 import { LoginModalContent } from "~/modules/auth/LoginModalContent"
 
@@ -20,17 +19,13 @@ export const MobileRootLayout = () => {
 
       {isAuthFail && !user && (
         <RootPortal>
-          <DeclarativeModal
-            id="login"
-            CustomModalComponent={PlainModal}
+          <PresentSheet
             open
-            overlay
+            contentClassName="overflow-visible pb-safe"
             title="Login"
-            canClose={false}
-            clickOutsideToDismiss={false}
-          >
-            <LoginModalContent canClose={false} runtime={"browser"} />
-          </DeclarativeModal>
+            hideHeader
+            content={<LoginModalContent canClose={false} runtime={"browser"} />}
+          />
         </RootPortal>
       )}
     </>

diff --git a/apps/renderer/src/modules/auth/LoginModalContent.tsx b/apps/renderer/src/modules/auth/LoginModalContent.tsx
@@ -1,23 +1,41 @@
-import { FollowIcon } from "@follow/components/icons/follow.jsx"
+import { useMobile } from "@follow/components/hooks/useMobile.js"
+import { Logo } from "@follow/components/icons/logo.js"
+import { AutoResizeHeight } from "@follow/components/ui/auto-resize-height/index.js"
 import { MotionButtonBase } from "@follow/components/ui/button/index.js"
 import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import { authProvidersConfig } from "@follow/constants"
 import type { LoginRuntime } from "@follow/shared/auth"
 import { loginHandler } from "@follow/shared/auth"
-import { stopPropagation } from "@follow/utils/dom"
 import clsx from "clsx"
 import { AnimatePresence, m } from "framer-motion"
-import { useEffect, useRef, useState } from "react"
+import type { FC } from "react"
+import { Fragment, useEffect, useMemo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 
-import { modalMontionConfig } from "~/components/ui/modal/stacked/constants"
 import { useCurrentModal } from "~/components/ui/modal/stacked/hooks"
+import type { AuthProvider } from "~/queries/users"
 import { useAuthProviders } from "~/queries/users"
 
 interface LoginModalContentProps {
   runtime?: LoginRuntime
   canClose?: boolean
 }
+
+const defaultProviders = {
+  google: {
+    id: "google",
+    name: "Google",
+    color: "#3b82f6",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="currentColor" d="M12 5.5a6.5 6.5 0 1 0 6.326 8H13a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 1.5 1.5a9.5 9.5 0 1 1-2.801-6.736a1.5 1.5 0 1 1-2.116 2.127A6.475 6.475 0 0 0 12 5.5Z"/></g></svg>',
+  },
+  github: {
+    id: "github",
+    name: "GitHub",
+    color: "#000000",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="currentColor" d="M7.024 2.31a9.08 9.08 0 0 1 2.125 1.046A11.432 11.432 0 0 1 12 3c.993 0 1.951.124 2.849.355a9.08 9.08 0 0 1 2.124-1.045c.697-.237 1.69-.621 2.28.032c.4.444.5 1.188.571 1.756c.08.634.099 1.46-.111 2.28C20.516 7.415 21 8.652 21 10c0 2.042-1.106 3.815-2.743 5.043a9.456 9.456 0 0 1-2.59 1.356c.214.49.333 1.032.333 1.601v3a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-.991c-.955.117-1.756.013-2.437-.276c-.712-.302-1.208-.77-1.581-1.218c-.354-.424-.74-1.38-1.298-1.566a1 1 0 0 1 .632-1.898c.666.222 1.1.702 1.397 1.088c.48.62.87 1.43 1.63 1.753c.313.133.772.22 1.49.122L8 17.98a3.986 3.986 0 0 1 .333-1.581a9.455 9.455 0 0 1-2.59-1.356C4.106 13.815 3 12.043 3 10c0-1.346.483-2.582 1.284-3.618c-.21-.82-.192-1.648-.112-2.283l.005-.038c.073-.582.158-1.267.566-1.719c.59-.653 1.584-.268 2.28-.031Z"/></g></svg>',
+  },
+}
+
 export const LoginModalContent = (props: LoginModalContentProps) => {
   const modal = useCurrentModal()
 
@@ -48,45 +66,78 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
   }, [])
 
   const disabled = !!loadingLockSet
+
+  const filteredDefaultProviders = useMemo(() => {
+    if (!authProviders) return Object.values(defaultProviders)
+    return Object.entries(defaultProviders)
+      .filter(([key]) => authProviders[key])
+      .map(([_, provider]) => provider)
+  }, [authProviders])
+
+  const extraProviders = useMemo(() => {
+    if (!authProviders) return []
+    return Object.entries(authProviders)
+      .filter(([key]) => !defaultProviders[key])
+      .map(([_, provider]) => provider)
+  }, [authProviders])
+
+  const isMobile = useMobile()
+
+  const Inner = (
+    <>
+      <div className="-mt-8 mb-4 flex items-center justify-center md:-mt-8">
+        <Logo className="size-12" />
+      </div>
+      <div className="-mt-0 text-center">
+        <span className="text-xl">
+          {t("signin.sign_in_to")} <b>{APP_NAME}</b>
+        </span>
+      </div>
+
+      <div className="mt-6 flex flex-col gap-4">
+        {filteredDefaultProviders.map((provider) => (
+          <MotionButtonBase
+            key={provider.id}
+            className={clsx(
+              "center h-[48px] rounded-[8px] font-sans text-base font-medium text-white lg:w-[320px]",
+              disabled && "pointer-events-none opacity-50",
+              "overflow-hidden",
+              authProvidersConfig[provider.id]?.buttonClassName,
+            )}
+            disabled={disabled}
+            onClick={() => {
+              loginHandler(provider.id, runtime)
+              setLoadingLockSet(provider.id)
+              window.analytics?.capture("login", {
+                type: provider.id,
+              })
+            }}
+          >
+            <LoginButtonContent isLoading={loadingLockSet === provider.id}>
+              <i className={clsx("mr-2 text-xl", authProvidersConfig[provider.id].iconClassName)} />{" "}
+              {t("signin.continue_with", { provider: provider.name })}
+            </LoginButtonContent>
+          </MotionButtonBase>
+        ))}
+
+        <AuthProvidersRender providers={extraProviders} />
+      </div>
+    </>
+  )
+  if (isMobile) {
+    return Inner
+  }
+
   return (
     <div className="center flex h-full" onClick={canClose ? modal.dismiss : undefined}>
       <m.div
-        className="shadow-modal rounded-lg border border-border bg-theme-background p-4 px-8 pb-8"
-        onClick={stopPropagation}
-        {...modalMontionConfig}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 10, transition: { type: "tween" } }}
+        transition={{ type: "spring" }}
       >
-        <div className="mb-8 mt-4 text-center align-middle font-sans text-2xl font-bold leading-relaxed">
-          <span className="text-xl">{t("signin.sign_in_to")}</span>
-          <span className="center flex translate-y-px gap-2 font-theme text-accent">
-            <FollowIcon className="size-4" />
-            {APP_NAME}
-          </span>
-        </div>
-        <div className="flex flex-col gap-4">
-          {Object.entries(authProviders || []).map(([key, provider]) => (
-            <MotionButtonBase
-              key={key}
-              className={clsx(
-                "center h-[48px] w-[320px] rounded-[8px] font-sans text-base font-medium text-white",
-                disabled && "pointer-events-none opacity-50",
-                "overflow-hidden",
-                authProvidersConfig[key]?.buttonClassName,
-              )}
-              disabled={disabled}
-              onClick={() => {
-                loginHandler(key, runtime)
-                setLoadingLockSet(key)
-                window.analytics?.capture("login", {
-                  type: key,
-                })
-              }}
-            >
-              <LoginButtonContent isLoading={loadingLockSet === key}>
-                <i className={clsx("mr-2 text-xl", authProvidersConfig[key].iconClassName)} />{" "}
-                {t("signin.continue_with", { provider: provider.name })}
-              </LoginButtonContent>
-            </MotionButtonBase>
-          ))}
+        <div className="rounded-xl border bg-background p-3 px-8 shadow-2xl shadow-stone-300 dark:border-neutral-700 dark:shadow-stone-800">
+          {Inner}
         </div>
       </m.div>
     </div>
@@ -133,3 +184,50 @@ const LoginButtonContent = (props: { children: React.ReactNode; isLoading: boole
     </AnimatePresence>
   )
 }
+
+export const AuthProvidersRender: FC<{
+  providers: AuthProvider[]
+  runtime?: LoginRuntime
+}> = ({ providers, runtime }) => {
+  const [authProcessingLockSet, setAuthProcessingLockSet] = useState(() => new Set<string>())
+  return (
+    <AutoResizeHeight spring>
+      {providers.length > 0 && (
+        <ul className="relative flex items-center justify-center gap-3 pt-4 before:absolute before:inset-x-28 before:top-0 before:h-px before:bg-stone-200 before:content-[''] before:dark:bg-neutral-700">
+          {providers.map((provider) => (
+            <li key={provider.id}>
+              <MotionButtonBase
+                disabled={authProcessingLockSet.has(provider.id)}
+                onClick={() => {
+                  if (authProcessingLockSet.has(provider.id)) return
+                  loginHandler(provider.id, runtime)
+
+                  setAuthProcessingLockSet((prev) => {
+                    prev.add(provider.id)
+                    return new Set(prev)
+                  })
+                }}
+              >
+                <div className="flex size-10 items-center justify-center rounded-full border bg-background dark:border-neutral-700">
+                  {!authProcessingLockSet.has(provider.id) ? (
+                    <Fragment>
+                      <span
+                        className="center inline-flex size-4"
+                        style={{ color: provider.color }}
+                        dangerouslySetInnerHTML={{ __html: provider.icon }}
+                      />
+                    </Fragment>
+                  ) : (
+                    <div className="center flex">
+                      <i className="i-mgc-loading-3-cute-re animate-spin opacity-50" />
+                    </div>
+                  )}
+                </div>
+              </MotionButtonBase>
+            </li>
+          ))}
+        </ul>
+      )}
+    </AutoResizeHeight>
+  )
+}
diff --git a/apps/renderer/src/queries/users.ts b/apps/renderer/src/queries/users.ts
@@ -14,19 +14,15 @@ export const users = {
     }),
 }
 
+export interface AuthProvider {
+  name: string
+  id: string
+  color: string
+  icon: string
+}
 export const useAuthProviders = () => {
   return useQuery({
     queryKey: ["providers"],
-    queryFn: async () => (await getProviders()).data,
-    placeholderData: {
-      google: {
-        id: "google",
-        name: "Google",
-      },
-      github: {
-        id: "github",
-        name: "GitHub",
-      },
-    },
+    queryFn: async () => (await getProviders()).data as Record<string, AuthProvider>,
   })
 }
diff --git a/packages/components/src/ui/sheet/Sheet.tsx b/packages/components/src/ui/sheet/Sheet.tsx
@@ -13,6 +13,7 @@ export interface PresentSheetProps {
   open?: boolean
   onOpenChange?: (value: boolean) => void
   title?: ReactNode
+  hideHeader?: boolean
   zIndex?: number
   dismissible?: boolean
   defaultOpen?: boolean
@@ -35,6 +36,7 @@ export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetP
       children,
       zIndex = MODAL_STACK_Z_INDEX,
       title,
+      hideHeader,
       dismissible = true,
       defaultOpen,
       triggerAsChild,
@@ -123,7 +125,12 @@ export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetP
             )}
 
             {title ? (
-              <Drawer.Title className="-mt-4 mb-4 flex justify-center px-4 text-lg font-medium">
+              <Drawer.Title
+                className={cn(
+                  "-mt-4 mb-4 flex justify-center px-4 text-lg font-medium",
+                  hideHeader && "sr-only",
+                )}
+              >
                 {title}
               </Drawer.Title>
             ) : (