binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: input character limit error message improvement (#4271)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2024-04-24 15:17:50 +05:30 • committed by GitHub
parent fc1cffd524
commit 87737dbfbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 84 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

61
web/components/workspace/create-workspace-form.tsx
View file

@ -125,35 +125,38 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
Workspace Name
<span className="ml-0.5 text-red-500">*</span>
</label>
<Controller
control={control}
name="name"
rules={{
required: "Workspace name is required",
validate: (value) =>
/^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}}
render={({ field: { value, ref, onChange } }) => (
<Input
id="workspaceName"
type="text"
value={value}
onChange={(e) => {
onChange(e.target.value);
setValue("name", e.target.value);
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
}}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Enter workspace name..."
className="w-full"
/>
)}
/>
<div className="flex flex-col gap-1">
<Controller
control={control}
name="name"
rules={{
required: "Workspace name is required",
validate: (value) =>
/^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}}
render={({ field: { value, ref, onChange } }) => (
<Input
id="workspaceName"
type="text"
value={value}
onChange={(e) => {
onChange(e.target.value);
setValue("name", e.target.value);
setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
}}
ref={ref}
hasError={Boolean(errors.name)}
placeholder="Enter workspace name..."
className="w-full"
/>
)}
/>
<span className="text-xs text-red-500">{errors?.name?.message}</span>
</div>
</div>
<div className="space-y-1 text-sm">
<label htmlFor="workspaceUrl">