From a75ef8870bc688ae56bba45b4f9148d5e8244b91 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Fri, 1 Dec 2023 08:56:19 +0000 Subject: [PATCH] fix: signup nit (#12585) * Disable submit on empty form * Fix submit --------- Co-authored-by: Peer Richelsen --- apps/web/pages/signup.tsx | 73 ++++++++++++------- .../organization-invitation.e2e.ts | 6 +- .../playwright/team/team-invitation.e2e.ts | 6 +- apps/web/public/static/locales/en/common.json | 4 +- 4 files changed, 54 insertions(+), 35 deletions(-) diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx index af52ed9894..6f1002cbb6 100644 --- a/apps/web/pages/signup.tsx +++ b/apps/web/pages/signup.tsx @@ -122,21 +122,23 @@ function UsernameField({ /> {(!formState.isSubmitting || !formState.isSubmitted) && (
-

+

{usernameTaken ? ( -
+
- {t("already_in_use_error")} +

{t("already_in_use_error")}

) : premium ? ( -
+
- {t("premium_username", { - price: getPremiumPlanPriceValue(), - })} +

+ {t("premium_username", { + price: getPremiumPlanPriceValue(), + })} +

) : null} -

+
)}
@@ -161,6 +163,7 @@ export default function Signup({ }: SignupProps) { const [premiumUsername, setPremiumUsername] = useState(false); const [usernameTaken, setUsernameTaken] = useState(false); + const [isGoogleLoading, setIsGoogleLoading] = useState(false); const searchParams = useCompatSearchParams(); const telemetry = useTelemetry(); @@ -245,21 +248,21 @@ export default function Signup({ "--cal-brand-subtle": "#9CA3AF", } as CSSProperties }> -
+
-
+
{/* Header */} {errors.apiError && ( )} -
-

+
+

{IS_CALCOM ? t("create_your_calcom_account") : t("create_your_account")}

{IS_CALCOM ? ( -

{t("cal_signup_description")}

+

{t("cal_signup_description")}

) : ( -

+

{t("calcom_explained", { appName: APP_NAME, })} @@ -318,6 +321,8 @@ export default function Signup({ disabled={ !!formMethods.formState.errors.username || !!formMethods.formState.errors.email || + !formMethods.getValues("email") || + !formMethods.getValues("password") || usernameTaken }> {premiumUsername && !usernameTaken @@ -344,11 +349,22 @@ export default function Signup({ ) : null} @@ -410,17 +421,20 @@ export default function Signup({ )}

{/* Already have an account & T&C */} -
+
- - {t("already_have_account")} - +
+

{t("already_have_account")}

+ + {t("sign_in")} + +
By signing up, you agree to our{" "} - Terms of Service{" "} + Terms{" "} - and{" "} + &{" "} Privacy Policy. @@ -428,7 +442,12 @@ export default function Signup({
-
+
{IS_CALCOM && (
@@ -443,7 +462,7 @@ export default function Signup({
)}
diff --git a/apps/web/playwright/organization/organization-invitation.e2e.ts b/apps/web/playwright/organization/organization-invitation.e2e.ts index f84c639665..2166b9dcad 100644 --- a/apps/web/playwright/organization/organization-invitation.e2e.ts +++ b/apps/web/playwright/organization/organization-invitation.e2e.ts @@ -48,8 +48,6 @@ test.describe("Organization", () => { await newPage.waitForLoadState("networkidle"); // Check required fields - await newPage.locator("button[type=submit]").click(); - await expect(newPage.locator(".text-red-700")).toHaveCount(3); // 3 password hints await newPage.locator("input[name=password]").fill(`P4ssw0rd!`); await newPage.locator("button[type=submit]").click(); await newPage.waitForURL("/getting-started?from=signup"); @@ -78,8 +76,8 @@ test.describe("Organization", () => { await inviteLinkPage.waitForLoadState("networkidle"); // Check required fields - await inviteLinkPage.locator("button[type=submit]").click(); - await expect(inviteLinkPage.locator(".text-red-700")).toHaveCount(4); // email + 3 password hints + const button = inviteLinkPage.locator("button[type=submit][disabled]"); + await expect(button).toBeVisible(); // email + 3 password hints // Happy path await inviteLinkPage.locator("input[name=email]").fill(`rick@domain-${Date.now()}.com`); diff --git a/apps/web/playwright/team/team-invitation.e2e.ts b/apps/web/playwright/team/team-invitation.e2e.ts index 40308fdd71..44f085cad0 100644 --- a/apps/web/playwright/team/team-invitation.e2e.ts +++ b/apps/web/playwright/team/team-invitation.e2e.ts @@ -51,8 +51,10 @@ test.describe("Team", () => { await newPage.waitForLoadState("networkidle"); // Check required fields - await newPage.locator("button[type=submit]").click(); - await expect(newPage.locator('[data-testid="hint-error"]')).toHaveCount(3); + const button = newPage.locator("button[type=submit][disabled]"); + await expect(button).toBeVisible(); // email + 3 password hints + + // Check required fields await newPage.locator("input[name=password]").fill(`P4ssw0rd!`); await newPage.locator("button[type=submit]").click(); await newPage.waitForURL("/getting-started?from=signup"); diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index de359414e0..5c0bc42a19 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -78,7 +78,7 @@ "cannot_repackage_codebase": "You can not repackage or sell the codebase", "acquire_license": "Acquire a commercial license to remove these terms by emailing", "terms_summary": "Summary of terms", - "signing_up_terms":"By signing up, you agree to our <2>Terms of Service and <3>Privacy Policy.", + "signing_up_terms":"By signing up you agree to our <2>Terms & <3>Privacy Policy.", "open_env": "Open .env and agree to our License", "env_changed": "I've changed my .env", "accept_license": "Accept License", @@ -1607,7 +1607,7 @@ "enable_apps": "Enable Apps", "enable_apps_description": "Enable apps that users can integrate with {{appName}}", "purchase_license": "Purchase a License", - "already_have_account":"I already have an account", + "already_have_account":"Already have an account?", "already_have_key": "I already have a key:", "already_have_key_suggestion": "Please copy your existing CALCOM_LICENSE_KEY environment variable here.", "app_is_enabled": "{{appName}} is enabled",