feat(console): new profile settings page (#3204)

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

@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom';
 
 import Globe from '@/assets/images/globe.svg';
 import Palette from '@/assets/images/palette.svg';
+import Profile from '@/assets/images/profile.svg';
 import SignOut from '@/assets/images/sign-out.svg';
 import Divider from '@/components/Divider';
 import Dropdown, { DropdownItem } from '@/components/Dropdown';
@@ -88,6 +89,16 @@ const UserInfo = () => {
           </div>
         </div>
         <Divider />
+        <DropdownItem
+          className={classNames(styles.dropdownItem, isLoading && styles.loading)}
+          icon={<Profile className={styles.icon} />}
+          onClick={() => {
+            navigate('/profile');
+          }}
+        >
+          {t('menu.profile')}
+        </DropdownItem>
+        <Divider />
         <SubMenu
           className={styles.dropdownItem}
           icon={<Globe className={styles.icon} />}

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

@@ -0,0 +1,31 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  width: 100%;
+  font: var(--font-label-2);
+
+  .title {
+    margin-bottom: _.unit(1);
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 0;
+    border: 1px solid var(--color-neutral-variant-90);
+    border-radius: 8px;
+
+    td {
+      height: 64px;
+      padding: 0 _.unit(6);
+      border-bottom: 1px solid var(--color-neutral-variant-90);
+
+      &:first-child {
+        width: 35%;
+      }
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import type { AdminConsoleKey } from '@logto/phrases';
+import type { Nullable } from '@silverhand/essentials';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+export type Row<T> = {
+  label: AdminConsoleKey;
+  value: T;
+  renderer?: (value: T) => ReactNode;
+};
+
+type Props<T> = {
+  title: AdminConsoleKey;
+  data: Array<Row<T>>;
+};
+
+const CardContent = <T extends Nullable<string> | undefined>({ title, data }: Props<T>) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const defaultRenderer = (value: unknown) => (value ? String(value) : t('profile.not_set'));
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{t(title)}</div>
+      <table>
+        <tbody>
+          {data.map(({ label, value, renderer = defaultRenderer }) => (
+            <tr key={label}>
+              <td>{t(label)}</td>
+              <td>{renderer(value)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CardContent;

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

@@ -0,0 +1,31 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  padding: _.unit(6) _.unit(8);
+  display: flex;
+  margin-top: _.unit(4);
+  background: var(--color-layer-1);
+  border-radius: 12px;
+}
+
+.title {
+  @include _.section-head-1;
+  width: 352px;
+  flex-shrink: 0;
+  color: var(--color-neutral-variant-60);
+}
+
+.content {
+  flex-grow: 1;
+}
+
+@media screen and (max-width: 1080px) {
+  .container {
+    flex-direction: column;
+
+    .content {
+      margin-top: _.unit(4);
+      flex-grow: unset;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { AdminConsoleKey } from '@logto/phrases';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  title: AdminConsoleKey;
+  children: ReactNode;
+};
+
+const Section = ({ title, children }: Props) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>{t(title)}</div>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default Section;

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

@@ -1,6 +1,21 @@
 @use '@/scss/underscore' as _;
 
-.container {
-  display: flex;
-  padding: _.unit(5) 0;
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+}
+
+.deleteAccount {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-divider);
+  border-radius: 8px;
+  padding: _.unit(4);
+
+  .description {
+    font: var(--font-body-2);
+    margin-right: _.unit(2);
+  }
 }

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

@@ -1,7 +1,93 @@
+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 * as resourcesStyles from '@/scss/resources.module.scss';
+
+import type { Row } from './components/CardContent';
+import CardContent from './components/CardContent';
+import Section from './components/Section';
 import * as styles from './index.module.scss';
 
 const Profile = () => {
-  return <div className={styles.container}>TODO: Add profile page</div>;
+  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]);
+
+  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>
+      {isCloud && (
+        <Section title="profile.link_account.title">
+          <CardContent
+            title="profile.link_account.email_sign_in"
+            data={[{ label: 'profile.link_account.email', value: email }]}
+          />
+        </Section>
+      )}
+      <Section title="profile.password.title">
+        <CardContent
+          title="profile.password.reset_password"
+          data={[{ label: 'profile.password.password', value: '******' }]}
+        />
+      </Section>
+      {isCloud && (
+        <Section title="profile.delete_account.title">
+          <div className={styles.deleteAccount}>
+            <div className={styles.description}>{t('profile.delete_account.description')}</div>
+            <Button
+              title="profile.delete_account.button"
+              onClick={() => {
+                console.log('Not implemented.');
+              }}
+            />
+          </div>
+        </Section>
+      )}
+    </div>
+  );
 };
 
 export default Profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Admin Konsole',
-  profile: 'Profil',
   admin_user: 'Admin',
   system_app: 'System',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Admin Console',
-  profile: 'Profile',
   admin_user: 'Admin',
   system_app: 'System',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings',
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.',
+  settings: {
+    title: 'PROFILE SETTINGS',
+    profile_information: 'Profile information',
+    avatar: 'Avatar',
+    name: 'Name',
+    username: 'Username',
+  },
+  link_account: {
+    title: 'LINK ACCOUNT',
+    email_sign_in: 'Email sign-In',
+    email: 'Email',
+    social_sign_in: 'Social sign-In',
+  },
+  password: {
+    title: 'PASSWORD & SECURITY',
+    password: 'Password',
+    reset_password: 'Reset Password',
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT',
+    label: 'Delete account',
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.',
+    button: 'Delete account',
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.",
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.',
+    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',
+  change: 'Change',
+  link: 'Link',
+  unlink: 'Unlink',
+  not_set: 'Not set',
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Admin Console',
-  profile: 'Profile',
   admin_user: 'Admin',
   system_app: 'System',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: '관리자 Console',
-  profile: '프로필',
   admin_user: '관리자',
   system_app: '시스템',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Admin Console',
-  profile: 'Perfil',
   admin_user: 'Administrador',
   system_app: 'Sistema',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Consola de Administrador',
-  profile: 'Perfil',
   admin_user: 'Administrador',
   system_app: 'Sistema',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: 'Yönetici Paneli',
-  profile: 'Profil',
   admin_user: 'Yönetici',
   system_app: 'Sistem',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,43 @@
+const profile = {
+  title: 'Account Settings', // UNTRANSLATED
+  description:
+    'Change your account settings and manage your personal information here to ensure your account security.', // UNTRANSLATED
+  settings: {
+    title: 'PROFILE SETTINGS', // UNTRANSLATED
+    profile_information: 'Profile information', // UNTRANSLATED
+    avatar: 'Avatar', // UNTRANSLATED
+    name: 'Name', // UNTRANSLATED
+    username: 'Username', // UNTRANSLATED
+  },
+  link_account: {
+    title: 'LINK ACCOUNT', // UNTRANSLATED
+    email_sign_in: 'Email sign-In', // UNTRANSLATED
+    email: 'Email', // UNTRANSLATED
+    social_sign_in: 'Social sign-In', // UNTRANSLATED
+  },
+  password: {
+    title: 'PASSWORD & SECURITY', // UNTRANSLATED
+    password: 'Password', // UNTRANSLATED
+    reset_password: 'Reset Password', // UNTRANSLATED
+  },
+  delete_account: {
+    title: 'DELETE ACCOUNT', // UNTRANSLATED
+    label: 'Delete account', // UNTRANSLATED
+    description:
+      'Deleting your account will remove all of your personal information, user data, and configuration. This action cannot be undone.', // UNTRANSLATED
+    button: 'Delete account', // UNTRANSLATED
+    dialog_paragraph_1:
+      "We're sorry to hear that you want to delete your account. Deleting your account will permanently remove all data, including user information, logs, and settings, and this action cannot be undone. So please make sure to backup any important data before proceeding.", // UNTRANSLATED
+    dialog_paragraph_2:
+      'To proceed with the account deletion process, please email our support team at <a>mail</a> with the subject “Account Deletion Request”. We will assist you and ensure that all of your data is properly deleted from our system.', // UNTRANSLATED
+    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
+  change: 'Change', // UNTRANSLATED
+  link: 'Link', // UNTRANSLATED
+  unlink: 'Unlink', // UNTRANSLATED
+  not_set: 'Not set', // UNTRANSLATED
+};
+
+export default profile;

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

@@ -14,6 +14,7 @@ import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
 import permissions from './permissions.js';
+import profile from './profile.js';
 import role_details from './role-details.js';
 import roles from './roles.js';
 import session_expired from './session-expired.js';
@@ -27,7 +28,6 @@ import welcome from './welcome.js';
 
 const admin_console = {
   title: '管理控制台',
-  profile: '帐户管理',
   admin_user: '管理员',
   system_app: '系统应用',
   menu,
@@ -56,6 +56,7 @@ const admin_console = {
   role_details,
   permissions,
   cloud,
+  profile,
 };
 
 export default admin_console;

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

@@ -0,0 +1,41 @@
+const profile = {
+  title: '账户管理',
+  description: '在这里，你可以修改账户设置和管理个人信息，以确保账户安全。',
+  settings: {
+    title: '账户设置',
+    profile_information: '个人信息',
+    avatar: '头像',
+    name: '姓名',
+    username: '用户名',
+  },
+  link_account: {
+    title: '关联账户',
+    email_sign_in: '邮件登录',
+    email: '邮件',
+    social_sign_in: '社交账号登录',
+  },
+  password: {
+    title: '密码和安全',
+    password: '密码',
+    reset_password: '重置密码',
+  },
+  delete_account: {
+    title: '删除账户',
+    label: '删除账户',
+    description: '删除账户将会删除所有个人信息、用户数据和配置。此操作无法撤销。',
+    button: '删除账户',
+    dialog_paragraph_1:
+      '很抱歉听到您想要删除您的帐户。删除您的帐户将永久删除所有数据，包括用户信息、日志和设置，此操作无法撤销。因此，请确保在继续之前备份任何重要数据。',
+    dialog_paragraph_2:
+      '要继续删除帐户的删除过程，请通过 <a>mail</a> 向我们的支持团队发送主题为“帐户删除请求”的邮件。我们将协助您并确保所有数据都已从我们的系统中正确删除。',
+    dialog_paragraph_3:
+      '感谢您选择 Logto Cloud。如果您有任何进一步的问题或疑虑，请随时与我们联系。',
+  },
+  edit: '编辑',
+  change: '变更',
+  link: '关联',
+  unlink: '取消关联',
+  not_set: '未设置',
+};
+
+export default profile;