feat: redirect user to account info tab after registration

IQSS · Nov 28, 2024 · 884dfa6 · 884dfa6
1 parent d6c8c26
commit 884dfa6
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 6 deletions.
diff --git a/public/locales/en/account.json b/public/locales/en/account.json
@@ -14,5 +14,11 @@
     "recreateToken": "Recreate Token",
     "revokeToken": "Revoke Token",
     "createToken": "Create Token"
+  },
+  "info": {
+    "username": "Username",
+    "givenName": "Given Name",
+    "familyName": "Family Name",
+    "email": "Email"
   }
 }
diff --git a/public/locales/en/header.json b/public/locales/en/header.json
@@ -8,6 +8,7 @@
     "addData": "Add Data",
     "newCollection": "New Collection",
     "newDataset": "New Dataset",
+    "accountInfo": "Account Information",
     "apiToken": "API Token"
   }
 }
diff --git a/src/sections/account/Account.tsx b/src/sections/account/Account.tsx
@@ -3,6 +3,7 @@ import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
 import { UserJSDataverseRepository } from '@/users/infrastructure/repositories/UserJSDataverseRepository'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
+import { AccountInfoSection } from './account-info-section/AccountInfoSection'
 import styles from './Account.module.scss'
 
 const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
@@ -28,11 +29,10 @@ export const Account = ({ defaultActiveTabKey, userRepository }: AccountProps) =
         <Tabs.Tab eventKey={tabsKeys.notifications} title={t('tabs.notifications')} disabled>
           <div className={styles['tab-container']}></div>
         </Tabs.Tab>
-        <Tabs.Tab
-          eventKey={tabsKeys.accountInformation}
-          title={t('tabs.accountInformation')}
-          disabled>
-          <div className={styles['tab-container']}></div>
+        <Tabs.Tab eventKey={tabsKeys.accountInformation} title={t('tabs.accountInformation')}>
+          <div className={styles['tab-container']}>
+            <AccountInfoSection />
+          </div>
         </Tabs.Tab>
         <Tabs.Tab eventKey={tabsKeys.apiToken} title={t('tabs.apiToken')}>
           <div className={styles['tab-container']}>

diff --git a/src/sections/account/account-info-section/AccountInfoSection.tsx b/src/sections/account/account-info-section/AccountInfoSection.tsx
@@ -0,0 +1,35 @@
+import { Table } from '@iqss/dataverse-design-system'
+import { useSession } from '@/sections/session/SessionContext'
+import { useTranslation } from 'react-i18next'
+
+// TODO - Add verified email icon
+// TODO - Edit account information
+// TODO - Change password
+
+export const AccountInfoSection = () => {
+  const { t } = useTranslation('account', { keyPrefix: 'info' })
+  const { user } = useSession()
+
+  return (
+    <Table striped={false} bordered={false} borderless>
+      <tbody>
+        <tr>
+          <th scope="row">{t('username')}</th>
+          <td>{user?.identifier}</td>
+        </tr>
+        <tr>
+          <th scope="row">{t('givenName')}</th>
+          <td>{user?.firstName}</td>
+        </tr>
+        <tr>
+          <th scope="row">{t('familyName')}</th>
+          <td>{user?.lastName}</td>
+        </tr>
+        <tr>
+          <th scope="row">{t('email')}</th>
+          <td>{user?.email}</td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
diff --git a/src/sections/layout/header/LoggedInHeaderActions.tsx b/src/sections/layout/header/LoggedInHeaderActions.tsx
@@ -57,6 +57,11 @@ export const LoggedInHeaderActions = ({
         </Navbar.Dropdown.Item>
       </Navbar.Dropdown>
       <Navbar.Dropdown title={user.displayName} id="dropdown-user">
+        <Navbar.Dropdown.Item
+          as={Link}
+          to={`${Route.ACCOUNT}?${AccountHelper.ACCOUNT_PANEL_TAB_QUERY_KEY}=${AccountHelper.ACCOUNT_PANEL_TABS_KEYS.accountInformation}`}>
+          {t('navigation.accountInfo')}
+        </Navbar.Dropdown.Item>
         <Navbar.Dropdown.Item
           as={Link}
           to={`${Route.ACCOUNT}?${AccountHelper.ACCOUNT_PANEL_TAB_QUERY_KEY}=${AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken}`}>

diff --git a/src/sections/sign-up/valid-token-not-linked-account-form/FormFields.tsx b/src/sections/sign-up/valid-token-not-linked-account-form/FormFields.tsx
@@ -11,6 +11,8 @@ import { Validator } from '@/shared/helpers/Validator'
 import { type ValidTokenNotLinkedAccountFormData } from './types'
 import { ValidTokenNotLinkedAccountFormHelper } from './ValidTokenNotLinkedAccountFormHelper'
 import { TermsOfUse } from '@/info/domain/models/TermsOfUse'
+import { Route } from '@/sections/Route.enum'
+import { AccountHelper } from '@/sections/account/AccountHelper'
 import styles from './FormFields.module.scss'
 
 // TODO:ME - Maybe we should redirect to a welcome page after success? ask if there is one, maybe not the case for this scenario
@@ -68,7 +70,10 @@ export const FormFields = ({ formDefaultValues, termsOfUse }: FormFieldsProps) =
       .then(async () => {
         await refetchUserSession()
 
-        navigate('/')
+        // Navigate to Account - Account Information tab after successful registration
+        navigate(
+          `${Route.ACCOUNT}?${AccountHelper.ACCOUNT_PANEL_TAB_QUERY_KEY}=${AccountHelper.ACCOUNT_PANEL_TABS_KEYS.accountInformation}`
+        )
       })
       .catch((error: AxiosError) => {
         console.error({ error })