DisplayUserNameStep: fix title and subtitle, remove character minimum, progress on success

src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx

@@ -1,4 +1,3 @@
-import helpSquare from '@tabler/icons/outline/help-square-rounded.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import React, { useState } from 'react';
@@ -6,11 +5,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Button from 'soapbox/components/ui/button.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
-import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import Popover from 'soapbox/components/ui/popover.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { UsernameInput } from 'soapbox/features/edit-identity/index.tsx';
@@ -22,12 +18,9 @@ import toast from 'soapbox/toast.tsx';
 const closeIcon = xIcon;
 
 const messages = defineMessages({
-  title: { id: 'onboarding.display_identity.title', defaultMessage: 'Choose an Identity' },
+  label: { id: 'onboarding.username.label', defaultMessage: 'Username' },
-  subtitle: { id: 'onboarding.display_identity.subtitle', defaultMessage: 'You can always edit this later.' },
+  placeholder: { id: 'onboarding.username.fields.reason_placeholder', defaultMessage: 'Why do you want to be part of the {siteTitle} community?' },
-  label: { id: 'onboarding.display_identity.label', defaultMessage: 'Identity' },
+  requested: { id: 'onboarding.username.request', defaultMessage: 'Username requested' },
-  helpText: { id: 'onboarding.display_identity.help_text', defaultMessage: 'This identifier is a unique username that represents you on the platform. This username can be used to personalize your experience and facilitate communication within the community.' },
-  placeholder: { id: 'onboarding.display_identity.fields.reason_placeholder', defaultMessage: 'Why do you want to be part of the {siteTitle} community?' },
-  requested: { id: 'onboarding.display_identity.request', defaultMessage: 'Username requested' },
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
   saving: { id: 'onboarding.saving', defaultMessage: 'Saving…' },
   next: { id: 'onboarding.next', defaultMessage: 'Next' },
@@ -61,9 +54,8 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
   const [username, setUsername] = useState<string>('');
   const [reason, setReason] = useState<string>('');
 
-  const trimmedValue = username.trim();
+  const isValid = username.trim().length > 0;
-  const isValid = trimmedValue.length > 0;
+  const isDisabled = !isValid;
-  const isDisabled = !isValid || username.length > 30;
 
   const handleSubmit = () => {
     const name = `${username}@${instance.domain}`;
@@ -72,6 +64,7 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
 
     mutate({ name, reason }, {
       onSuccess() {
+        onNext();
         toast.success(intl.formatMessage(messages.requested));
         queryClient.invalidateQueries({
           queryKey: ['names', 'pending'],
@@ -85,43 +78,21 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
 
   return (
     <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
-
-      {/* <HeaderSteps onClose={onClose} title={intl.formatMessage(messages.title)} subtitle={intl.formatMessage(messages.subtitle)} /> */}
       <div className='relative w-full'>
         <IconButton src={closeIcon} onClick={onClose} className='absolute -right-2 -top-6 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
         <Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
           <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
+            <FormattedMessage id='onboarding.username.title' defaultMessage='Request a username' />
           </Text>
           <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
+            <FormattedMessage id='onboarding.username.subtitle' defaultMessage='Having an approved username will promote your account on this server.' />
           </Text>
         </Stack>
       </div>
 
       <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
         <div className='w-full sm:w-3/4'>
-          <FormGroup
+          <FormGroup labelText={intl.formatMessage(messages.label)}>
-            labelText={
-              <HStack space={2}>
-                <div>
-                  {intl.formatMessage(messages.label)}
-                </div>
-                <Popover
-                  interaction='hover' content={
-                    <Text className='w-48 text-justify sm:w-72'>
-                      {intl.formatMessage(messages.helpText)}
-                    </Text>
-                  }
-                >
-                  <div>
-                    <SvgIcon size={20} src={helpSquare} className='hover:cursor-pointer' />
-                  </div>
-                </Popover>
-
-              </HStack>
-            }
-          >
             <Stack space={4}>
               <UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />
               <Textarea

src/locales/en.json

@@ -1233,12 +1233,6 @@
   "onboarding.avatar.title": "Choose a profile picture",
   "onboarding.bio.hint": "Max 500 characters",
   "onboarding.bio.placeholder": "Tell the world a little about yourself…",
-  "onboarding.display_identity.fields.reason_placeholder": "Why do you want to be part of the {siteTitle} community?",
-  "onboarding.display_identity.help_text": "This identifier is a unique username that represents you on the platform. This username can be used to personalize your experience and facilitate communication within the community.",
-  "onboarding.display_identity.label": "Identity",
-  "onboarding.display_identity.request": "Username requested",
-  "onboarding.display_identity.subtitle": "You can always edit this later.",
-  "onboarding.display_identity.title": "Choose an Identity",
   "onboarding.display_name.label": "Display name",
   "onboarding.display_name.placeholder": "Eg. John Smith",
   "onboarding.display_name.subtitle": "You can always edit this later.",
@@ -1256,6 +1250,11 @@
   "onboarding.skip": "Skip for now",
   "onboarding.suggestions.subtitle": "Here are a few of the most popular accounts you might like.",
   "onboarding.suggestions.title": "Suggested accounts",
+  "onboarding.username.fields.reason_placeholder": "Why do you want to be part of the {siteTitle} community?",
+  "onboarding.username.label": "Username",
+  "onboarding.username.request": "Username requested",
+  "onboarding.username.subtitle": "Having an approved username will promote your account on this server.",
+  "onboarding.username.title": "Request a username",
   "onboarding.view_feed": "View Feed",
   "password_reset.confirmation": "Check your email for confirmation.",
   "password_reset.fields.email_placeholder": "E-mail address",