sforkowany z mirror/soapbox
Merge branch 'group-name-validation' into 'develop'
Group name validation See merge request soapbox-pub/soapbox!2388develop^2
commit
e32ea32f15
|
@ -14,6 +14,9 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @deprecated Use the UI Icon component directly.
|
||||||
|
*/
|
||||||
const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
|
const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -4,8 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
|
||||||
|
|
||||||
import { SelectDropdown } from '../features/forms';
|
import { SelectDropdown } from '../features/forms';
|
||||||
|
|
||||||
import Icon from './icon';
|
import { Icon, HStack, Select } from './ui';
|
||||||
import { HStack, Select } from './ui';
|
|
||||||
|
|
||||||
interface IList {
|
interface IList {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
|
@ -58,13 +57,13 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
|
||||||
return (
|
return (
|
||||||
<Comp
|
<Comp
|
||||||
className={clsx({
|
className={clsx({
|
||||||
'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
|
'flex items-center justify-between px-4 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10': true,
|
||||||
'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
|
'cursor-pointer hover:from-gradient-start/30 hover:to-gradient-end/30 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
|
||||||
})}
|
})}
|
||||||
{...linkProps}
|
{...linkProps}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
|
<div className='flex flex-col py-1.5 pr-4 rtl:pl-4 rtl:pr-0'>
|
||||||
<LabelComp className='text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
|
<LabelComp className='font-medium text-gray-900 dark:text-gray-100' htmlFor={domId}>{label}</LabelComp>
|
||||||
|
|
||||||
{hint ? (
|
{hint ? (
|
||||||
<span className='text-sm text-gray-700 dark:text-gray-600'>{hint}</span>
|
<span className='text-sm text-gray-700 dark:text-gray-600'>{hint}</span>
|
||||||
|
@ -83,12 +82,26 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
|
||||||
<div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
|
<div className='flex flex-row items-center text-gray-700 dark:text-gray-600'>
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
{isSelected ? (
|
<div
|
||||||
|
className={
|
||||||
|
clsx({
|
||||||
|
'flex h-6 w-6 items-center justify-center rounded-full border-2 border-solid border-primary-500 dark:border-primary-400 transition': true,
|
||||||
|
'bg-primary-500 dark:bg-primary-400': isSelected,
|
||||||
|
'bg-transparent': !isSelected,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
<Icon
|
<Icon
|
||||||
src={require('@tabler/icons/circle-check.svg')}
|
src={require('@tabler/icons/check.svg')}
|
||||||
className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
|
className={
|
||||||
|
clsx({
|
||||||
|
'h-4 w-4 text-white dark:text-white transition-all duration-500': true,
|
||||||
|
'opacity-0 scale-50': !isSelected,
|
||||||
|
'opacity-100 scale-100': isSelected,
|
||||||
|
})
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
) : null}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
|
||||||
import { submitGroupEditor } from 'soapbox/actions/groups';
|
import { submitGroupEditor } from 'soapbox/actions/groups';
|
||||||
import { Modal, Stack } from 'soapbox/components/ui';
|
import { Modal, Stack } from 'soapbox/components/ui';
|
||||||
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
|
import { useAppDispatch, useAppSelector, useDebounce } from 'soapbox/hooks';
|
||||||
|
import { useGroupValidation } from 'soapbox/hooks/api';
|
||||||
|
|
||||||
import ConfirmationStep from './steps/confirmation-step';
|
import ConfirmationStep from './steps/confirmation-step';
|
||||||
import DetailsStep from './steps/details-step';
|
import DetailsStep from './steps/details-step';
|
||||||
|
@ -34,6 +35,7 @@ interface IManageGroupModal {
|
||||||
|
|
||||||
const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
|
const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
const debounce = useDebounce;
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
const id = useAppSelector((state) => state.group_editor.groupId);
|
const id = useAppSelector((state) => state.group_editor.groupId);
|
||||||
|
@ -43,6 +45,11 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
|
||||||
|
|
||||||
const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
|
const [currentStep, setCurrentStep] = useState<Steps>(id ? Steps.TWO : Steps.ONE);
|
||||||
|
|
||||||
|
const name = useAppSelector((state) => state.group_editor.displayName);
|
||||||
|
const debouncedName = debounce(name, 300);
|
||||||
|
|
||||||
|
const { data: { isValid } } = useGroupValidation(debouncedName);
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
onClose('MANAGE_GROUP');
|
onClose('MANAGE_GROUP');
|
||||||
};
|
};
|
||||||
|
@ -92,7 +99,7 @@ const ManageGroupModal: React.FC<IManageGroupModal> = ({ onClose }) => {
|
||||||
: <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
|
: <FormattedMessage id='navigation_bar.create_group' defaultMessage='Create Group' />}
|
||||||
confirmationAction={handleNextStep}
|
confirmationAction={handleNextStep}
|
||||||
confirmationText={confirmationText}
|
confirmationText={confirmationText}
|
||||||
confirmationDisabled={isSubmitting}
|
confirmationDisabled={isSubmitting || (currentStep === Steps.TWO && !isValid)}
|
||||||
confirmationFullWidth
|
confirmationFullWidth
|
||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
>
|
>
|
||||||
|
|
|
@ -7,9 +7,9 @@ import {
|
||||||
changeGroupEditorDescription,
|
changeGroupEditorDescription,
|
||||||
changeGroupEditorMedia,
|
changeGroupEditorMedia,
|
||||||
} from 'soapbox/actions/groups';
|
} from 'soapbox/actions/groups';
|
||||||
import Icon from 'soapbox/components/icon';
|
import { Avatar, Form, FormGroup, HStack, Icon, Input, Text, Textarea } from 'soapbox/components/ui';
|
||||||
import { Avatar, Form, FormGroup, HStack, Input, Text, Textarea } from 'soapbox/components/ui';
|
import { useAppDispatch, useAppSelector, useDebounce, useInstance } from 'soapbox/hooks';
|
||||||
import { useAppDispatch, useAppSelector, useInstance } from 'soapbox/hooks';
|
import { useGroupValidation } from 'soapbox/hooks/api';
|
||||||
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
|
import { isDefaultAvatar, isDefaultHeader } from 'soapbox/utils/accounts';
|
||||||
import resizeImage from 'soapbox/utils/resize-image';
|
import resizeImage from 'soapbox/utils/resize-image';
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ const messages = defineMessages({
|
||||||
const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
|
const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
|
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-xl bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-44'
|
||||||
>
|
>
|
||||||
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
|
{src && <img className='h-full w-full object-cover' src={src} alt='' />}
|
||||||
<HStack
|
<HStack
|
||||||
|
@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
|
||||||
|
|
||||||
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
|
const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
|
||||||
return (
|
return (
|
||||||
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
|
<label className='absolute left-1/2 bottom-0 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-4 ring-white dark:ring-primary-900'>
|
||||||
{src && <Avatar src={src} size={80} />}
|
{src && <Avatar src={src} size={80} />}
|
||||||
<HStack
|
<HStack
|
||||||
alignItems='center'
|
alignItems='center'
|
||||||
|
@ -95,6 +95,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
|
||||||
|
|
||||||
const DetailsStep = () => {
|
const DetailsStep = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
const debounce = useDebounce;
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const instance = useInstance();
|
const instance = useInstance();
|
||||||
|
|
||||||
|
@ -103,6 +104,10 @@ const DetailsStep = () => {
|
||||||
const name = useAppSelector((state) => state.group_editor.displayName);
|
const name = useAppSelector((state) => state.group_editor.displayName);
|
||||||
const description = useAppSelector((state) => state.group_editor.note);
|
const description = useAppSelector((state) => state.group_editor.note);
|
||||||
|
|
||||||
|
const debouncedName = debounce(name, 300);
|
||||||
|
|
||||||
|
const { data: { isValid, message: errorMessage } } = useGroupValidation(debouncedName);
|
||||||
|
|
||||||
const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
|
const [avatarSrc, setAvatarSrc] = useState<string | null>(null);
|
||||||
const [headerSrc, setHeaderSrc] = useState<string | null>(null);
|
const [headerSrc, setHeaderSrc] = useState<string | null>(null);
|
||||||
|
|
||||||
|
@ -153,8 +158,11 @@ const DetailsStep = () => {
|
||||||
<HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
|
<HeaderPicker src={headerSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
|
||||||
<AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
|
<AvatarPicker src={avatarSrc} accept={attachmentTypes} onChange={handleFileChange} disabled={isUploading} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormGroup
|
<FormGroup
|
||||||
labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
|
labelText={<FormattedMessage id='manage_group.fields.name_label' defaultMessage='Group name (required)' />}
|
||||||
|
hintText={<FormattedMessage id='manage_group.fields.name_help' defaultMessage='This cannot be changed after the group is created.' />}
|
||||||
|
errors={isValid ? [] : [errorMessage as string]}
|
||||||
>
|
>
|
||||||
<Input
|
<Input
|
||||||
type='text'
|
type='text'
|
||||||
|
@ -164,6 +172,7 @@ const DetailsStep = () => {
|
||||||
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
|
maxLength={Number(instance.configuration.getIn(['groups', 'max_characters_name']))}
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
||||||
<FormGroup
|
<FormGroup
|
||||||
labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
|
labelText={<FormattedMessage id='manage_group.fields.description_label' defaultMessage='Description' />}
|
||||||
>
|
>
|
||||||
|
|
|
@ -17,11 +17,11 @@ const PrivacyStep = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Stack className='mx-auto max-w-sm' space={2}>
|
<Stack className='mx-auto max-w-xs py-10' space={2}>
|
||||||
<Text size='3xl' weight='bold' align='center'>
|
<Text size='3xl' weight='bold' align='center'>
|
||||||
<FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
|
<FormattedMessage id='manage_group.get_started' defaultMessage='Let’s get started!' />
|
||||||
</Text>
|
</Text>
|
||||||
<Text size='lg' theme='muted' align='center'>
|
<Text theme='muted' align='center'>
|
||||||
<FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
|
<FormattedMessage id='manage_group.tagline' defaultMessage='Groups connect you with others based on shared interests.' />
|
||||||
</Text>
|
</Text>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
import { useApi } from 'soapbox/hooks/useApi';
|
||||||
|
import { useFeatures } from 'soapbox/hooks/useFeatures';
|
||||||
|
|
||||||
|
type Validation = {
|
||||||
|
error: string
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const ValidationKeys = {
|
||||||
|
validation: (name: string) => ['group', 'validation', name] as const,
|
||||||
|
};
|
||||||
|
|
||||||
|
function useGroupValidation(name: string = '') {
|
||||||
|
const api = useApi();
|
||||||
|
const features = useFeatures();
|
||||||
|
|
||||||
|
const getValidation = async() => {
|
||||||
|
const { data } = await api.get<Validation>('/api/v1/groups/validate', {
|
||||||
|
params: { name },
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
if (error.response.status === 422) {
|
||||||
|
return { data: error.response.data };
|
||||||
|
}
|
||||||
|
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
const queryInfo = useQuery<Validation>(ValidationKeys.validation(name), getValidation, {
|
||||||
|
enabled: features.groupsValidation && !!name,
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...queryInfo,
|
||||||
|
data: {
|
||||||
|
...queryInfo.data,
|
||||||
|
isValid: !queryInfo.data?.error ?? true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export { useGroupValidation };
|
|
@ -7,6 +7,7 @@ export { useDeleteGroup } from './groups/useDeleteGroup';
|
||||||
export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
|
export { useDemoteGroupMember } from './groups/useDemoteGroupMember';
|
||||||
export { useGroup, useGroups } from './groups/useGroups';
|
export { useGroup, useGroups } from './groups/useGroups';
|
||||||
export { useGroupSearch } from './groups/useGroupSearch';
|
export { useGroupSearch } from './groups/useGroupSearch';
|
||||||
|
export { useGroupValidation } from './groups/useGroupValidation';
|
||||||
export { useJoinGroup } from './groups/useJoinGroup';
|
export { useJoinGroup } from './groups/useJoinGroup';
|
||||||
export { useLeaveGroup } from './groups/useLeaveGroup';
|
export { useLeaveGroup } from './groups/useLeaveGroup';
|
||||||
export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
|
export { usePromoteGroupMember } from './groups/usePromoteGroupMember';
|
||||||
|
|
|
@ -945,6 +945,7 @@
|
||||||
"manage_group.edit_success": "The group was edited",
|
"manage_group.edit_success": "The group was edited",
|
||||||
"manage_group.fields.description_label": "Description",
|
"manage_group.fields.description_label": "Description",
|
||||||
"manage_group.fields.description_placeholder": "Description",
|
"manage_group.fields.description_placeholder": "Description",
|
||||||
|
"manage_group.fields.name_help": "This cannot be changed after the group is created.",
|
||||||
"manage_group.fields.name_label": "Group name (required)",
|
"manage_group.fields.name_label": "Group name (required)",
|
||||||
"manage_group.fields.name_placeholder": "Group Name",
|
"manage_group.fields.name_placeholder": "Group Name",
|
||||||
"manage_group.get_started": "Let’s get started!",
|
"manage_group.get_started": "Let’s get started!",
|
||||||
|
|
|
@ -554,6 +554,11 @@ const getInstanceFeatures = (instance: Instance) => {
|
||||||
*/
|
*/
|
||||||
groupsSearch: v.software === TRUTHSOCIAL,
|
groupsSearch: v.software === TRUTHSOCIAL,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Can validate group names.
|
||||||
|
*/
|
||||||
|
groupsValidation: v.software === TRUTHSOCIAL,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Can hide follows/followers lists and counts.
|
* Can hide follows/followers lists and counts.
|
||||||
* @see PATCH /api/v1/accounts/update_credentials
|
* @see PATCH /api/v1/accounts/update_credentials
|
||||||
|
|
Ładowanie…
Reference in New Issue