feat: Update UI of signup / login pages #16710

hbjORbj · 2024-09-19T04:47:22Z

What does this PR do?

Fixes CAL-4365, 4366
Change styling of SAML button from login / signup pages
Rearrange components according to design
Change the style / text of Google Sign-in button
Decouple google sign-in from email sign-up form values (disabled prop or searchQueryParams that is added to Google auth url no longer depend on sign-up form values)

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
N/A - I have added a Docs issue here if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Test /signup and /auth/login

github-actions · 2024-09-19T04:47:33Z

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

Unknown release type "feature" found in pull request title "feature: Update UI of signup / login pages". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

linear · 2024-09-19T04:48:16Z

CAL-4365 feature: Update UI of signup / login pages

graphite-app · 2024-09-19T04:50:10Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (09/19/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (09/20/24)

1 reviewer was added to this PR based on Keith Williams's automation.

vercel · 2024-09-19T04:51:16Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Sep 23, 2024 3:20pm
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Sep 23, 2024 3:20pm

hbjORbj · 2024-09-19T04:53:03Z

apps/web/pages/signup.tsx

- {isGoogleLoginEnabled ? (
- <Button
- color="secondary"
- disabled={!!formMethods.formState.errors.username || premiumUsername}


I removed this because this will look buggy now that the email form and google sign-in button are not on the same page. Lmk what you think cc @sean-brydon

Seems fine to me!

hbjORbj · 2024-09-19T04:57:44Z

apps/web/modules/auth/login-view.tsx

+ <div className="my-8">
+ <div className="relative flex items-center">
+ <div className="border-subtle flex-grow border-t" />
+ <span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
+ {t("or").toLocaleLowerCase()}
+ </span>
+ <div className="border-subtle flex-grow border-t" />
+ </div>
+ </div>


new code added

hbjORbj · 2024-09-19T04:57:50Z

apps/web/modules/auth/login-view.tsx

+ <div className="space-y-3">
+ {isGoogleLoginEnabled && (
+ <Button
+ color="primary"


style change

hbjORbj · 2024-09-19T04:58:57Z

apps/web/pages/signup.tsx

+ </Form>
+ </div>
+ )}
+ {!displaySignupForm && (


Buttons Container starts here

hbjORbj · 2024-09-19T04:59:11Z

apps/web/pages/signup.tsx

- orgSlug
- ? `${getOrgFullOrigin(orgSlug, { protocol: true }).replace(URL_PROTOCOL_REGEX, "")}/`
- : `${process.env.NEXT_PUBLIC_WEBSITE_URL.replace(URL_PROTOCOL_REGEX, "")}/`
+ {displaySignupForm && (


Form Container starts here

hbjORbj · 2024-09-19T04:59:51Z

apps/web/modules/auth/login-view.tsx

@@ -39,15 +38,12 @@ interface LoginValues {
 }

 const GoogleIcon = () => (
- <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
+ <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon-colored.svg" alt="" />


I confirmed with Peer. No issues with icon licensing

github-actions · 2024-09-19T05:15:15Z

E2E results are ready!

Workflow #32571.1 latest results

… value

hbjORbj · 2024-09-19T05:54:49Z

apps/web/pages/signup.tsx

- }
- className={classNames(
- "w-full justify-center rounded-md text-center",
- formMethods.formState.errors.username ? "opacity-50" : ""


I removed this for the same reason as above

hbjORbj · 2024-09-19T05:57:26Z

apps/web/pages/signup.tsx

+ if (prepopulateFormValues?.username) {
+ // If username is present we save it in query params to check for premium
+ searchQueryParams.set("username", prepopulateFormValues.username);
+ localStorage.setItem("username", prepopulateFormValues.username);
+ }


I introduced changes here for username

hbjORbj · 2024-09-19T05:59:48Z

apps/web/playwright/signup.e2e.ts

@@ -10,7 +10,7 @@ import { expectInvitationEmailToBeReceived } from "./team/expects";

 test.describe.configure({ mode: "parallel" });

-test.describe("Signup Flow Test", async () => {
+test.describe("Email Signup Flow Test", async () => {


Because this test is specific for email signup flow test. We should create a new test for the new /signup page. I created a linear ticket here: https://linear.app/calcom/issue/CAL-4366/create-a-new-test-for-the-new-signup-page

UPDATE: Just did the job in this PR

hbjORbj · 2024-09-20T21:54:28Z

Next step (a separate PR): Look into what I need to change in order for org/team invites work with Google Signin; For now, the email form will appear when users open links for org/team invites

keithwillcode

We should revert the yarn.lock changes

This reverts commit b879aee.

* Revert "feat: Update UI of signup / login pages (#16710)" This reverts commit b879aee. * revert

update UI of signup, login pages

9e970b1

graphite-app bot requested a review from a team September 19, 2024 04:47

keithwillcode added consumer core area: core, team members only labels Sep 19, 2024

dosubot bot added ui area: UI, frontend, button, form, input ✨ feature New feature or request labels Sep 19, 2024

hbjORbj added the ready-for-e2e label Sep 19, 2024

remove disabled state from google sign-in

cade3ce

hbjORbj commented Sep 19, 2024

View reviewed changes

hbjORbj changed the title ~~feature: Update UI of signup / login pages~~ feat: Update UI of signup / login pages Sep 19, 2024

hbjORbj commented Sep 19, 2024

View reviewed changes

vercel bot deployed to Preview – api September 19, 2024 05:01 View deployment

Put isGoogleLoginEnabled to its place + fix displaySignupForm default…

c14d58f

… value

vercel bot deployed to Preview – api September 19, 2024 05:23 View deployment

vercel bot deployed to Preview – dev September 19, 2024 05:33 View deployment

hbjORbj added 2 commits September 19, 2024 01:53

Rename Signup flow test -> Email Signup flow test

6f90603

add data-testid to continue with email button

9f2df85

hbjORbj force-pushed the feature/new-signup-flow branch from 8c76170 to 9f2df85 Compare September 19, 2024 05:54

hbjORbj commented Sep 19, 2024

View reviewed changes

completely decouble formMethods values from google sign in

e678b33

hbjORbj commented Sep 19, 2024

View reviewed changes

vercel bot deployed to Preview – api September 19, 2024 06:08 View deployment

vercel bot deployed to Preview – dev September 19, 2024 06:25 View deployment

refactor

8cb1795

graphite-app bot requested a review from a team September 20, 2024 20:45

vercel bot deployed to Preview – api September 20, 2024 20:52 View deployment

vercel bot deployed to Preview – dev September 20, 2024 21:02 View deployment

add signup page test

0fadb58

vercel bot deployed to Preview – api September 20, 2024 22:00 View deployment

keithwillcode reviewed Sep 20, 2024

View reviewed changes

hbjORbj added 2 commits September 20, 2024 18:06

revert yarn.lock

f7f0d1b

Merge branch 'main' into feature/new-signup-flow

d850f66

vercel bot deployed to Preview – api September 20, 2024 22:20 View deployment

vercel bot deployed to Preview – dev September 20, 2024 22:24 View deployment

fix e2e test

7a60b18

vercel bot deployed to Preview – api September 20, 2024 23:46 View deployment

vercel bot deployed to Preview – dev September 20, 2024 23:55 View deployment

hbjORbj added 4 commits September 23, 2024 10:56

add saml in signup

1174f86

add saml in signin

7197223

revert

2dd2ae4

remove space

a3bfed8

hbjORbj requested a review from sean-brydon September 23, 2024 15:29

hbjORbj enabled auto-merge (squash) September 23, 2024 15:29

vercel bot deployed to Preview – api September 23, 2024 15:30 View deployment

vercel bot deployed to Preview – dev September 23, 2024 15:47 View deployment

keithwillcode approved these changes Sep 23, 2024

View reviewed changes

hbjORbj merged commit b879aee into main Sep 23, 2024
40 checks passed

hbjORbj deleted the feature/new-signup-flow branch September 23, 2024 17:27

hbjORbj added a commit that referenced this pull request Sep 24, 2024

Revert "feat: Update UI of signup / login pages (#16710)"

0333a25

This reverts commit b879aee.

emrysal pushed a commit that referenced this pull request Sep 24, 2024

fix: Revert "feat: Update UI of signup / login pages (#16710)" (#16801)

17ff01a

* Revert "feat: Update UI of signup / login pages (#16710)" This reverts commit b879aee. * revert

hbjORbj restored the feature/new-signup-flow branch September 24, 2024 20:12

zomars mentioned this pull request Oct 3, 2024

fix: Revert "feat: Update UI of signup / login pages (#16710)" #16801

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Update UI of signup / login pages #16710

feat: Update UI of signup / login pages #16710

hbjORbj commented Sep 19, 2024 •

edited

Loading

github-actions bot commented Sep 19, 2024 •

edited

Loading

linear bot commented Sep 19, 2024

graphite-app bot commented Sep 19, 2024 •

edited

Loading

vercel bot commented Sep 19, 2024 •

edited

Loading

hbjORbj Sep 19, 2024

sean-brydon Sep 19, 2024

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024

github-actions bot commented Sep 19, 2024 •

edited

Loading

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024

hbjORbj Sep 19, 2024 •

edited

Loading

hbjORbj commented Sep 20, 2024

keithwillcode left a comment

feat: Update UI of signup / login pages #16710

feat: Update UI of signup / login pages #16710

Conversation

hbjORbj commented Sep 19, 2024 • edited Loading

What does this PR do?

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

github-actions bot commented Sep 19, 2024 • edited Loading

linear bot commented Sep 19, 2024

graphite-app bot commented Sep 19, 2024 • edited Loading

Graphite Automations

vercel bot commented Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Sep 19, 2024 • edited Loading

E2E results are ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hbjORbj Sep 19, 2024 • edited Loading

Choose a reason for hiding this comment

hbjORbj commented Sep 20, 2024

keithwillcode left a comment

Choose a reason for hiding this comment

hbjORbj commented Sep 19, 2024 •

edited

Loading

github-actions bot commented Sep 19, 2024 •

edited

Loading

graphite-app bot commented Sep 19, 2024 •

edited

Loading

vercel bot commented Sep 19, 2024 •

edited

Loading

github-actions bot commented Sep 19, 2024 •

edited

Loading

hbjORbj Sep 19, 2024 •

edited

Loading