@pmate/account-sdk 0.5.4 → 0.6.0

package/src/atoms/index.ts

@@ -0,0 +1,16 @@
+export * from "./uploadAvatarAtom"
+export * from "./accountAtom"
+export * from "./accountProfileAtom"
+export * from "./switchProfileAtom"
+export * from "./createProfileAtom"
+export * from "./profileDraftAtom"
+export * from "./profileAtom"
+export * from "./profilesAtom"
+export * from "./updateProfileAtom"
+export * from "./loginAtom"
+export * from "./sessionCheckAtom"
+export * from "./userLogoutAtom"
+export * from "./motherTongueAtom"
+export * from "./learningLangAtom"
+export * from "./userSettingsAtom"
+export * from "./localStorageAtom"

package/src/atoms/learningLangAtom.ts

@@ -0,0 +1,8 @@
+import { normalizeLang } from "@pmate/lang"
+import { atom } from "jotai"
+import { profileAtom } from "./accountProfileAtom"
+
+export const learningLangAtom = atom((get) => {
+  const profile = get(profileAtom)
+  return normalizeLang(profile?.learningTargetLang)
+})

package/src/atoms/localStorageAtom.ts

@@ -0,0 +1,39 @@
+import { atom } from "jotai"
+import { atomFamily, type AtomFamily } from "jotai-family"
+import type { WritableAtom } from "jotai"
+
+export enum LSKEYS {
+  USER_SETTINGS = "user-settings",
+}
+
+const cacheAtom = atomFamily((_: LSKEYS) => atom<any>(undefined))
+
+type LocalStorageJsonAtomFamily = AtomFamily<
+  LSKEYS,
+  WritableAtom<any, [any], void>
+>
+
+export const localStorageJsonAtom: LocalStorageJsonAtomFamily = atomFamily(
+  (key: LSKEYS) =>
+    atom(
+      (get) => {
+        const cache = get(cacheAtom(key))
+        if (cache) {
+          return cache
+        }
+        try {
+          const item = localStorage.getItem(key)
+          if (!item) {
+            return null
+          }
+          return JSON.parse(item)
+        } catch {
+          return null
+        }
+      },
+      (_, set, value: any) => {
+        localStorage.setItem(key, JSON.stringify(value))
+        set(cacheAtom(key), value)
+      }
+    )
+)

package/src/atoms/loginAtom.ts

@@ -0,0 +1,8 @@
+import { atom } from "jotai"
+import { AccountManagerV2 } from "../utils/AccountManagerV2"
+import { resolveAppId } from "../utils/resolveAppId"
+
+export const loginAtom = atom(null, async () => {
+  const manager = AccountManagerV2.get(resolveAppId())
+  return manager.login()
+})

package/src/atoms/motherTongueAtom.ts

@@ -0,0 +1,8 @@
+import { normalizeLang } from "@pmate/lang"
+import { atom } from "jotai"
+import { profileAtom } from "./accountProfileAtom"
+
+export const motherTongueAtom = atom((get) => {
+  const profile = get(profileAtom)
+  return normalizeLang(profile?.motherTongue, "zh-CN")
+})

package/src/atoms/profileAtom.ts

@@ -0,0 +1,24 @@
+import { Profile } from "@pmate/meta"
+import { atomWithRefresh } from "jotai/utils"
+import { atomFamily, type AtomFamily } from "jotai-family"
+import type { WritableAtom } from "jotai"
+import { EntityService } from "../api/EntityService"
+
+type ProfileByIdAtomFamily = AtomFamily<
+  string,
+  WritableAtom<Promise<Profile | null>, [], void>
+>
+
+export const profileByIdAtom: ProfileByIdAtomFamily = atomFamily(
+  (profileId: string) =>
+    atomWithRefresh(async () => {
+      if (!profileId) {
+        return null
+      }
+      try {
+        return await EntityService.entity<Profile>(profileId)
+      } catch {
+        return null
+      }
+    })
+)

package/src/atoms/profileDraftAtom.ts

@@ -0,0 +1,7 @@
+import { atom } from "jotai"
+import type { ProfileDraft } from "../types/profile"
+
+/**
+ * Temporary profile info during registration flow
+ */
+export const profileDraftAtom = atom<ProfileDraft>({})

