From 671aa688044dba2505de82ab577588ca72fe778a Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 6 Aug 2024 17:49:02 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20restore=20User?=
 =?UTF-8?q?=20Information=20in=20Settings=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reintroduced user information in the settings dialog. This change allows
users to see the account they are logged into, which is important for
account management. An additional feature to update usernames will be
added soon. Apologies to @manuhabitela for the oversight.
---
 .../settings/components/SettingsDialog.tsx    | 28 +++++++++++++++++--
 src/frontend/src/locales/de/settings.json     |  5 ++++
 src/frontend/src/locales/en/settings.json     |  5 ++++
 src/frontend/src/locales/fr/settings.json     |  5 ++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx
index ea4aabfa..079a5699 100644
--- a/src/frontend/src/features/settings/components/SettingsDialog.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx
@@ -1,14 +1,38 @@
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { Dialog, type DialogProps, Field, H } from '@/primitives'
+import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 
 export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
 
 export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
+  const { user, isLoggedIn } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
     <Dialog title={t('dialog.heading')} {...props}>
+      <H lvl={2}>{t('account.heading')}</H>
+      {isLoggedIn ? (
+        <>
+          <P>
+            <Trans
+              i18nKey="settings:account.currentlyLoggedAs"
+              values={{ user: user?.email }}
+              components={[<Badge />]}
+            />
+          </P>
+          <P>
+            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
+          </P>
+        </>
+      ) : (
+        <>
+          <P>{t('account.youAreNotLoggedIn')}</P>
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
+        </>
+      )}
       <H lvl={2}>{t('language.heading')}</H>
       <Field
         type="select"
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
index 8b402ca9..65808b8c 100644
--- a/src/frontend/src/locales/de/settings.json
+++ b/src/frontend/src/locales/de/settings.json
@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "",
+    "heading": "",
+    "youAreNotLoggedIn": ""
+  },
   "dialog": {
     "heading": ""
   },
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index e10ef8c5..e6b9051d 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
+    "heading": "Account",
+    "youAreNotLoggedIn": "You are not logged in."
+  },
   "dialog": {
     "heading": "Settings"
   },
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index a9c260e1..d5ddea2c 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}</0>",
+    "heading": "Compte",
+    "youAreNotLoggedIn": "Vous n'êtes pas connecté."
+  },
   "dialog": {
     "heading": "Paramètres"
   },