moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'onboarding-fixes' into 'main' 

Onboarding fixes

See merge request soapbox-pub/soapbox!3318
This commit is contained in:
Alex Gleason 2025-01-28 20:55:29 +00:00
parent e46211bdc7 7dd77b62bc
commit c84bddb466
7 changed files with 59 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/ui/components/modal-root.tsx
View File

@ -34,7 +34,7 @@ import {
MuteModal,
NostrLoginModal,
NostrSignupModal,
OnboardingFlowModal,
OnboardingModal,
ReactionsModal,
ReblogsModal,
ReplyMentionsModal,
@ -87,7 +87,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
'MUTE': MuteModal,
'NOSTR_LOGIN': NostrLoginModal,
'NOSTR_SIGNUP': NostrSignupModal,
'ONBOARDING_FLOW': OnboardingFlowModal,
'ONBOARDING': OnboardingModal,
'REACTIONS': ReactionsModal,
'REBLOGS': ReblogsModal,
'REPLY_MENTIONS': ReplyMentionsModal,

73
src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx → src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
View File

@ -12,15 +12,15 @@ import AvatarSelectionModal from './steps/avatar-step.tsx';
import BioStep from './steps/bio-step.tsx';
import CompletedModal from './steps/completed-step.tsx';
import CoverPhotoSelectionModal from './steps/cover-photo-selection-step.tsx';
import DisplayUserNameStep from './steps/display-identity-step.tsx';
import DisplayNameStep from './steps/display-name-step.tsx';
import SuggestedAccountsModal from './steps/suggested-accounts-step.tsx';
import UsernameStep from './steps/username-step.tsx';
interface IOnboardingFlowModal {
interface IOnboardingModal {
onClose(): void;
}
const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
const OnboardingModal: React.FC<IOnboardingModal> = ({ onClose }) => {
const dispatch = useAppDispatch();
const [currentStep, setCurrentStep] = useState<number>(0);
@ -49,7 +49,7 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
const steps = [
<AvatarSelectionModal onClose={handleComplete} onNext={handleNextStep} />,
<DisplayNameStep onClose={handleComplete} onNext={handleNextStep} />,
<DisplayUserNameStep onClose={handleComplete} onNext={handleNextStep} />,
<UsernameStep onClose={handleComplete} onNext={handleNextStep} />,
<BioStep onClose={handleComplete} onNext={handleNextStep} />,
<CoverPhotoSelectionModal onClose={handleComplete} onNext={handleNextStep} />,
<SuggestedAccountsModal onClose={handleComplete} onNext={handleNextStep} />,
@ -78,44 +78,41 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
return (
<Stack space={4} justifyContent='center' alignItems='center' className='relative w-full'>
<Modal width='2xl' onClose={handleComplete} theme='transparent' >
<Stack space={4}>
<ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
{steps.map((step, i) => (
<div key={i} className='w-full'>
<div
className={clsx({
'transition-opacity ease-linear': true,
'opacity-0 duration-500': currentStep !== i,
'opacity-100 duration-75': currentStep === i,
})}
>
{step}
</div>
</div>
))}
</ReactSwipeableViews>
</Stack>
<div className='relative flex w-full justify-center'>
<HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
{steps.map((_, i) => (
<button
key={i}
tabIndex={0}
onClick={() => handleDotClick(i)}
<Stack space={5} justifyContent='center' alignItems='center' className='relative w-full'>
<Modal width='2xl' onClose={handleComplete}>
<ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
{steps.map((step, i) => (
<div key={i} className='w-full'>
<div
className={clsx({
'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
'bg-primary-600': i === currentStep,
'transition-opacity ease-linear': true,
'opacity-0 duration-500': currentStep !== i,
'opacity-100 duration-75': currentStep === i,
})}
/>
))}
</HStack>
</div>
>
{step}
</div>
</div>
))}
</ReactSwipeableViews>
</Modal>
<HStack space={3} alignItems='center' justifyContent='center' className='pointer-events-auto'>
{steps.map((_, i) => (
<button
key={i}
tabIndex={0}
onClick={() => handleDotClick(i)}
className={clsx({
'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
'bg-primary-600': i === currentStep,
})}
/>
))}
</HStack>
</Stack>
);
};
export default OnboardingFlowModal;
export default OnboardingModal;

9
src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
View File

@ -11,7 +11,6 @@ import Input from 'soapbox/components/ui/input.tsx';
import Stack from 'soapbox/components/ui/stack.tsx';
import Text from 'soapbox/components/ui/text.tsx';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
import toast from 'soapbox/toast.tsx';
const closeIcon = xIcon;
@ -30,14 +29,12 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { account } = useOwnAccount();
const [value, setValue] = useState<string>(account?.display_name || '');
const [value, setValue] = useState<string>('');
const [isSubmitting, setSubmitting] = useState<boolean>(false);
const [errors, setErrors] = useState<string[]>([]);
const trimmedValue = value.trim();
const isValid = trimmedValue.length > 0;
const isDisabled = !isValid || value.length > 30;
const isValid = value.trim().length > 0;
const isDisabled = !isValid;
const hintText = useMemo(() => {
const charsLeft = 30 - value.length;

53
src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx → src/features/ui/components/modals/onboarding-flow-modal/steps/username-step.tsx
View File

@ -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,19 +18,16 @@ import toast from 'soapbox/toast.tsx';
const closeIcon = xIcon;
const messages = defineMessages({
title: { id: 'onboarding.display_identity.title', defaultMessage: 'Choose an Identity' },
subtitle: { id: 'onboarding.display_identity.subtitle', defaultMessage: 'You can always edit this later.' },
label: { id: 'onboarding.display_identity.label', defaultMessage: 'Identity' },
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' },
label: { id: 'onboarding.username.label', defaultMessage: 'Username' },
placeholder: { id: 'onboarding.username.fields.reason_placeholder', defaultMessage: 'Why do you want to be part of the {siteTitle} community?' },
requested: { id: 'onboarding.username.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' },
skip: { id: 'onboarding.skip', defaultMessage: 'Skip for now' },
});
interface IDisplayUserNameStep {
interface IUsernameStep {
onClose?(): void;
onNext: () => void;
}
@ -52,7 +45,7 @@ function useRequestName() {
});
}
const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }) => {
const UsernameStep: React.FC<IUsernameStep> = ({ onClose, onNext }) => {
const intl = useIntl();
const { instance } = useInstance();
const { mutate } = useRequestName();
@ -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 = trimmedValue.length > 0;
const isDisabled = !isValid || username.length > 30;
const isValid = username.trim().length > 0;
const isDisabled = !isValid;
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
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>
}
>
<FormGroup labelText={intl.formatMessage(messages.label)}>
<Stack space={4}>
<UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />
<Textarea
@ -156,4 +127,4 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
};
export default DisplayUserNameStep;
export default UsernameStep;

2
src/features/ui/util/async-components.ts
View File

@ -160,7 +160,7 @@ export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/comp
export const FollowedTags = lazy(() => import('soapbox/features/followed-tags/index.tsx'));
export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel.tsx'));
export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor/index.tsx'));
export const OnboardingFlowModal = lazy(() => import('soapbox/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx'));
export const OnboardingModal = lazy(() => import('soapbox/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx'));
export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx'));
export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx'));
export const EditIdentity = lazy(() => import('soapbox/features/edit-identity/index.tsx'));

2
src/init/soapbox-mount.tsx
View File

@ -41,7 +41,7 @@ const SoapboxMount = () => {
useEffect(() => {
if (showOnboarding && !showCaptcha) {
dispatch(openModal('ONBOARDING_FLOW'));
dispatch(openModal('ONBOARDING'));
}
}, [showOnboarding, showCaptcha]);

11
src/locales/en.json
View File

@ -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",