github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: onboarding workspace name valdiation error indicator added (#3808)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-02-27 16:56:40 +05:30 committed by GitHub
parent aba170dbde
commit c858b76054
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/components/onboarding/user-details.tsx
View File

@ -62,6 +62,7 @@ export const UserDetails: React.FC<Props> = observer((props) => {
formState: { errors, isSubmitting, isValid }, formState: { errors, isSubmitting, isValid },
} = useForm<IUser>({ } = useForm<IUser>({
defaultValues, defaultValues,
mode: "onChange",
}); });
const onSubmit = async (formData: IUser) => { const onSubmit = async (formData: IUser) => {
@ -164,36 +165,38 @@ export const UserDetails: React.FC<Props> = observer((props) => {
)} )}
</button> </button>
<div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm"> <div className="flex flex-col gap-1">
<Controller <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
control={control} <Controller
name="first_name" control={control}
rules={{ name="first_name"
required: "First name is required", rules={{
maxLength: { required: "Name is required",
value: 24, maxLength: {
message: "First name cannot exceed the limit of 24 characters", value: 24,
}, message: "Name must be within 24 characters.",
}} },
render={({ field: { value, onChange, ref } }) => ( }}
<Input render={({ field: { value, onChange, ref } }) => (
id="first_name" <Input
name="first_name" id="first_name"
type="text" name="first_name"
value={value} type="text"
autoFocus={true} value={value}
onChange={(event) => { autoFocus={true}
setUserName(event.target.value); onChange={(event) => {
onChange(event); setUserName(event.target.value);
}} onChange(event);
ref={ref} }}
hasError={Boolean(errors.first_name)} ref={ref}
placeholder="Enter your full name..." hasError={Boolean(errors.first_name)}
className="w-full border-onboarding-border-100 focus:border-custom-primary-100" placeholder="Enter your full name..."
maxLength={24} className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
/> />
)} )}
/> />
</div>
{errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
</div> </div>
</div> </div>
<div className="mb-10 mt-14"> <div className="mb-10 mt-14">