From 12c27eedacd0d6b4f5bfe51ebbf6703d6b9a3769 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 18:56:33 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20move=20name=20up?=
 =?UTF-8?q?date=20to=20AccountTab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User can now update their name in a dedicated Account tab,
inspired by Jitsi design. Removed the username dialog.

Account-related updates will be operated through the advanced
settings dialog, in this dedicated tab.
---
 .../controls/Options/OptionsButton.tsx        |  5 --
 .../controls/Options/OptionsMenuItems.tsx     | 24 +-----
 .../components/dialogs/UsernameDialog.tsx     | 44 ----------
 .../components/SettingsDialogExtended.tsx     |  5 +-
 .../settings/components/tabs/AccountTab.tsx   | 81 +++++++++++++++++++
 src/frontend/src/locales/de/global.json       |  3 +-
 src/frontend/src/locales/de/rooms.json        |  7 --
 src/frontend/src/locales/de/settings.json     |  4 +-
 src/frontend/src/locales/en/global.json       |  3 +-
 src/frontend/src/locales/en/rooms.json        |  7 --
 src/frontend/src/locales/en/settings.json     |  4 +-
 src/frontend/src/locales/fr/global.json       |  3 +-
 src/frontend/src/locales/fr/rooms.json        |  7 --
 src/frontend/src/locales/fr/settings.json     |  4 +-
 src/frontend/src/primitives/Tabs.tsx          |  1 +
 15 files changed, 100 insertions(+), 102 deletions(-)
 delete mode 100644 src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
 create mode 100644 src/frontend/src/features/settings/components/tabs/AccountTab.tsx

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
index 91f0c3ce..52b27444 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx
@@ -3,7 +3,6 @@ import { RiMore2Line } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 
 import { useState } from 'react'
-import { UsernameDialog } from '@/features/rooms/livekit/components/dialogs/UsernameDialog'
 import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
 import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
 
