feature/Users who request already-taken usernames should be invited to request a new username

CHANGELOG.md

@@ -33,3 +33,5 @@
 * C4 for Quiet architecture. Context and Container diagrams.
 
 * Invite tab as default in settings
+
+* UI layer for taken usernames for desktop and mobile

packages/desktop/src/renderer/Root.tsx

@@ -31,6 +31,7 @@ import ChannelCreationModal from './components/ChannelCreationModal/ChannelCreat
 import { SaveStateComponent } from './components/SaveState/SaveStateComponent'
 import UnregisteredModalContainer from './components/widgets/userLabel/unregistered/UnregisteredModal.container'
 import DuplicateModalContainer from './components/widgets/userLabel/duplicate/DuplicateModal.container'
+import UsernameTakenModalContainer from './components/widgets/usernameTakenModal/UsernameTakenModal.container'
 // Trigger lerna
 
 export const persistor = persistStore(store)
@@ -49,6 +50,7 @@ export default () => {
                 <SearchModal />
                 <ErrorModal />
                 <LoadingPanel />
+                <UsernameTakenModalContainer />
                 <ChannelCreationModal />
                 <CreateChannel />
                 <JoinCommunity />

packages/desktop/src/renderer/components/CreateUsername/CreateUsernameComponent.tsx

@@ -4,18 +4,15 @@ import classNames from 'classnames'
 import { Controller, useForm } from 'react-hook-form'
 import Typography from '@mui/material/Typography'
 import Grid from '@mui/material/Grid'
-
 import WarningIcon from '@mui/icons-material/Warning'
-
 import Modal from '../ui/Modal/Modal'
-
 import { LoadingButton } from '../ui/LoadingButton/LoadingButton'
 import { TextInput } from '../../forms/components/textInput'
 import { userNameField } from '../../forms/fields/createUserFields'
 
 import { parseName } from '@quiet/common'
 
-const PREFIX = 'CreateUsernameComponent'
+const PREFIX = 'CreateUsernameComponent-'
 
 const classes = {
   focus: `${PREFIX}focus`,
@@ -31,6 +28,10 @@ const classes = {
   rootBar: `${PREFIX}rootBar`,
   progressBar: `${PREFIX}progressBar`,
   info: `${PREFIX}info`,
+  inputLabel: `${PREFIX}inputLabel`,
+  marginMedium: `${PREFIX}marginMedium`,
+  buttonModern: `${PREFIX}buttonModern`,
+  buttonMargin: `${PREFIX}buttonMargin`,
 }
 
 const StyledModalContent = styled(Grid)(({ theme }) => ({
@@ -81,6 +82,11 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
     fontWeight: 'normal',
   },
 
+  [`& .${classes.buttonModern}`]: {
+    borderRadius: 8,
+    width: 110,
+  },
+
   [`& .${classes.title}`]: {
     marginBottom: 24,
   },
@@ -113,6 +119,16 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
     lineHeight: '19px',
     color: theme.palette.colors.darkGray,
   },
+
+  [`& .${classes.inputLabel}`]: {
+    marginTop: 24,
+    marginBottom: 2,
+    color: theme.palette.colors.black30,
+  },
+
+  [`& .${classes.marginMedium}`]: {
+    marginTop: 24,
+  },
 }))
 
 const userFields = {
@@ -123,12 +139,19 @@ interface CreateUserValues {
   userName: string
 }
 
+export enum UsernameVariant {
+  NEW = 'new',
+  TAKEN = 'taken',
+}
+
 export interface CreateUsernameComponentProps {
   open: boolean
   registerUsername: (name: string) => void
   certificateRegistrationError?: string
   certificate?: string | null
   handleClose: () => void
+  currentUsername?: string
+  variant?: UsernameVariant
 }
 
 export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = ({
@@ -137,7 +160,12 @@ export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = (
   certificateRegistrationError,
   certificate,
   handleClose,
+  currentUsername,
+  variant = UsernameVariant.NEW,
 }) => {
+  const isNewUser = variant === UsernameVariant.NEW
+  const [isUsernameRequested, setIsUsernameRequested] = useState(false)
+
   const [formSent, setFormSent] = useState(false)
   const [userName, setUserName] = useState('')
   const [parsedNameDiffers, setParsedNameDiffers] = useState(false)
@@ -156,7 +184,12 @@ export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = (
   })
 
   const onSubmit = (values: CreateUserValues) => {
-    submitForm(registerUsername, values, setFormSent)
+    if (isNewUser) {
+      submitForm(registerUsername, values, setFormSent)
+    } else {
+      registerUsername(parseName(values.userName))
+      setIsUsernameRequested(true)
+    }
   }
 
   const submitForm = (
@@ -188,77 +221,137 @@ export const CreateUsernameComponent: React.FC<CreateUsernameComponentProps> = (
   }, [certificateRegistrationError])
 
   return (
-    <Modal open={open} handleClose={handleClose} testIdPrefix='createUsername' isCloseDisabled={true}>
+    <Modal
+      open={open}
+      handleClose={handleClose}
+      testIdPrefix='createUsername'
+      isCloseDisabled={isNewUser}
+      isBold={!isNewUser}
+      addBorder={!isNewUser}
+      title={isNewUser ? undefined : isUsernameRequested ? 'New username requested' : 'Username taken'}
+    >
       <StyledModalContent container direction='column'>
-        <>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <Grid container justifyContent='flex-start' direction='column' className={classes.fullContainer}>
-              <Typography variant='h3' className={classes.title}>
-                Register a username
-              </Typography>
-              <Typography variant='body2'>Choose your favorite username</Typography>
-              <Controller
-                control={control}
-                defaultValue={''}
-                rules={userFields.userName.validation}
-                name={'userName'}
-                render={({ field }) => (
-                  <TextInput
-                    {...userFields.userName.fieldProps}
-                    fullWidth
-                    classes={classNames({
-                      [classes.focus]: true,
-                      [classes.margin]: true,
-                      [classes.error]: errors.userName,
-                    })}
-                    placeholder={'Enter a username'}
-                    errors={errors}
-                    onPaste={e => e.preventDefault()}
-                    variant='outlined'
-                    onchange={event => {
-                      event.persist()
-                      const value = event.target.value
-                      onChange(value)
-                      // Call default
-                      field.onChange(event)
-                    }}
-                    onblur={() => {
-                      field.onBlur()
-                    }}
-                    value={field.value}
-                  />
+        {!isUsernameRequested ? (
+          <>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <Grid container justifyContent='flex-start' direction='column' className={classes.fullContainer}>
+                {isNewUser ? (
+                  <>
+                    <Typography variant='h3' className={classes.title}>
+                      Register a username
+                    </Typography>
+                    <Typography variant='body2'>Choose your favorite username</Typography>
+                  </>
+                ) : (
+                  <>
+                    <Typography variant='body2' className={classes.marginMedium}>
+                      We’re sorry, but the username <strong>{currentUsername && `@${currentUsername}`}</strong> was
+                      already claimed by someone else. <br />
+                      Can you choose another name?
+                    </Typography>
+
+                    <Typography variant='body2' className={classes.inputLabel}>
+                      Enter username
+                    </Typography>
+                  </>
                 )}
-              />
-              <div className={classes.gutter}>
-                {!errors.userName && userName.length > 0 && parsedNameDiffers && (
-                  <Grid container alignItems='center' direction='row'>
-                    <Grid item className={classes.iconDiv}>
-                      <WarningIcon className={classes.warrningIcon} />
-                    </Grid>
-                    <Grid item xs>
-                      <Typography
-                        variant='body2'
-                        className={classes.warrningMessage}
-                        data-testid={'createUserNameWarning'}
-                      >
-                        Your username will be registered as <b>{`@${userName}`}</b>
-                      </Typography>
-                    </Grid>
-                  </Grid>
+
+                <Controller
+                  control={control}
+                  defaultValue={''}
+                  rules={userFields.userName.validation}
+                  name={'userName'}
+                  render={({ field }) => (
+                    <TextInput
+                      {...userFields.userName.fieldProps}
+                      fullWidth
+                      classes={classNames({
+                        [classes.focus]: true,
+                        [classes.margin]: true,
+                        [classes.error]: errors.userName,
+                      })}
+                      placeholder={isNewUser ? 'Enter a username' : 'Username'}
+                      errors={errors}
+                      onPaste={e => e.preventDefault()}
+                      variant='outlined'
+                      onchange={event => {
+                        event.persist()
+                        const value = event.target.value
+                        onChange(value)
+                        // Call default
+                        field.onChange(event)
+                      }}
+                      onblur={() => {
+                        field.onBlur()
+                      }}
+                      value={field.value}
+                    />
+                  )}
+                />
+
+                {!isNewUser && (
+                  <Typography variant='caption' style={{ marginTop: 8 }}>
+                    Your username will be public, but you can choose any name you like. No spaces or special characters.
+                    Lowercase letters and numbers only.
+                  </Typography>
                 )}
-              </div>
-              <LoadingButton
-                variant='contained'
-                color='primary'
-                inProgress={waitingForResponse}
-                disabled={waitingForResponse}
-                type='submit'
-                text={'Register'}
-                classes={{ button: classes.button }}
-              />
-            </Grid>
-          </form>
-        </>
+                <div className={classes.gutter}>
+                  {!errors.userName && userName.length > 0 && parsedNameDiffers && (
+                    <Grid container alignItems='center' direction='row'>
+                      <Grid item className={classes.iconDiv}>
+                        <WarningIcon className={classes.warrningIcon} />
+                      </Grid>
+                      <Grid item xs>
+                        <Typography
+                          variant='body2'
+                          className={classes.warrningMessage}
+                          data-testid={'createUserNameWarning'}
+                        >
+                          Your username will be registered as <b>{`@${userName}`}</b>
+                        </Typography>
+                      </Grid>
+                    </Grid>
+                  )}
+                </div>
+                <LoadingButton
+                  variant='contained'
+                  color='primary'
+                  inProgress={waitingForResponse}
+                  disabled={waitingForResponse}
+                  type='submit'
+                  text={isNewUser ? 'Register' : 'Continue'}
+                  classes={{
+                    button: classNames({
+                      [classes.button]: true,
+                      [classes.buttonModern]: !isNewUser,
+                    }),
+                  }}
+                />
+              </Grid>
+            </form>
+          </>
+        ) : (
+          <>
+            <Typography variant='body2' className={classes.marginMedium}>
+              Great! Your new username should be registered automatically the next time the community owner is online.
+            </Typography>
+
+            <LoadingButton
+              variant='contained'
+              color='primary'
+              type='submit'
+              text={'Continue'}
+              onClick={handleClose}
+              classes={{
+                button: classNames({
+                  [classes.button]: true,
+                  [classes.buttonModern]: true,
+                  [classes.marginMedium]: true,
+                }),
+              }}
+            />
+          </>
+        )}
       </StyledModalContent>
     </Modal>
   )

packages/desktop/src/renderer/components/widgets/usernameTakenModal/UsernameTakenModal.container.tsx

@@ -0,0 +1,27 @@
+import { identity } from '@quiet/state-manager'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useModal } from '../../../containers/hooks'
+import { ModalName } from '../../../sagas/modals/modals.types'
+import CreateUsernameComponent, { UsernameVariant } from '../../CreateUsername/CreateUsernameComponent'
+
+const UsernameTakenModalContainer = () => {
+  const usernameTakenModal = useModal(ModalName.usernameTakenModal)
+
+  const enterUsername = (username: string) => {
+    console.log({ username })
+  }
+
+  const user = useSelector(identity.selectors.currentIdentity)
+
+  return (
+    <CreateUsernameComponent
+      currentUsername={user?.nickname}
+      registerUsername={enterUsername}
+      variant={UsernameVariant.TAKEN}
+      {...usernameTakenModal}
+    />
+  )
+}
+
+export default UsernameTakenModalContainer

packages/desktop/src/renderer/sagas/modals/modals.slice.ts

@@ -35,7 +35,8 @@ export class ModalsInitialState {
   [ModalName.loadingPanel] = { open: true, args: {} }; // Loading modal is open by default and closes on websocket connection
   [ModalName.channelCreationModal] = { open: false, args: {} };
   [ModalName.unregisteredUsernameModal] = { open: false, args: {} };
-  [ModalName.duplicatedUsernameModal] = { open: false, args: {} }
+  [ModalName.duplicatedUsernameModal] = { open: false, args: {} };
+  [ModalName.usernameTakenModal] = { open: false, args: {} }
 }
 
 export const modalsSlice = createSlice({

packages/desktop/src/renderer/sagas/modals/modals.types.ts

@@ -23,4 +23,5 @@ export enum ModalName {
   channelCreationModal = 'channelCreationModal',
   duplicatedUsernameModal = 'duplicatedUsernameModal',
   unregisteredUsernameModal = 'unregisteredUsernameModal',
+  usernameTakenModal = 'usernameTakenModal',
 }

packages/mobile/src/App.tsx

@@ -46,6 +46,8 @@ import { RootStackParamList } from './route.params'
 import ConnectionProcessScreen from './screens/ConnectionProcess/ConnectionProcess.screen'
 import { DuplicatedUsernameScreen } from './screens/DuplicatedUsername/DuplicatedUsername.screen'
 import { UnregisteredUsernameScreen } from './screens/UnregisteredUsername/UnregisteredUsername.screen'
+import UsernameTakenScreen from './screens/UsernameTaken/UsernameTaken.screen'
+import NewUsernameRequestedScreen from './screens/NewUsernameRequested/NewUsernameRequested.screen'
 
 LogBox.ignoreAllLogs()
 
@@ -103,6 +105,8 @@ function App(): JSX.Element {
                 <Screen component={ErrorScreen} name={ScreenNames.ErrorScreen} />
                 <Screen component={DuplicatedUsernameScreen} name={ScreenNames.DuplicatedUsernameScreen} />
                 <Screen component={UnregisteredUsernameScreen} name={ScreenNames.UnregisteredUsernameScreen} />
+                <Screen component={UsernameTakenScreen} name={ScreenNames.UsernameTakenScreen} />
+                <Screen component={NewUsernameRequestedScreen} name={ScreenNames.NewUsernameRequestedScreen} />
               </Navigator>
               <CommunityContextMenu />
               <ChannelContextMenu />