feat: add (disabled) username field

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',

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,

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 }}>

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',