feat(console): allow editing basic userinfo in profile page

packages/console/src/components/TextLink/index.module.scss

@@ -8,6 +8,7 @@
   font: var(--font-body-2);
   color: var(--color-text-link);
   gap: _.unit(1);
+  cursor: pointer;
 
   &.trailingIcon {
     flex-direction: row-reverse;

packages/console/src/containers/AppLayout/components/UserInfo/index.tsx

@@ -1,5 +1,5 @@
 import { builtInLanguageOptions as consoleBuiltInLanguageOptions } from '@logto/phrases';
-import type { IdTokenClaims } from '@logto/react';
+import type { UserInfoResponse } from '@logto/react';
 import { useLogto } from '@logto/react';
 import { AppearanceMode } from '@logto/schemas';
 import classNames from 'classnames';
@@ -25,14 +25,14 @@ import UserInfoSkeleton from '../UserInfoSkeleton';
 import * as styles from './index.module.scss';
 
 const UserInfo = () => {
-  const { isAuthenticated, getIdTokenClaims, signOut } = useLogto();
+  const { isAuthenticated, fetchUserInfo, signOut } = useLogto();
   const navigate = useNavigate();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const anchorRef = useRef<HTMLDivElement>(null);
   const [showDropdown, setShowDropdown] = useState(false);
   const [user, setUser] =
     useState<
-      Pick<Record<string, unknown> & IdTokenClaims, 'username' | 'name' | 'picture' | 'email'>
+      Pick<Record<string, unknown> & UserInfoResponse, 'username' | 'name' | 'picture' | 'email'>
     >();
   const [isLoading, setIsLoading] = useState(false);
   const {
@@ -43,11 +43,11 @@ const UserInfo = () => {
   useEffect(() => {
     (async () => {
       if (isAuthenticated) {
-        const userInfo = await getIdTokenClaims();
+        const userInfo = await fetchUserInfo();
         setUser(userInfo ?? { name: '' }); // Provide a fallback to avoid infinite loading state
       }
     })();
-  }, [isAuthenticated, getIdTokenClaims]);
+  }, [isAuthenticated, fetchUserInfo]);
 
   if (!user) {
     return <UserInfoSkeleton />;

packages/console/src/hooks/use-logto-userinfo.ts

@@ -0,0 +1,27 @@
+import type { UserInfoResponse } from '@logto/react';
+import { useLogto } from '@logto/react';
+import type { Optional } from '@silverhand/essentials';
+import { useCallback, useEffect, useState } from 'react';
+
+const useLogtoUserInfo = (): [Optional<UserInfoResponse>, () => void, boolean] => {
+  const { fetchUserInfo, isLoading, isAuthenticated } = useLogto();
+  const [user, setUser] = useState<UserInfoResponse>();
+
+  const fetch = useCallback(async () => {
+    if (isAuthenticated) {
+      const userInfo = await fetchUserInfo();
+      setUser(userInfo);
+    } else {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setUser(undefined);
+    }
+  }, [fetchUserInfo, isAuthenticated]);
+
+  useEffect(() => {
+    void fetch();
+  }, [fetch]);
+
+  return [user, fetch, isLoading];
+};
+
+export default useLogtoUserInfo;

packages/console/src/pages/Profile/components/BasicUserInfoSection/index.module.scss

@@ -0,0 +1,5 @@
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+}

packages/console/src/pages/Profile/components/BasicUserInfoSection/index.tsx

@@ -0,0 +1,97 @@
+import type { UserInfoResponse } from '@logto/react';
+import type { Nullable } from '@silverhand/essentials';
+import { useState } from 'react';
+
+import UserAvatar from '@/components/UserAvatar';
+import { isCloud } from '@/consts/cloud';
+
+import type { BasicUserField } from '../../modals/BasicUserInfoUpdateModal';
+import BasicUserInfoUpdateModal from '../../modals/BasicUserInfoUpdateModal';
+import type { Row } from '../CardContent';
+import CardContent from '../CardContent';
+import Section from '../Section';
+import * as styles from './index.module.scss';
+
+type Props = {
+  user: UserInfoResponse;
+  onUpdate?: () => void;
+};
+
+const BasicUserInfoSection = ({ user, onUpdate }: Props) => {
+  const [editingField, setEditingField] = useState<BasicUserField>();
+  const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false);
+
+  const { name, username, picture: avatar } = user;
+
+  const conditionalUsername: Array<Row<Nullable<string> | undefined>> = isCloud
+    ? []
+    : [
+        {
+          label: 'profile.settings.username',
+          value: username,
+          actionName: 'profile.change',
+          action: () => {
+            setEditingField('username');
+            setIsUpdateModalOpen(true);
+          },
+        },
+      ];
+
+  // Get the value of the editing simple field (avatar, username or name)
+  const getSimpleFieldValue = (field?: BasicUserField): string => {
+    if (field === 'avatar') {
+      return avatar ?? '';
+    }
+
+    if (field === 'name') {
+      return name ?? '';
+    }
+
+    if (field === 'username') {
+      return username ?? '';
+    }
+
+    return '';
+  };
+
+  return (
+    <Section title="profile.settings.title">
+      <CardContent
+        title="profile.settings.profile_information"
+        data={[
+          {
+            label: 'profile.settings.avatar',
+            value: avatar,
+            renderer: (value) => <UserAvatar className={styles.avatar} url={value} />,
+            actionName: 'profile.change',
+            action: () => {
+              setEditingField('avatar');
+              setIsUpdateModalOpen(true);
+            },
+          },
+          {
+            label: 'profile.settings.name',
+            value: name,
+            actionName: name ? 'profile.change' : 'profile.set_name',
+            action: () => {
+              setEditingField('name');
+              setIsUpdateModalOpen(true);
+            },
+          },
+          ...conditionalUsername,
+        ]}
+      />
+      <BasicUserInfoUpdateModal
+        value={getSimpleFieldValue(editingField)}
+        field={editingField}
+        isOpen={isUpdateModalOpen}
+        onClose={() => {
+          setIsUpdateModalOpen(false);
+          onUpdate?.();
+        }}
+      />
+    </Section>
+  );
+};
+
+export default BasicUserInfoSection;

packages/console/src/pages/Profile/components/CardContent/index.module.scss

@@ -22,6 +22,11 @@
       &:first-child {
         width: 35%;
       }
+
+      &:last-child {
+        text-align: right;
+        width: 30%;
+      }
     }
 
     tr:last-child td {

packages/console/src/pages/Profile/components/CardContent/index.tsx

@@ -3,12 +3,16 @@ import type { Nullable } from '@silverhand/essentials';
 import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import TextLink from '@/components/TextLink';
+
 import * as styles from './index.module.scss';
 
 export type Row<T> = {
   label: AdminConsoleKey;
   value: T;
   renderer?: (value: T) => ReactNode;
+  action: () => void;
+  actionName: AdminConsoleKey;
 };
 
 type Props<T> = {
@@ -29,10 +33,19 @@ const CardContent = <T extends Nullable<string> | undefined>({ title, data }: Pr
       <div className={styles.title}>{t(title)}</div>
       <table>
         <tbody>
-          {data.map(({ label, value, renderer = defaultRenderer }) => (
+          {data.map(({ label, value, renderer = defaultRenderer, actionName, action }) => (
             <tr key={label}>
               <td>{t(label)}</td>
               <td>{renderer(value)}</td>
+              <td>
+                <TextLink
+                  onClick={() => {
+                    action();
+                  }}
+                >
+                  {t(actionName)}
+                </TextLink>
+              </td>
             </tr>
           ))}
         </tbody>

packages/console/src/pages/Profile/components/PasswordSection/index.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+import ChangePasswordModal from '../../modals/ChangePasswordModal';
+import CardContent from '../CardContent';
+import Section from '../Section';
+
+const PasswordSection = () => {
+  const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
+
+  return (
+    <Section title="profile.password.title">
+      <CardContent
+        title="profile.password.reset_password"
+        data={[
+          {
+            label: 'profile.password.password',
+            value: '******',
+            actionName: 'profile.change',
+            action: () => {
+              setIsChangePasswordModalOpen(true);
+            },
+          },
+        ]}
+      />
+      <ChangePasswordModal
+        isOpen={isChangePasswordModalOpen}
+        onClose={() => {
+          setIsChangePasswordModalOpen(false);
+        }}
+      />
+    </Section>
+  );
+};
+
+export default PasswordSection;

packages/console/src/pages/Profile/index.module.scss

@@ -1,11 +1,5 @@
 @use '@/scss/underscore' as _;
 
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-}
-
 .deleteAccount {
   flex: 1;
   display: flex;

packages/console/src/pages/Profile/index.tsx

@@ -1,78 +1,49 @@
-import type { IdTokenClaims } from '@logto/react';
-import { useLogto } from '@logto/react';
-import type { Nullable } from '@silverhand/essentials';
-import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@/components/Button';
 import CardTitle from '@/components/CardTitle';
-import UserAvatar from '@/components/UserAvatar';
 import { isCloud } from '@/consts/cloud';
+import useLogtoUserInfo from '@/hooks/use-logto-userinfo';
 import * as resourcesStyles from '@/scss/resources.module.scss';
 
-import type { Row } from './components/CardContent';
+import BasicUserInfoSection from './components/BasicUserInfoSection';
 import CardContent from './components/CardContent';
+import PasswordSection from './components/PasswordSection';
 import Section from './components/Section';
 import * as styles from './index.module.scss';
 
 const Profile = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { getIdTokenClaims } = useLogto();
-  const [user, setUser] = useState<IdTokenClaims>();
-
-  useEffect(() => {
-    (async () => {
-      const claims = await getIdTokenClaims();
-
-      if (claims) {
-        setUser(claims);
-      }
-    })();
-  }, [getIdTokenClaims]);
+  const [user, fetchUser] = useLogtoUserInfo();
 
   if (!user) {
     return null;
   }
 
-  const { name, username, picture, email } = user;
-
-  const conditionalUsername: Array<Row<Nullable<string> | undefined>> = isCloud
-    ? [{ label: 'profile.settings.username', value: username }]
-    : [];
-
   return (
     <div className={resourcesStyles.container}>
       <div className={resourcesStyles.headline}>
         <CardTitle title="profile.title" subtitle="profile.description" />
       </div>
-      <Section title="profile.settings.title">
-        <CardContent
-          title="profile.settings.profile_information"
-          data={[
-            {
-              label: 'profile.settings.avatar',
-              value: picture,
-              renderer: (value) => <UserAvatar className={styles.avatar} url={value} />,
-            },
-            { label: 'profile.settings.name', value: name },
-            ...conditionalUsername,
-          ]}
-        />
-      </Section>
+      <BasicUserInfoSection user={user} onUpdate={fetchUser} />
       {isCloud && (
         <Section title="profile.link_account.title">
           <CardContent
             title="profile.link_account.email_sign_in"
-            data={[{ label: 'profile.link_account.email', value: email }]}
+            data={[
+              {
+                label: 'profile.link_account.email',
+                value: user.email,
+                actionName: 'profile.link',
+                action: () => {
+                  console.log('link email');
+                },
+              },
+            ]}
           />
         </Section>
       )}
-      <Section title="profile.password.title">
-        <CardContent
-          title="profile.password.reset_password"
-          data={[{ label: 'profile.password.password', value: '******' }]}
-        />
-      </Section>
+      <PasswordSection />
       {isCloud && (
         <Section title="profile.delete_account.title">
           <div className={styles.deleteAccount}>

packages/console/src/pages/Profile/modals/BasicUserInfoUpdateModal/index.tsx

@@ -0,0 +1,96 @@
+import type { AdminConsoleKey } from '@logto/phrases';
+import { useEffect, useState } from 'react';
+import ReactModal from 'react-modal';
+
+import Button from '@/components/Button';
+import ModalLayout from '@/components/ModalLayout';
+import TextInput from '@/components/TextInput';
+import { adminTenantEndpoint, meApi } from '@/consts';
+import { useStaticApi } from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+export type BasicUserField = 'avatar' | 'username' | 'name';
+
+type Props = {
+  field?: BasicUserField;
+  value: string;
+  isOpen?: boolean;
+  onClose: () => void;
+};
+
+const BasicUserInfoUpdateModal = ({ field, value: defaultValue, isOpen, onClose }: Props) => {
+  const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
+  const [value, setValue] = useState(defaultValue);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  if (!field) {
+    return null;
+  }
+
+  const getModalTitle = (): AdminConsoleKey => {
+    if (field === 'avatar') {
+      return 'profile.change_avatar';
+    }
+
+    if (field === 'username') {
+      return 'profile.change_username';
+    }
+
+    return defaultValue ? 'profile.change_name' : 'profile.set_name';
+  };
+
+  const onSubmit = async () => {
+    setLoading(true);
+
+    try {
+      await api.patch(`me/user`, { json: { [field]: value } }).json();
+    } finally {
+      setLoading(false);
+      onClose();
+    }
+  };
+
+  return (
+    <ReactModal
+      shouldCloseOnEsc
+      isOpen={!!isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={() => {
+        onClose();
+      }}
+    >
+      <ModalLayout
+        title={getModalTitle()}
+        footer={
+          <Button
+            type="primary"
+            title="general.save"
+            isLoading={loading}
+            disabled={value === defaultValue || (!value && field === 'username')}
+            onClick={onSubmit}
+          />
+        }
+        onClose={() => {
+          onClose();
+        }}
+      >
+        <div>
+          <TextInput
+            name={field}
+            value={value}
+            onChange={(event) => {
+              setValue(event.currentTarget.value);
+            }}
+          />
+        </div>
+      </ModalLayout>
+    </ReactModal>
+  );
+};
+
+export default BasicUserInfoUpdateModal;

packages/console/src/pages/Profile/modals/ChangePasswordModal/index.module.scss

@@ -0,0 +1,17 @@
+@use '@/scss/underscore' as _;
+
+.changePassword {
+  border: 1px solid var(--color-divider);
+  border-radius: 8px;
+  padding: _.unit(4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .description {
+    font: var(--font-body-2);
+    color: var(--color-text);
+    margin-right: _.unit(4);
+  }
+}

packages/console/src/pages/Profile/modals/ChangePasswordModal/index.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Button from '@/components/Button';
+import FormField from '@/components/FormField';
+import ModalLayout from '@/components/ModalLayout';
+import TextInput from '@/components/TextInput';
+import { adminTenantEndpoint, meApi } from '@/consts';
+import { useStaticApi } from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+
+type FormFields = {
+  password: string;
+  confirmPassword: string;
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const ChangePasswordModal = ({ isOpen, onClose }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { watch, register, reset } = useForm<FormFields>();
+  const [isLoading, setIsLoading] = useState(false);
+  const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
+  const password = watch('password');
+  const confirmPassword = watch('confirmPassword');
+  const isDisabled = !password || password !== confirmPassword;
+
+  const onSubmit = async () => {
+    setIsLoading(true);
+    await api.post(`me/password`, { json: { password } }).json();
+    setIsLoading(false);
+    onClose();
+    toast.success(t('settings.password_changed'));
+    reset({});
+  };
+
+  return (
+    <ReactModal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onClose}
+    >
+      <ModalLayout
+        title="settings.change_modal_title"
+        subtitle="settings.change_modal_description"
+        footer={
+          <Button
+            type="primary"
+            title="general.confirm"
+            disabled={isDisabled || isLoading}
+            onClick={onSubmit}
+          />
+        }
+        onClose={onClose}
+      >
+        <div>
+          <FormField title="settings.new_password">
+            <TextInput {...register('password', { required: true })} type="password" />
+          </FormField>
+          <FormField title="settings.confirm_password">
+            <TextInput {...register('confirmPassword', { required: true })} type="password" />
+          </FormField>
+        </div>
+      </ModalLayout>
+    </ReactModal>
+  );
+};
+
+export default ChangePasswordModal;

packages/core/src/routes-me/user.ts

@@ -1,5 +1,6 @@
 import { passwordRegEx } from '@logto/core-kit';
 import { arbitraryObjectGuard } from '@logto/schemas';
+import { conditional } from '@silverhand/essentials';
 import { object, string } from 'zod';
 
 import RequestError from '#src/errors/RequestError/index.js';
@@ -15,6 +16,34 @@ export default function userRoutes<T extends AuthedMeRouter>(
 ) {
   const { findUserById, updateUserById } = tenant.queries.users;
 
+  router.patch(
+    '/user',
+    koaGuard({
+      body: object({
+        avatar: string().optional(),
+        name: string().optional(),
+        username: string().optional(),
+      }),
+    }),
+    async (ctx, next) => {
+      const { id: userId } = ctx.auth;
+      const { avatar, name, username } = ctx.guard.body;
+
+      const user = await findUserById(userId);
+      assertThat(!user.isSuspended, new RequestError({ code: 'user.suspended', status: 401 }));
+
+      await updateUserById(userId, {
+        ...conditional(avatar !== undefined && { avatar }),
+        ...conditional(name !== undefined && { name }),
+        ...conditional(username !== undefined && { username }),
+      });
+
+      ctx.status = 204;
+
+      return next();
+    }
+  );
+
   router.get('/custom-data', async (ctx, next) => {
     const { id: userId } = ctx.auth;
     const user = await findUserById(userId);

packages/phrases/src/locales/de/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/en/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.',
   },
-  edit: 'Edit',
+  set: 'Set',
   change: 'Change',
   link: 'Link',
   unlink: 'Unlink',
   not_set: 'Not set',
+  change_avatar: 'Change avatar',
+  change_name: 'Change name',
+  change_username: 'Change username',
+  set_name: 'Set name',
+  set_password: 'Set password',
+  link_email: 'Link email',
+  enter_password: 'Enter password',
+  enter_verification_code: 'Enter verification code',
 };
 
 export default profile;

packages/phrases/src/locales/fr/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/ko/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/pt-br/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/pt-pt/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/tr-tr/translation/admin-console/profile.ts

@@ -33,11 +33,19 @@ const profile = {
     dialog_paragraph_3:
       'Thank you for choosing Logto Cloud. If you have any further questions or concerns, please do not hesitate to reach out to us.', // UNTRANSLATED
   },
-  edit: 'Edit', // UNTRANSLATED
+  set: 'Set', // UNTRANSLATED
   change: 'Change', // UNTRANSLATED
   link: 'Link', // UNTRANSLATED
   unlink: 'Unlink', // UNTRANSLATED
   not_set: 'Not set', // UNTRANSLATED
+  change_avatar: 'Change avatar', // UNTRANSLATED
+  change_name: 'Change name', // UNTRANSLATED
+  change_username: 'Change username', // UNTRANSLATED
+  set_name: 'Set name', // UNTRANSLATED
+  set_password: 'Set password', // UNTRANSLATED
+  link_email: 'Link email', // UNTRANSLATED
+  enter_password: 'Enter password', // UNTRANSLATED
+  enter_verification_code: 'Enter verification code', // UNTRANSLATED
 };
 
 export default profile;

packages/phrases/src/locales/zh-cn/translation/admin-console/profile.ts

@@ -31,11 +31,19 @@ const profile = {
     dialog_paragraph_3:
       '感谢您选择 Logto Cloud。如果您有任何进一步的问题或疑虑，请随时与我们联系。',
   },
-  edit: '编辑',
-  change: '变更',
+  set: '设置',
+  change: '修改',
   link: '关联',
   unlink: '取消关联',
   not_set: '未设置',
+  change_avatar: '修改头像',
+  change_name: '修改姓名',
+  change_username: '修改用户名',
+  set_name: '设置姓名',
+  set_password: '设置密码',
+  link_email: '关联邮件',
+  enter_password: '输入密码',
+  enter_verification_code: '输入验证码',
 };
 
 export default profile;