@@ -25,10 +24,6 @@ export const OptionsButton = () => {
         </Button>
         <OptionsMenuItems onOpenDialog={setDialogOpen} />
       </Menu>
-      <UsernameDialog
-        isOpen={dialogOpen === 'username'}
-        onOpenChange={(v) => !v && setDialogOpen(null)}
-      />
       <SettingsDialogExtended
         isOpen={dialogOpen === 'settings'}
         onOpenChange={(v) => !v && setDialogOpen(null)}
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
index 8a4489ef..63b45855 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx
@@ -3,26 +3,12 @@ import {
   RiFeedbackLine,
   RiQuestionLine,
   RiSettings3Line,
-  RiUser5Line,
 } from '@remixicon/react'
-import { styled } from '@/styled-system/jsx'
-import {
-  MenuItem,
-  Menu as RACMenu,
-  Separator as RACSeparator,
-} from 'react-aria-components'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { Dispatch, SetStateAction } from 'react'
 import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
 
-const StyledSeparator = styled(RACSeparator, {
-  base: {
-    height: '1px',
-    background: 'gray.300',
-    margin: '4px 0',
-  },
-})
-
 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = ({
   onOpenDialog,
@@ -38,14 +24,6 @@ export const OptionsMenuItems = ({
         width: '300px',
       }}
     >
-      <MenuItem
-        className={menuItemRecipe({ icon: true })}
-        onAction={() => onOpenDialog('username')}
-      >
-        <RiUser5Line size={18} />
-        {t('options.items.username')}
-      </MenuItem>
-      <StyledSeparator />
       <MenuItem
         href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
         target="_blank"
diff --git a/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx b/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
deleted file mode 100644
index 3cdb768b..00000000
--- a/src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useTranslation } from 'react-i18next'
-import { Field, Form, Dialog, DialogProps } from '@/primitives'
-import {
-  usePersistentUserChoices,
-  useRoomContext,
-} from '@livekit/components-react'
-
-export type UsernameDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
-
-export const UsernameDialog = (props: UsernameDialogProps) => {
-  const { t } = useTranslation('rooms')
-  const { saveUsername } = usePersistentUserChoices()
-
-  const ctx = useRoomContext()
-  return (
-    <Dialog title={t('options.username.heading')} {...props}>
-      <Form
-        onSubmit={(data) => {
-          const { username } = data as { username: string }
-          ctx.localParticipant.setName(username)
-          saveUsername(username)
-          const { onOpenChange } = props
-          if (onOpenChange) {
-            onOpenChange(false)
-          }
-        }}
-        submitLabel={t('options.username.submitLabel')}
-      >
-        <Field
-          type="text"
-          name="username"
-          label={t('options.username.label')}
-          description={t('options.username.description')}
-          defaultValue={ctx.localParticipant.name}
-          validate={(value) => {
-            return !value ? (
-              <p>{t('options.username.validationError')}</p>
-            ) : null
-          }}
-        />
-      </Form>
-    </Dialog>
-  )
-}
diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 98e6c99c..7953e836 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -9,6 +9,7 @@ import {
   RiSettings3Line,
   RiSpeakerLine,
 } from '@remixicon/react'
+import { AccountTab } from './tabs/AccountTab'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -65,9 +66,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
-          <TabPanel flex id="1">
-            There are your profile settings
-          </TabPanel>
+          <AccountTab id="1" onOpenChange={props.onOpenChange} />
           <TabPanel flex id="2">
             There are your audio settings
           </TabPanel>
diff --git a/src/frontend/src/features/settings/components/tabs/AccountTab.tsx b/src/frontend/src/features/settings/components/tabs/AccountTab.tsx
new file mode 100644
index 00000000..a0dcde28
--- /dev/null
+++ b/src/frontend/src/features/settings/components/tabs/AccountTab.tsx
@@ -0,0 +1,81 @@
+import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
+import { Trans, useTranslation } from 'react-i18next'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
+import { css } from '@/styled-system/css'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { HStack } from '@/styled-system/jsx'
+import { useState } from 'react'
+
+export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
+  Pick<TabPanelProps, 'id'>
+
+export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => {
+  const { t } = useTranslation('settings')
+  const { saveUsername } = usePersistentUserChoices()
+  const room = useRoomContext()
+  const { user, isLoggedIn } = useUser()
+  const [name, setName] = useState(room?.localParticipant.name || '')
+
+  const handleOnSubmit = () => {
+    if (room) room.localParticipant.setName(name)
+    saveUsername(name)
+    if (onOpenChange) onOpenChange(false)
+  }
+  const handleOnCancel = () => {
+    if (onOpenChange) onOpenChange(false)
+  }
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('account.heading')}</H>
+      <Field
+        type="text"
+        label={t('account.nameLabel')}
+        value={name}
+        onChange={setName}
+        validate={(value) => {
+          return !value ? <p>{'Votre Nom ne peut pas être vide'}</p> : null
+        }}
+      />
+      <H lvl={2}>{t('account.authentication')}</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>
+        </>
+      )}
+      <HStack
+        className={css({
+          marginTop: 'auto',
+          marginLeft: 'auto',
+        })}
+      >
+        <Button onPress={handleOnCancel}>
+          {t('cancel', { ns: 'global' })}
+        </Button>
+        <Button variant={'primary'} onPress={handleOnSubmit}>
+          {t('submit', { ns: 'global' })}
+        </Button>
+      </HStack>
+    </TabPanel>
+  )
+}
diff --git a/src/frontend/src/locales/de/global.json b/src/frontend/src/locales/de/global.json
index 25aaba32..7a854ed9 100644
--- a/src/frontend/src/locales/de/global.json
+++ b/src/frontend/src/locales/de/global.json
@@ -16,5 +16,6 @@
   "logout": "",
   "notFound": {
     "heading": ""
-  }
+  },
+  "submit": "OK"
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 08429a92..c811b9bc 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -45,13 +45,6 @@
       "support": "",
       "settings": "",
       "username": ""
