@lobehub/lobehub 2.0.0-next.124 → 2.0.0-next.125

package/src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -1,35 +1,280 @@
 'use client';
 
-import { Form, type FormGroupItemType, Input } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { memo } from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Divider, Input, Skeleton, Spin, Typography, Upload } from 'antd';
+import { AnimatePresence, motion } from 'framer-motion';
+import { CSSProperties, ReactNode, memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
+import { notification } from '@/components/AntdStaticMethods';
+import { fetchErrorNotification } from '@/components/Error/fetchErrorNotification';
 import { enableAuth } from '@/const/auth';
-import { FORM_STYLE } from '@/const/layoutTokens';
-import AvatarWithUpload from '@/features/AvatarWithUpload';
 import UserAvatar from '@/features/User/UserAvatar';
+import { requestPasswordReset } from '@/libs/better-auth/auth-client';
 import { useUserStore } from '@/store/user';
 import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
+import { imageToBase64 } from '@/utils/imageToBase64';
+import { createUploadImageHandler } from '@/utils/uploadFIle';
 
 import SSOProvidersList from './features/SSOProvidersList';
 
+interface ProfileRowProps {
+  action?: ReactNode;
+  children: ReactNode;
+  label: string;
+}
+
+const rowStyle: CSSProperties = {
+  minHeight: 48,
+  padding: '16px 0',
+};
+
+const labelStyle: CSSProperties = {
+  flexShrink: 0,
+  width: 160,
+};
+
+const ProfileRow = memo<ProfileRowProps>(({ label, children, action }) => (
+  <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
+    <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
+      <Typography.Text style={labelStyle}>{label}</Typography.Text>
+      <Flexbox style={{ flex: 1 }}>{children}</Flexbox>
+    </Flexbox>
+    {action && <Flexbox>{action}</Flexbox>}
+  </Flexbox>
+));
+
+const AvatarRow = memo(() => {
+  const { t } = useTranslation('auth');
+  const isLogin = useUserStore(authSelectors.isLogin);
+  const updateAvatar = useUserStore((s) => s.updateAvatar);
+  const [uploading, setUploading] = useState(false);
+
+  const handleUploadAvatar = useCallback(
+    createUploadImageHandler(async (avatar) => {
+      try {
+        setUploading(true);
+        const img = new Image();
+        img.src = avatar;
+
+        await new Promise((resolve, reject) => {
+          img.addEventListener('load', resolve);
+          img.addEventListener('error', reject);
+        });
+
+        const webpBase64 = imageToBase64({ img, size: 256 });
+        await updateAvatar(webpBase64);
+        setUploading(false);
+      } catch (error) {
+        console.error('Failed to upload avatar:', error);
+        setUploading(false);
+
+        fetchErrorNotification.error({
+          errorMessage: error instanceof Error ? error.message : String(error),
+          status: 500,
+        });
+      }
+    }),
+    [updateAvatar],
+  );
+
+  const canUpload = !enableAuth || isLogin;
+
+  return (
+    <Flexbox align="center" gap={24} horizontal justify="space-between" style={rowStyle}>
+      <Flexbox align="center" gap={24} horizontal style={{ flex: 1 }}>
+        <Typography.Text style={labelStyle}>{t('profile.avatar')}</Typography.Text>
+        <Flexbox style={{ flex: 1 }}>
+          {canUpload ? (
+            <Spin indicator={<LoadingOutlined spin />} spinning={uploading}>
+              <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+                <UserAvatar clickable size={40} />
+              </Upload>
+            </Spin>
+          ) : (
+            <UserAvatar size={40} />
+          )}
+        </Flexbox>
+      </Flexbox>
+      {canUpload && (
+        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+          <Typography.Text style={{ cursor: 'pointer', fontSize: 13 }}>
+            {t('profile.updateAvatar')}
+          </Typography.Text>
+        </Upload>
+      )}
+    </Flexbox>
+  );
+});
+
+const FullNameRow = memo(() => {
+  const { t } = useTranslation('auth');
+  const fullName = useUserStore(userProfileSelectors.fullName);
+  const updateFullName = useUserStore((s) => s.updateFullName);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const handleStartEdit = () => {
+    setEditValue(fullName || '');
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue('');
+  };
+
+  const handleSave = useCallback(async () => {
+    if (!editValue.trim()) return;
+
+    try {
+      setSaving(true);
+      await updateFullName(editValue.trim());
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Failed to update fullName:', error);
+      fetchErrorNotification.error({
+        errorMessage: error instanceof Error ? error.message : String(error),
+        status: 500,
+      });
+    } finally {
+      setSaving(false);
+    }
+  }, [editValue, updateFullName]);
+
+  return (
+    <Flexbox gap={24} horizontal style={rowStyle}>
+      <Typography.Text style={labelStyle}>{t('profile.fullName')}</Typography.Text>
+      <Flexbox style={{ flex: 1 }}>
+        <AnimatePresence mode="wait">
+          {isEditing ? (
+            <motion.div
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              initial={{ opacity: 0, y: -10 }}
+              key="editing"
+              transition={{ duration: 0.2 }}
+            >
+              <Flexbox gap={12}>
+                <Typography.Text strong>{t('profile.fullNameInputHint')}</Typography.Text>
+                <Input
+                  autoFocus
+                  onChange={(e) => setEditValue(e.target.value)}
+                  onPressEnter={handleSave}
+                  placeholder={t('profile.fullName')}
+                  value={editValue}
+                />
+                <Flexbox gap={8} horizontal justify="flex-end">
+                  <Button disabled={saving} onClick={handleCancel} size="small">
+                    {t('profile.cancel')}
+                  </Button>
+                  <Button loading={saving} onClick={handleSave} size="small" type="primary">
+                    {t('profile.save')}
+                  </Button>
+                </Flexbox>
+              </Flexbox>
+            </motion.div>
+          ) : (
+            <motion.div
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              initial={{ opacity: 0 }}
+              key="display"
+              transition={{ duration: 0.2 }}
+            >
+              <Flexbox align="center" horizontal justify="space-between">
+                <Typography.Text>{fullName || '--'}</Typography.Text>
+                <Typography.Text
+                  onClick={handleStartEdit}
+                  style={{ cursor: 'pointer', fontSize: 13 }}
+                >
+                  {t('profile.updateFullName')}
+                </Typography.Text>
+              </Flexbox>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+const PasswordRow = memo(() => {
+  const { t } = useTranslation('auth');
+  const userProfile = useUserStore(userProfileSelectors.userProfile);
+  const [sending, setSending] = useState(false);
+
+  const handleChangePassword = useCallback(async () => {
+    if (!userProfile?.email) return;
+
+    try {
+      setSending(true);
+      await requestPasswordReset({
+        email: userProfile.email,
+        redirectTo: `/reset-password?email=${encodeURIComponent(userProfile.email)}`,
+      });
+      notification.success({
+        message: t('profile.resetPasswordSent'),
+      });
+    } catch (error) {
+      console.error('Failed to send reset password email:', error);
+      notification.error({
+        message: t('profile.resetPasswordError'),
+      });
+    } finally {
+      setSending(false);
+    }
+  }, [userProfile?.email, t]);
+
+  return (
+    <ProfileRow
+      action={
+        <Typography.Text
+          onClick={sending ? undefined : handleChangePassword}
+          style={{
+            cursor: sending ? 'default' : 'pointer',
+            fontSize: 13,
+            opacity: sending ? 0.5 : 1,
+          }}
+        >
+          {t('profile.changePassword')}
+        </Typography.Text>
+      }
+      label={t('profile.password')}
+    >
+      <Typography.Text>••••••</Typography.Text>
+    </ProfileRow>
+  );
+});
+
 const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
-  const [isLoginWithNextAuth, isLogin] = useUserStore((s) => [
+  const [isLoginWithNextAuth, isLoginWithBetterAuth] = useUserStore((s) => [
     authSelectors.isLoginWithNextAuth(s),
-    authSelectors.isLogin(s),
+    authSelectors.isLoginWithBetterAuth(s),
   ]);
-  const [nickname, username, userProfile, loading] = useUserStore((s) => [
-    userProfileSelectors.nickName(s),
+  const [username, userProfile, isUserLoaded] = useUserStore((s) => [
     userProfileSelectors.username(s),
     userProfileSelectors.userProfile(s),
-    !s.isLoaded,
+    s.isLoaded,
   ]);
+  const isEmailPasswordAuth = useUserStore(authSelectors.isEmailPasswordAuth);
+  const isLoadedAuthProviders = useUserStore(authSelectors.isLoadedAuthProviders);
+  const fetchAuthProviders = useUserStore((s) => s.fetchAuthProviders);
+
+  const isLoginWithAuth = isLoginWithNextAuth || isLoginWithBetterAuth;
+  const isLoading = !isUserLoaded || (isLoginWithAuth && !isLoadedAuthProviders);
+
+  useEffect(() => {
+    if (isLoginWithAuth) {
+      fetchAuthProviders();
+    }
+  }, [isLoginWithAuth, fetchAuthProviders]);
 
-  const [form] = Form.useForm();
   const { t } = useTranslation('auth');
 
-  if (loading)
+  if (isLoading)
     return (
       <Skeleton
         active
@@ -39,47 +284,56 @@ const Client = memo<{ mobile?: boolean }>(({ mobile }) => {
       />
     );
 
-  const profile: FormGroupItemType = {
-    children: [
-      {
-        children: enableAuth && !isLogin ? <UserAvatar /> : <AvatarWithUpload />,
-        label: t('profile.avatar'),
-        layout: 'horizontal',
-        minWidth: undefined,
-      },
-      {
-        children: <Input disabled />,
-        label: t('profile.username'),
-        name: 'username',
-      },
-      {
-        children: <Input disabled />,
-        hidden: !isLoginWithNextAuth || !userProfile?.email,
-        label: t('profile.email'),
-        name: 'email',
-      },
-      {
-        children: <SSOProvidersList />,
-        hidden: !isLoginWithNextAuth,
-        label: t('profile.sso.providers'),
-        layout: 'vertical',
-        minWidth: undefined,
-      },
-    ],
-    title: t('tab.profile'),
-  };
   return (
-    <Form
-      form={form}
-      initialValues={{
-        email: userProfile?.email || '--',
-        username: nickname || username,
-      }}
-      items={[profile]}
-      itemsType={'group'}
-      variant={'borderless'}
-      {...FORM_STYLE}
-    />
+    <Flexbox gap={0} paddingInline={mobile ? 16 : 0}>
+      <Typography.Title level={4} style={{ marginBottom: 32 }}>
+        {t('profile.title')}
+      </Typography.Title>
+
+      <Divider style={{ marginBlock: 0 }} />
+
+      {/* Avatar Row - Editable */}
+      <AvatarRow />
+
+      <Divider style={{ margin: 0 }} />
+
+      {/* Full Name Row - Editable */}
+      <FullNameRow />
+
+      <Divider style={{ margin: 0 }} />
+
+      {/* Username Row - Read Only */}
+      <ProfileRow label={t('profile.username')}>
+        <Typography.Text>{username || '--'}</Typography.Text>
+      </ProfileRow>
+
+      <Divider style={{ margin: 0 }} />
+
+      {/* Password Row - Only for Better Auth users with credential login */}
+      {isLoginWithBetterAuth && isEmailPasswordAuth && (
+        <>
+          <PasswordRow />
+          <Divider style={{ margin: 0 }} />
+        </>
+      )}
+
+      {/* Email Row - Read Only */}
+      {isLoginWithAuth && userProfile?.email && (
+        <>
+          <ProfileRow label={t('profile.email')}>
+            <Typography.Text>{userProfile.email}</Typography.Text>
+          </ProfileRow>
+          <Divider style={{ margin: 0 }} />
+        </>
+      )}
+
+      {/* SSO Providers Row */}
+      {isLoginWithAuth && (
+        <ProfileRow label={t('profile.sso.providers')}>
+          <SSOProvidersList />
+        </ProfileRow>
+      )}
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/profile/(home)/features/SSOProvidersList/index.tsx

@@ -1,38 +1,48 @@
-import { ActionIcon, CopyButton, List } from '@lobehub/ui';
-import { RotateCw, Unlink } from 'lucide-react';
-import { CSSProperties, memo, useState } from 'react';
+import { ActionIcon } from '@lobehub/ui';
+import { Dropdown, type MenuProps, Typography } from 'antd';
+import { ArrowRight, Plus, Unlink } from 'lucide-react';
+import { CSSProperties, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { modal, notification } from '@/components/AntdStaticMethods';
 import AuthIcons from '@/components/NextAuth/AuthIcons';
-import { useOnlyFetchOnceSWR } from '@/libs/swr';
+import { linkSocial, unlinkAccount } from '@/libs/better-auth/auth-client';
 import { userService } from '@/services/user';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/selectors';
-
-const { Item } = List;
+import { authSelectors, userProfileSelectors } from '@/store/user/selectors';
 
 const providerNameStyle: CSSProperties = {
   textTransform: 'capitalize',
 };
 
 export const SSOProvidersList = memo(() => {
-  const [userProfile] = useUserStore((s) => [userProfileSelectors.userProfile(s)]);
+  const userProfile = useUserStore(userProfileSelectors.userProfile);
+  const isLoginWithBetterAuth = useUserStore(authSelectors.isLoginWithBetterAuth);
+  const providers = useUserStore(authSelectors.authProviders);
+  const isEmailPasswordAuth = useUserStore(authSelectors.isEmailPasswordAuth);
+  const refreshAuthProviders = useUserStore((s) => s.refreshAuthProviders);
+  const oAuthSSOProviders = useServerConfigStore(serverConfigSelectors.oAuthSSOProviders);
   const { t } = useTranslation('auth');
 
-  const [allowUnlink, setAllowUnlink] = useState<boolean>(false);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  // Allow unlink if user has multiple SSO providers OR has email/password login
+  const allowUnlink = providers.length > 1 || isEmailPasswordAuth;
+
+  // Get linked provider IDs for filtering
+  const linkedProviderIds = useMemo(() => {
+    return new Set(providers.map((item) => item.provider));
+  }, [providers]);
 
-  const { data, isLoading, mutate } = useOnlyFetchOnceSWR('profile-sso-providers', async () => {
-    const list = await userService.getUserSSOProviders();
-    setAllowUnlink(list?.length > 1);
-    return list;
-  });
+  // Get available providers for linking (filter out already linked)
+  const availableProviders = useMemo(() => {
+    return (oAuthSSOProviders || []).filter((provider) => !linkedProviderIds.has(provider));
+  }, [oAuthSSOProviders, linkedProviderIds]);
 
   const handleUnlinkSSO = async (provider: string, providerAccountId: string) => {
-    if (data?.length === 1 || !data) {
-      // At least one SSO provider should be linked
+    // Prevent unlink if this is the only login method
+    if (!allowUnlink) {
       notification.error({
         message: t('profile.sso.unlink.forbidden'),
       });
@@ -48,43 +58,75 @@ export const SSOProvidersList = memo(() => {
         danger: true,
       },
       onOk: async () => {
-        await userService.unlinkSSOProvider(provider, providerAccountId);
-        mutate();
+        if (isLoginWithBetterAuth) {
+          // Use better-auth native API
+          await unlinkAccount({ providerId: provider });
+        } else {
+          // Fallback for NextAuth
+          await userService.unlinkSSOProvider(provider, providerAccountId);
+        }
+        refreshAuthProviders();
       },
       title: <span style={providerNameStyle}>{t('profile.sso.unlink.title', { provider })}</span>,
     });
   };
 
-  return isLoading ? (
-    <Flexbox align={'center'} gap={4} horizontal>
-      <ActionIcon icon={RotateCw} spin />
-      {t('profile.sso.loading')}
-    </Flexbox>
-  ) : (
-    <Flexbox>
-      {data?.map((item, index) => (
-        <Item
-          actions={
-            <Flexbox gap={4} horizontal>
-              <CopyButton content={item.providerAccountId} size={'small'} />
-              <ActionIcon
-                disabled={!allowUnlink}
-                icon={Unlink}
-                onClick={() => handleUnlinkSSO(item.provider, item.providerAccountId)}
-                size={'small'}
-              />
-            </Flexbox>
-          }
-          avatar={AuthIcons(item.provider)}
-          date={item.expires_at}
-          description={item.providerAccountId}
+  const handleLinkSSO = async (provider: string) => {
+    if (isLoginWithBetterAuth) {
+      // Use better-auth native linkSocial API
+      await linkSocial({
+        callbackURL: '/profile',
+        provider: provider as any,
+      });
+    }
+  };
+
+  // Dropdown menu items for linking new providers
+  const linkMenuItems: MenuProps['items'] = availableProviders.map((provider) => ({
+    icon: AuthIcons(provider, 16),
+    key: provider,
+    label: <span style={providerNameStyle}>{provider}</span>,
+    onClick: () => handleLinkSSO(provider),
+  }));
+
+  return (
+    <Flexbox gap={8}>
+      {providers.map((item) => (
+        <Flexbox
+          align={'center'}
+          gap={8}
+          horizontal
+          justify={'space-between'}
           key={[item.provider, item.providerAccountId].join('-')}
-          onMouseEnter={() => setHoveredIndex(index)}
-          onMouseLeave={() => setHoveredIndex(null)}
-          showAction={hoveredIndex === index}
-          title={<span style={providerNameStyle}>{item.provider}</span>}
-        />
+        >
+          <Flexbox align={'center'} gap={6} horizontal style={{ fontSize: 12 }}>
+            {AuthIcons(item.provider, 16)}
+            <span style={providerNameStyle}>{item.provider}</span>
+            {item.email && (
+              <Typography.Text style={{ fontSize: 11 }} type="secondary">
+                · {item.email}
+              </Typography.Text>
+            )}
+          </Flexbox>
+          <ActionIcon
+            disabled={!allowUnlink}
+            icon={Unlink}
+            onClick={() => handleUnlinkSSO(item.provider, item.providerAccountId)}
+            size={'small'}
+          />
+        </Flexbox>
       ))}
+
+      {/* Link Account Button - Only show for Better-Auth users with available providers */}
+      {isLoginWithBetterAuth && availableProviders.length > 0 && (
+        <Dropdown menu={{ items: linkMenuItems, style: { maxWidth: '200px' } }} trigger={['click']}>
+          <Flexbox align={'center'} gap={6} horizontal style={{ cursor: 'pointer', fontSize: 12 }}>
+            <Plus size={14} />
+            <span>{t('profile.sso.link.button')}</span>
+            <ArrowRight size={14} />
+          </Flexbox>
+        </Dropdown>
+      )}
     </Flexbox>
   );
 });

package/src/auth.ts

@@ -0,0 +1,118 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
+import { serverDB } from '@lobechat/database';
+import { betterAuth } from 'better-auth';
+import { drizzleAdapter } from 'better-auth/adapters/drizzle';
+import { genericOAuth, magicLink } from 'better-auth/plugins';
+
+import { authEnv } from '@/envs/auth';
+import {
+  getMagicLinkEmailTemplate,
+  getResetPasswordEmailTemplate,
+  getVerificationEmailTemplate,
+} from '@/libs/better-auth/email-templates';
+import { initBetterAuthSSOProviders } from '@/libs/better-auth/sso';
+import { EmailService } from '@/server/services/email';
+
+// Email verification link expiration time (in seconds)
+// Default is 1 hour (3600 seconds) as per Better Auth documentation
+const VERIFICATION_LINK_EXPIRES_IN = 3600;
+const MAGIC_LINK_EXPIRES_IN = 900;
+const enableMagicLink = authEnv.NEXT_PUBLIC_ENABLE_MAGIC_LINK;
+
+const { socialProviders, genericOAuthProviders } = initBetterAuthSSOProviders();
+
+export const auth = betterAuth({
+  account: {
+    accountLinking: {
+      allowDifferentEmails: true,
+      enabled: true,
+    },
+  },
+
+  // Use renamed env vars (fallback to next-auth vars is handled in src/envs/auth.ts)
+  baseURL: authEnv.NEXT_PUBLIC_AUTH_URL,
+  secret: authEnv.AUTH_SECRET,
+
+  database: drizzleAdapter(serverDB, {
+    provider: 'pg',
+  }),
+
+  emailAndPassword: {
+    autoSignIn: true,
+    enabled: true,
+    maxPasswordLength: 64,
+    minPasswordLength: 8,
+    requireEmailVerification: authEnv.NEXT_PUBLIC_AUTH_EMAIL_VERIFICATION,
+
+    sendResetPassword: async ({ user, url }) => {
+      const template = getResetPasswordEmailTemplate({ url });
+
+      const emailService = new EmailService();
+      await emailService.sendMail({
+        to: user.email,
+        ...template,
+      });
+    },
+  },
+  emailVerification: {
+    autoSignInAfterVerification: true,
+    expiresIn: VERIFICATION_LINK_EXPIRES_IN,
+    sendVerificationEmail: async ({ user, url }) => {
+      const template = getVerificationEmailTemplate({
+        expiresInSeconds: VERIFICATION_LINK_EXPIRES_IN,
+        url,
+        userName: user.name,
+      });
+
+      const emailService = new EmailService();
+      await emailService.sendMail({
+        to: user.email,
+        ...template,
+      });
+    },
+  },
+
+  plugins: [
+    ...(genericOAuthProviders.length > 0
+      ? [
+          genericOAuth({
+            config: genericOAuthProviders,
+          }),
+        ]
+      : []),
+    ...(enableMagicLink
+      ? [
+          magicLink({
+            expiresIn: MAGIC_LINK_EXPIRES_IN,
+            sendMagicLink: async ({ email, url }) => {
+              const template = getMagicLinkEmailTemplate({
+                expiresInSeconds: MAGIC_LINK_EXPIRES_IN,
+                url,
+              });
+
+              const emailService = new EmailService();
+              await emailService.sendMail({
+                to: email,
+                ...template,
+              });
+            },
+          }),
+        ]
+      : []),
+  ],
+  socialProviders,
+
+  user: {
+    additionalFields: {
+      fullName: {
+        required: false,
+        type: 'string',
+      },
+    },
+    fields: {
+      image: 'avatar',
+      name: 'username',
+    },
+    modelName: 'users',
+  },
+});