fix: create workspace form validation (#2958)

* fix: create workspace form validation

* fix: textfield placeholder typo

* fix: name field onchange
This commit is contained in:
Lakhan Baheti 2023-12-01 15:18:48 +05:30 committed by sriram veeraghanta
parent a276bd2301
commit a515c59518
3 changed files with 13 additions and 20 deletions

View File

@ -196,7 +196,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.token)}
placeholder="gets-sets-fays"
placeholder="gets-sets-flys"
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
/>
)}

View File

@ -24,7 +24,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount
} = useForm<IWorkspace>({
defaultValues: {
name: "",
slug: `${window.location.host}/`,
slug: "",
},
mode: "onChange",
});

View File

@ -40,8 +40,6 @@ export const Workspace: React.FC<Props> = (props) => {
const handleCreateWorkspace = async (formData: IWorkspace) => {
if (isSubmitting) return;
const slug = formData.slug.split("/");
formData.slug = slug[slug.length - 1];
await workspaceService
.workspaceSlugCheck(formData.slug)
@ -118,11 +116,7 @@ export const Workspace: React.FC<Props> = (props) => {
onChange={(event) => {
onChange(event.target.value);
setValue("name", event.target.value);
if (window && window.location.host) {
const host = window.location.host;
const slug = event.currentTarget.value.split("/");
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
}
setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"));
}}
placeholder="Enter workspace name..."
ref={ref}
@ -137,26 +131,25 @@ export const Workspace: React.FC<Props> = (props) => {
<Controller
control={control}
name="slug"
render={({ field: { value, ref } }) => (
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
render={({ field: { value, ref, onChange } }) => (
<div
className={`flex items-center px-3 relative rounded-md bg-onboarding-background-200 border ${
invalidSlug ? "border-red-500" : "border-onboarding-border-100"
} `}
>
<span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
<Input
id="slug"
name="slug"
type="text"
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
onChange={(e) => {
const host = window.location.host;
const slug = e.currentTarget.value.split("/");
if (slug.length > 1) {
/^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
} else {
setValue("slug", `${host}/`);
}
/^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true);
onChange(e.target.value.toLowerCase());
}}
ref={ref}
hasError={Boolean(errors.slug)}
className="w-full h-[46px] border-onboarding-border-100"
className="w-full h-[46px] !px-0 border-none"
/>
</div>
)}