package/src/atoms/profilesAtom.ts

@@ -0,0 +1,20 @@
+import { Profile } from "@pmate/meta"
+import { atomWithLoadable } from "./atomWithLoadable"
+import { ProfileService } from "../api/ProfileService"
+import { resolveAppId } from "../utils/resolveAppId"
+import { AccountManagerV2 } from "../utils/AccountManagerV2"
+import { accountAtom } from "./accountAtom"
+
+export const profilesAtom = atomWithLoadable<Profile[]>(async (get) => {
+  get(accountAtom)
+  const manager = AccountManagerV2.get(resolveAppId())
+  const acc = await manager.getAccountState()
+  if (!acc) {
+    return [] as Profile[]
+  }
+  try {
+    return await ProfileService.getProfiles(acc)
+  } catch {
+    return [] as Profile[]
+  }
+})

package/src/atoms/sessionCheckAtom.ts

@@ -0,0 +1,10 @@
+import { atom } from "jotai"
+import { AccountService } from "../api/AccountService"
+
+export const sessionCheckAtom = atom(null, async () => {
+  try {
+    return await AccountService.session()
+  } catch {
+    return null
+  }
+})

package/src/atoms/switchProfileAtom.ts

@@ -0,0 +1,9 @@
+import { Profile } from "@pmate/meta"
+import { atom } from "jotai"
+import { AccountManagerV2 } from "../utils/AccountManagerV2"
+import { resolveAppId } from "../utils/resolveAppId"
+
+export const switchProfileAtom = atom(null, (_get, _, profile: Profile) => {
+  const app = resolveAppId(profile.app)
+  AccountManagerV2.get(app).setSelectedProfile(profile)
+})

package/src/atoms/updateProfileAtom.ts

@@ -0,0 +1,35 @@
+import { atom } from "jotai"
+import { ProfileService } from "../api/ProfileService"
+import { AccountManagerV2 } from "../utils/AccountManagerV2"
+import { resolveAppId } from "../utils/resolveAppId"
+import { profileAtom } from "./accountProfileAtom"
+import { profileByIdAtom } from "./profileAtom"
+
+export const updateProfileAtom = atom(
+  null,
+  async (get, _set, profileId: string, updates: Record<string, any>) => {
+    const selected = get(profileAtom)
+    const target =
+      selected && selected.id === profileId
+        ? selected
+        : await get(profileByIdAtom(profileId))
+
+    if (!target) {
+      return
+    }
+
+    await ProfileService.updateProfile({
+      profileId: target.id,
+      ...updates,
+    })
+
+    const app = resolveAppId(target.app)
+    const manager = AccountManagerV2.get(app)
+    const updated = { ...target, ...updates }
+    if (selected && selected.id === profileId) {
+      manager.setSelectedProfile(updated)
+    }
+
+    await manager.getProfiles()
+  }
+)

package/src/atoms/uploadAvatarAtom.ts

@@ -0,0 +1,49 @@
+import imageCompression from "browser-image-compression"
+import { atom } from "jotai"
+import { ProfileService } from "../api/ProfileService"
+
+type UploadAvatarParams = {
+  file: File
+  userId: string
+}
+
+const fileToBase64 = (file: File) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onloadend = () => {
+      const result = reader.result
+      if (typeof result !== "string") {
+        reject(new Error("Failed to read file"))
+        return
+      }
+      const [, base64] = result.split(",")
+      if (!base64) {
+        reject(new Error("Failed to parse base64 data"))
+        return
+      }
+      resolve(base64)
+    }
+    reader.onerror = () => {
+      reject(new Error("Failed to read file"))
+    }
+    reader.readAsDataURL(file)
+  })
+
+export const uploadAvatarAtom = atom(
+  null,
+  async (_get, _set, { file, userId }: UploadAvatarParams) => {
+    const compressed = await imageCompression(file, {
+      maxSizeMB: 1,
+      maxWidthOrHeight: 128,
+      useWebWorker: true,
+    })
+
+    const base64 = await fileToBase64(compressed)
+
+    return ProfileService.updateAvatar({
+      user: userId,
+      base64,
+      filename: compressed.name,
+    })
+  }
+)

