From 0ef54b6a7a9aff93754ed1634aa762996d136290 Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Thu, 8 Aug 2024 16:37:51 +0100
Subject: [PATCH] feat: add (disabled) username field

---
 packages/themes/src/common/commonStyles.ts      |  4 ++++
 .../UserSettings/SettingsPageUserProfile.tsx    |  1 +
 .../content/sections/UserInfos.section.tsx      | 17 ++++++++++++++++-
 src/pages/UserSettings/labels.ts                |  5 +++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/themes/src/common/commonStyles.ts b/packages/themes/src/common/commonStyles.ts
index a09cc0cbe7..a7a8fafb3a 100644
--- a/packages/themes/src/common/commonStyles.ts
+++ b/packages/themes/src/common/commonStyles.ts
@@ -6,6 +6,10 @@ export const commonStyles = {
       outline: 'none',
       boxShadow: 'none',
     },
+    '&:disabled': {
+      color: 'lightgrey',
+      cursor: 'not-allowed',
+    },
   },
   colors: {
     white: 'white',
diff --git a/src/pages/UserSettings/SettingsPageUserProfile.tsx b/src/pages/UserSettings/SettingsPageUserProfile.tsx
index de03d7d825..c7d9458fba 100644
--- a/src/pages/UserSettings/SettingsPageUserProfile.tsx
+++ b/src/pages/UserSettings/SettingsPageUserProfile.tsx
@@ -100,6 +100,7 @@ export const SettingsPageUserProfile = () => {
   const initialValues = {
     profileType: user?.profileType || ProfileType.MEMBER,
     displayName: user?.displayName || null,
+    userName: user?.userName,
     links,
     location: user?.location || null,
     about: user?.about || null,
diff --git a/src/pages/UserSettings/content/sections/UserInfos.section.tsx b/src/pages/UserSettings/content/sections/UserInfos.section.tsx
index 2167aeb846..bdfe83ab44 100644
--- a/src/pages/UserSettings/content/sections/UserInfos.section.tsx
+++ b/src/pages/UserSettings/content/sections/UserInfos.section.tsx
@@ -25,7 +25,7 @@ interface IProps {
 export const UserInfosSection = ({ formValues }: IProps) => {
   const { profileType, links, location } = formValues
   const isMemberProfile = profileType === ProfileType.MEMBER
-  const { about, country, displayName } = fields
+  const { about, country, displayName, userName } = fields
 
   const noMapPin = !location?.latlng
 
@@ -36,6 +36,21 @@ export const UserInfosSection = ({ formValues }: IProps) => {
         sx={{ flexDirection: 'column', gap: [3, 5] }}
       >
         <Heading as="h2">{headings.infos}</Heading>
+        <Flex sx={{ flexDirection: 'column', gap: 1 }}>
+          <Text>{`${userName.title} *`}</Text>
+          <Text variant="quiet" sx={{ fontSize: 2 }}>
+            {userName.description}
+          </Text>
+          <Field
+            data-cy="userName"
+            name="userName"
+            component={FieldInput}
+            validate={required}
+            validateFields={[]}
+            disabled
+          />
+        </Flex>
+
         <Flex sx={{ flexDirection: 'column', gap: 1 }}>
           <Text>{`${displayName.title} *`}</Text>
           <Text variant="quiet" sx={{ fontSize: 2 }}>
diff --git a/src/pages/UserSettings/labels.ts b/src/pages/UserSettings/labels.ts
index 732580240e..4e4e459107 100644
--- a/src/pages/UserSettings/labels.ts
+++ b/src/pages/UserSettings/labels.ts
@@ -126,6 +126,11 @@ export const fields: ILabels = {
   repeatNewPassword: {
     title: 'Repeat new password',
   },
+  userName: {
+    title: 'Username',
+    description:
+      "You set this when you signed up and it can't be changed now. Sorry.",
+  },
   workspaceType: {
     description: 'What kind of Precious Plastic workspace do you run?',
     error: 'Please select your workspace type',