fix(RegisterForm): inability to submit

sikka-software · Aug 29, 2024 · 5f6c1f6 · 5f6c1f6
1 parent 7ffcb33
commit 5f6c1f6
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 6 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.123
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.49.6
+
 ## 0.0.122
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.122",
+  "version": "0.0.123",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.49.6
+
+### Patch Changes
+
+- Fix inability to submit `RegisterForm` when `usernameOptions` prop is present
+
 ## 0.49.5
 
 ### Patch Changes

diff --git a/packages/components/blocks/auth/RegisterForm.tsx b/packages/components/blocks/auth/RegisterForm.tsx
@@ -311,6 +311,7 @@ export const RegisterForm: FC<RegisterFormTypes> = ({
 
             <FormProvider {...methods}>
               <form
+                id="register_form"
                 noValidate
                 onSubmit={handleSubmit((e) => {
                   if (props.onRegister) {
@@ -417,9 +418,13 @@ export const RegisterForm: FC<RegisterFormTypes> = ({
                                   width="full"
                                   autoComplete="username"
                                   label={texts?.username?.label || "Username"}
-                                  labelProps={{
-                                    ...props.usernameOptions?.label,
-                                  }}
+                                  labelProps={
+                                    props.usernameOptions?.label
+                                      ? {
+                                          ...props.usernameOptions?.label,
+                                        }
+                                      : undefined
+                                  }
                                   helperText={formState.errors.username?.message}
                                   placeholder={texts?.username?.placeholder}
                                   {...field}
@@ -642,6 +647,7 @@ export const RegisterForm: FC<RegisterFormTypes> = ({
                 <Button
                   className="hawa-w-full"
                   type="submit"
+                  form="register_form"
                   isLoading={props.isLoading}
                   disabled={props.isLoading}
                 >

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.49.5",
+  "version": "0.49.6",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.145
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.49.6
+
 ## 0.26.144
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.144",
+  "version": "0.26.145",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/stories/BlocksStories/AuthStories/Register.stories.tsx b/packages/storybook/stories/BlocksStories/AuthStories/Register.stories.tsx
@@ -228,3 +228,81 @@ export const Minimal: Story = {
     onRouteToLogin: { action: "onRouteToLogin" },
   },
 };
+
+export const Cardless: Story = {
+  render: (args: any, globals: any) => {
+    const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+    const direction = locale === "ar" ? "rtl" : "ltr";
+    setLocale(locale);
+    const [errorRegister, setErrorRegister] = useState<any>(undefined);
+
+    const handleRegister = (e: any) => {
+      console.log(e);
+    };
+    return (
+      <div className="hawa-flex hawa-w-full hawa-max-w-md hawa-flex-col hawa-gap-10">
+        <RegisterForm
+          logosOnly
+          direction={direction}
+          texts={{
+            continueWithGoogle: t("registerViaGoogleLabel"),
+            continueWithGithub: t("registerViaGithubLabel"),
+            continueWithTwitter: t("registerViaTwitterLabel"),
+            fullName: {
+              label: t("fullNameLabel"),
+              placeholder: t("fullNamePlaceholder"),
+            },
+            email: {
+              label: t("emailLabel"),
+              placeholder: t("emailPlaceholder"),
+              required: t("emailRequiredText"),
+              invalid: t("emailInvalidText"),
+            },
+            username: {
+              label: t("usernameLabel"),
+              placeholder: t("usernamePlaceholder"),
+              required: t("usernameRequired"),
+              invalid: t("usernameInvalid"),
+            },
+            phone: {
+              required: t("phoneRequiredText"),
+              invalid: t("phoneInvalid"),
+              label: t("phoneLabel"),
+              placeholder: "531045453",
+            },
+            password: {
+              label: t("passwordLabel"),
+              placeholder: t("passwordPlaceholder"),
+              required: t("passwordRequiredText"),
+              tooShort: t("passwordTooShortText"),
+            },
+            confirm: {
+              label: t("confirmPasswordLabel"),
+              placeholder: t("confirmPasswordPlaceholder"),
+              required: t("confirmPasswordRequired"),
+              dontMatch: t("passwordsDontMatch"),
+            },
+            userReference: {
+              label: t("userReferenceLabel"),
+              placeholder: t("userReferencePlaceholder"),
+            },
+            subscribeToNewsletter: t("subscribeToNewsletter"),
+            iAcceptText: t("iAcceptText"),
+            termsText: t("termsText"),
+            termsRequired: t("termsRequiredText"),
+            loginText: t("loginText"),
+            existingUserText: t("existingUserText"),
+            registerText: t("registerText"),
+            refCode: t("refCode"),
+            refCodePlaceholder: t("refCodePlaceholder"),
+          }}
+          cardless
+          errorText={t(`auth:${errorRegister}`)}
+          registerFields={["email"]}
+          showError={Boolean(errorRegister)}
+          onRegister={(e) => handleRegister(e)}
+        />
+      </div>
+    );
+  },
+};