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