-    },
-    "username": {
-      "heading": "",
-      "label": "",
-      "description": "",
-      "validationError": "",
-      "submitLabel": ""
     }
   },
   "participants": {
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
index aeb9d019..e5f90fec 100644
--- a/src/frontend/src/locales/de/settings.json
+++ b/src/frontend/src/locales/de/settings.json
@@ -2,7 +2,9 @@
   "account": {
     "currentlyLoggedAs": "",
     "heading": "",
-    "youAreNotLoggedIn": ""
+    "youAreNotLoggedIn": "",
+    "nameLabel": "",
+    "authentication": ""
   },
   "dialog": {
     "heading": ""
diff --git a/src/frontend/src/locales/en/global.json b/src/frontend/src/locales/en/global.json
index abc7872a..b2ac0c8b 100644
--- a/src/frontend/src/locales/en/global.json
+++ b/src/frontend/src/locales/en/global.json
@@ -16,5 +16,6 @@
   "logout": "Logout",
   "notFound": {
     "heading": "Page not found"
-  }
+  },
+  "submit": "OK"
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 9bf62669..dd4964eb 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -45,13 +45,6 @@
       "support": "Get Help on Tchap",
       "settings": "Settings",
       "username": "Update Your Name"
-    },
-    "username": {
-      "heading": "Update Your Name",
-      "label": "Your Name",
-      "description": "All other participants will see this name.",
-      "validationError": "Name cannot be empty.",
-      "submitLabel": "Save"
     }
   },
   "participants": {
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index c640ba7b..c7519c18 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -2,7 +2,9 @@
   "account": {
     "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
     "heading": "Account",
-    "youAreNotLoggedIn": "You are not logged in."
+    "youAreNotLoggedIn": "You are not logged in.",
+    "nameLabel": "Votre Nom",
+    "authentication": "Authentication"
   },
   "dialog": {
     "heading": "Settings"
diff --git a/src/frontend/src/locales/fr/global.json b/src/frontend/src/locales/fr/global.json
index 1013c7e4..74de21d6 100644
--- a/src/frontend/src/locales/fr/global.json
+++ b/src/frontend/src/locales/fr/global.json
@@ -16,5 +16,6 @@
   "logout": "Se déconnecter",
   "notFound": {
     "heading": "Page introuvable"
-  }
+  },
+  "submit": "OK"
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 33ac61ca..7e8f63f4 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -45,13 +45,6 @@
       "support": "Obtenir de l'aide sur Tchap",
       "settings": "Paramètres",
       "username": "Choisir votre nom"
-    },
-    "username": {
-      "heading": "Choisir votre nom",
-      "label": "Votre Nom",
-      "description": "Tous les autres participants verront ce nom.",
-      "validationError": "Le nom ne peut pas être vide.",
-      "submitLabel": "Enregistrer"
     }
   },
   "participants": {
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index 2bece896..da9b6943 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -2,7 +2,9 @@
   "account": {
     "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}</0>",
     "heading": "Compte",
-    "youAreNotLoggedIn": "Vous n'êtes pas connecté."
+    "youAreNotLoggedIn": "Vous n'êtes pas connecté.",
+    "nameLabel": "Votre Nom",
+    "authentication": "Authentification"
   },
   "dialog": {
     "heading": "Paramètres"
diff --git a/src/frontend/src/primitives/Tabs.tsx b/src/frontend/src/primitives/Tabs.tsx
index f5636216..0878beb4 100644
--- a/src/frontend/src/primitives/Tabs.tsx
+++ b/src/frontend/src/primitives/Tabs.tsx
@@ -162,6 +162,7 @@ const StyledTabPanel = styled(RACTabPanel, {
         display: 'flex',
         flexGrow: 1,
         overflow: 'auto',
+        flexDirection: 'column', //fixme should be parameterizable
       },
     },
     padding: {