package/src/atoms/userLogoutAtom.ts

@@ -0,0 +1,8 @@
+import { atom } from "jotai"
+import { AccountManagerV2 } from "../utils/AccountManagerV2"
+import { resolveAppId } from "../utils/resolveAppId"
+
+export const userLogoutAtom = atom(null, async () => {
+  const manager = AccountManagerV2.get(resolveAppId())
+  await manager.logout()
+})

package/src/atoms/userSettingsAtom.ts

@@ -0,0 +1,58 @@
+import { VoiceList } from "@pmate/meta"
+import { Difficulty, UserSettings } from "@pmate/meta"
+import { WritableAtom, atom } from "jotai"
+import { LSKEYS, localStorageJsonAtom } from "./localStorageAtom"
+
+const defaultSettings: UserSettings = {
+  intensive: false,
+  bilingual: true,
+  fontColor: "#000000",
+  backgroundColor: "white",
+  books: [],
+  advancedMode: false,
+  autoread: true,
+  playSpeed: 1,
+  scrollDirection: "vertical",
+  companion: "",
+  difficulty: Difficulty.Medium,
+  "chatVoice@v2": VoiceList.KOKORO_af_alloy,
+  uiLang: "zh-CN",
+  motherTongue: "zh-CN",
+}
+
+const settingsCache = new Map<keyof UserSettings, WritableAtom<any, any, any>>()
+
+export const userSettingsAtom = <T extends keyof UserSettings>(key: T) => {
+  if (settingsCache.has(key)) {
+    return settingsCache.get(key)! as WritableAtom<
+      UserSettings[T],
+      [value: UserSettings[T]],
+      void
+    >
+  }
+
+  const settingAtom = atom(
+    (get) => {
+      const stored = get(localStorageJsonAtom(LSKEYS.USER_SETTINGS)) as
+        | UserSettings
+        | null
+      if (stored && key in stored) {
+        return stored[key] as UserSettings[T]
+      }
+      return defaultSettings[key]
+    },
+    (get, set, value: UserSettings[T]) => {
+      const stored = get(localStorageJsonAtom(LSKEYS.USER_SETTINGS)) as
+        | UserSettings
+        | null
+      const next = {
+        ...(stored ?? defaultSettings),
+        [key]: value,
+      } as UserSettings
+      set(localStorageJsonAtom(LSKEYS.USER_SETTINGS), next)
+    }
+  )
+
+  settingsCache.set(key, settingAtom)
+  return settingAtom as WritableAtom<UserSettings[T], [value: UserSettings[T]], void>
+}

package/src/components/AuthProviderV2.tsx

@@ -0,0 +1,315 @@
+import { Button } from "./Button"
+import { Drawer } from "./Drawer"
+import { useSetAtom } from "jotai"
+import {
+  Component,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react"
+import { useAuthSnapshot } from "../hooks/useAuthSnapshot"
+import { accountAtom } from "../atoms/accountAtom"
+import { AccountLifecycleState } from "../types/account.types"
+import { userLogoutAtom } from "../atoms/userLogoutAtom"
+import { Redirect } from "../utils/Redirect"
+import { NotAuthenticatedError } from "../utils/errors"
+import {
+  getWindowPathname,
+  subscribeToLocationChange,
+} from "../utils/location"
+
+export type AuthRoute =
+  | string
+  | {
+      path: string
+      behavior?: "redirect" | "prompt"
+    }
+
+const escapeRegExp = (value: string) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+
+const matchRoutePath = (pattern: string, pathname: string) => {
+  if (pattern === "*") {
+    return true
+  }
+  if (pattern === "/") {
+    return pathname === "/"
+  }
+  const segments = pattern.split("/").filter(Boolean)
+  const parts = segments.map((segment) => {
+    if (segment === "*") {
+      return ".*"
+    }
+    if (segment.startsWith(":")) {
+      return "[^/]+"
+    }
+    return escapeRegExp(segment)
+  })
+  const regex = new RegExp(`^/${parts.join("/")}$`)
+  return regex.test(pathname)
+}
+
+const getAuthBehaviors = (
+  authRoutes: AuthRoute[] | undefined,
+  pathname: string
+) => {
+  const matchedAuthRoute = authRoutes?.find((route) => {
+    const path = typeof route === "string" ? route : route.path
+    return matchRoutePath(path, pathname)
+  })
+  const authBehavior =
+    matchedAuthRoute && typeof matchedAuthRoute !== "string"
+      ? (matchedAuthRoute.behavior ?? "prompt")
+      : "prompt"
+  const requiresAuth = Boolean(matchedAuthRoute)
+  return {
+    authBehavior,
+    requiresAuth,
+  }
+}
+
+type AuthProviderV2Props = PropsWithChildren<{
+  app: string
+  authRoutes?: AuthRoute[]
+  onLoginSuccess?: () => void | Promise<void>
+  rtcProvider?: React.ComponentType<{ children: React.ReactNode }>
+  pathname?: string
+  navigate?: (to: string, options?: { replace?: boolean }) => void
+}>
+
+const useWindowPathname = () => {
+  const [pathname, setPathname] = useState(getWindowPathname())
+  useEffect(() => {
+    const update = () => setPathname(getWindowPathname())
+    const unsubscribe = subscribeToLocationChange(update)
+    return () => unsubscribe()
+  }, [])
+  return pathname
+}
+
+export const AuthProviderV2 = ({
+  app,
+  authRoutes,
+  rtcProvider: RtcProvider,
+  pathname: pathnameProp,
+  navigate: navigateProp,
+  children,
+}: AuthProviderV2Props) => {
+  const pathname = pathnameProp ?? useWindowPathname()
+  const navigate = useMemo(() => {
+    if (navigateProp) {
+      return navigateProp
+    }
+    return (to: string, options?: { replace?: boolean }) => {
+      if (options?.replace) {
+        window.location.replace(to)
+        return
+      }
+      window.location.assign(to)
+    }
+  }, [navigateProp])
+  const [isLoginPromptOpen, setIsLoginPromptOpen] = useState(false)
+  const [isLoginErrorDismissed, setIsLoginErrorDismissed] = useState(false)
+  const setAccountSnapshot = useSetAtom(accountAtom)
+  const { authBehavior, requiresAuth } = getAuthBehaviors(
+    authRoutes,
+    pathname
+  )
+  const { loading, snapshot } = useAuthSnapshot({
+    app,
+    behaviors: {
+      authBehavior,
+      requiresAuth,
+    },
+  })
+  const loginError = snapshot.error
+  const hasAccount =
+    snapshot.state === AccountLifecycleState.Idle
+      ? null
+      : Boolean(snapshot.account)
+
+  useEffect(() => {
+    setAccountSnapshot(snapshot)
+  }, [setAccountSnapshot, snapshot])
+
+  useEffect(() => {
+    if (!requiresAuth || loading) {
+      return
+    }
+    if (
+      snapshot.account &&
+      snapshot.profiles.length === 0 &&
+      pathname !== "/create-profile"
+    ) {
+      Redirect.toCreateProfile(app)
+      return
+    }
+    if (!snapshot.account && authBehavior === "redirect") {
+      Redirect.toLogin(app)
+    }
+  }, [
+    app,
+    authBehavior,
+    loading,
+    pathname,
+    requiresAuth,
+    snapshot.account,
+    snapshot.profiles.length,
+  ])
+
+  useEffect(() => {
+    if (loading) {
+      return
+    }
+    setIsLoginPromptOpen(
+      requiresAuth && !snapshot.account && authBehavior === "prompt",
+    )
+  }, [authBehavior, loading, requiresAuth, snapshot.account])
+  useEffect(() => {
+    if (!loginError) {
+      setIsLoginErrorDismissed(false)
+    }
+  }, [loginError])
+
+  const handleBack = () => {
+    setIsLoginPromptOpen(false)
+    if (window.history.length > 1) {
+      window.history.back()
+      return
+    }
+    // window.location.href = "/"
+  }
+
+  if (loading && requiresAuth) {
+    return null
+  }
+  if (loginError && requiresAuth && !isLoginErrorDismissed) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-slate-50 p-6">
+        <div className="w-full max-w-md rounded-xl border border-rose-200 bg-white p-6 shadow-sm">
+          <div className="text-sm font-semibold text-rose-600">
+            Login failed
+          </div>
+          <p className="mt-2 text-sm text-slate-600">
+            We could not restore your session. Please try again.
+          </p>
+          <div className="mt-3 text-xs text-rose-500">{loginError.message}</div>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <button
+              className="rounded-md bg-rose-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-rose-700"
+              type="button"
+              onClick={() => window.location.reload()}
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  if (requiresAuth && hasAccount === null) {
+    return null
+  }
+  if (requiresAuth && hasAccount === false && authBehavior === "prompt") {
+    return (
+      <Drawer
+        open={isLoginPromptOpen}
+        onClose={handleBack}
+        anchor="bottom"
+        overlayClassName="bg-black/40"
+      >
+        <div className="rounded-t-2xl px-6 pb-6 pt-4">
+          <div className="mx-auto mb-3 h-1.5 w-12 rounded-full bg-slate-200" />
+          <div className="text-lg font-semibold text-slate-900">
+            You need login to continue ?
+          </div>
+          <div className="mt-5 flex items-center justify-end gap-3">
+            <Button
+              type="button"
+              variant="plain"
+              className="min-w-[96px] justify-center"
+              onClick={handleBack}
+            >
+              Back
+            </Button>
+            <Button
+              type="button"
+              className="min-w-[96px] justify-center"
+              onClick={() => Redirect.toLogin(app)}
+            >
+              Login
+            </Button>
+          </div>
+        </div>
+      </Drawer>
+    )
+  }
+  if (!requiresAuth) {
+    return children
+  }
+  const RtcWrapper = RtcProvider ?? (({ children }) => <>{children}</>)
+  return (
+    <AuthErrorBoundary navigate={navigate}>
+      <RtcWrapper>{children}</RtcWrapper>
+    </AuthErrorBoundary>
+  )
+}
+
+interface AuthErrorBoundaryState {
+  hasError: boolean
+}
+
+interface AuthErrorBoundaryProps extends PropsWithChildren {
+  onAuthError: () => Promise<void>
+}
+
+class AuthErrorBoundaryInner extends Component<
+  AuthErrorBoundaryProps,
+  AuthErrorBoundaryState
+> {
+  state: AuthErrorBoundaryState = { hasError: false }
+
+  static getDerivedStateFromError(): AuthErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: unknown) {
+    if (error instanceof NotAuthenticatedError) {
+      this.props.onAuthError().then(() => {
+        this.setState({ hasError: false })
+      })
+      return
+    }
+
+    console.error(error)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}
+
+const AuthErrorBoundary = ({
+  children,
+  navigate,
+}: PropsWithChildren<{
+  navigate: (to: string, options?: { replace?: boolean }) => void
+}>) => {
+  const logout = useSetAtom(userLogoutAtom)
+  const handleAuthError = useCallback(async () => {
+    await logout()
+    navigate("/login", { replace: true })
+  }, [logout, navigate])
+
+  return (
+    <AuthErrorBoundaryInner onAuthError={handleAuthError}>
+      {children}
+    </AuthErrorBoundaryInner>
+  )
+}

package/src/components/Button.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+
+type ButtonVariant = "primary" | "plain"
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+}
+
+const joinClassNames = (...parts: Array<string | false | null | undefined>) =>
+  parts.filter(Boolean).join(" ")
+
+const baseClassName =
+  "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
+
+const variantClassName: Record<ButtonVariant, string> = {
+  primary: "bg-slate-900 text-white hover:bg-slate-800",
+  plain: "border border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
+}
+
+export const Button = ({
+  variant = "primary",
+  className,
+  disabled,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      {...props}
+      disabled={disabled}
+      className={joinClassNames(
+        baseClassName,
+        variantClassName[variant],
+        disabled && "cursor-not-allowed opacity-60",
+        className,
+      )}
+    />
+  )
+}