[C-3271] Implement new sign up flow email page (desktop web) by DejayJD · Pull Request #6464 · AudiusProject/apps

DejayJD · 2023-10-25T20:40:08Z

Description

UI And Email validation for the sign up page
Uses zod for string/regex validation + audius-query to check for existing emails
- Redirects to sign in on existing email
  https://www.loom.com/share/1dd6f0bc842e44c6b442bbb41c9ffe71

How Has This Been Tested?

Locally using stage. Tested with existing emails + invalid strings 👍

…jd/sign-up-email

DejayJD · 2023-10-25T20:40:55Z

@@ -0,0 +1,41 @@
+import {


This feels like we should promote this to Harmony or somewhere more reusable, would love some feedback here

Yeah I would like to have this in Harmony. Feels like we should have a place for more specific usages that doesn't take up space in the top level docs. Maybe like components/button/samples or something like that?

Yeah if we wanted to be "atomic" with it we could consider our base components our "atoms" and "pre-made extensions of our base components" our "molecules".
Idk the best term to name it tbh, maybe would also consider "extensions" or "composites/compounds" or something 🤔

I kinda like the idea of separating "core" or "base" components from the "premade extensions" though

DejayJD · 2023-10-25T20:42:57Z

 }

 export const CreatePasswordPage = (props: CreatePasswordPageProps) => {
- const { params, onNext } = props


Will create some small some merge conflicts with Nikki's PR #6443 so I guess whoever merges last gets to deal with it 😜
@nicoback2

DejayJD · 2023-10-25T20:43:34Z

@@ -0,0 +1,6 @@
+export const EMAIL_REGEX =


Converted to TS, also exported this regex to use directly

DejayJD · 2023-10-25T20:56:58Z

+ }
+ className={styles.w100}
+ onChange={(e) => {
+ // Clear errors on user change (Formik doesn't have an out of the box way to do this for you)


I added this since Formik doesnt have anything for it by default
imo its a little nicer when the error state goes away when you're typing 🤷

ah yeah i think we should create TextField component using new text-input, allows things to be much more declarative imo, should basically be a copy from existing TextField. Happy to pair on this to go over rationale.

https://github.com/AudiusProject/audius-protocol/blob/main/packages/web/src/components/form-fields/HarmonyTextField.tsx
I added this while doing my page. Needs renaming and moving whenever we find a home for it.

DejayJD · 2023-10-25T21:29:42Z

+ 'Join the revolution in music streaming! Discover, connect, and create on Audius.',
+ dividerText: 'Or, get started with one of your socials',
+ invalidEmail: 'Please enter a valid email.',
+ unknownError: 'Unknown error occurred.'


Note: need to check with design if they have a preferred messaging here.
I'm also assuming general network issues would be the only way to trigger this message?

dylanjeffers

Really great stuff! Requesting changes just so we can go over a few items:

useFormik vs Formik
TextField + more declarative style vs dynamic approach here
See if we can define "form-level validation" better

dylanjeffers · 2023-10-25T21:31:01Z

+ }
+ className={styles.w100}
+ onChange={(e) => {
+ // Clear errors on user change (Formik doesn't have an out of the box way to do this for you)


ah yeah i think we should create TextField component using new text-input, allows things to be much more declarative imo, should basically be a copy from existing TextField. Happy to pair on this to go over rationale.

dylanjeffers · 2023-10-25T21:34:25Z

+ {messages.signUp}
+ </Button>
+
+ <Text variant='body' size='l' tag='p' color='default'>


i think body defaults to p? and default color yeah? imo just applying what is necessary?

Fair. I think I personally prefer being explicit but happy to uses defaults more 👍

dylanjeffers · 2023-10-25T21:36:54Z

- const handleSubmit = useCallback(
+ const dispatch = useDispatch()
+ const navigate = useNavigateToPage()
+ const [checkEmailInUse, result] = useEmailInUse()


useIsEmailInUse? or too wordy?

Yeah I was actually wondering a bit about general naming conventions with audius-query here as well.
I almost renamed this myself but I wasn't sure if it was best practice to leave them the same name as the backend method (in this case audiusBackend.emailInUse())

dylanjeffers · 2023-10-25T21:38:08Z

 (values: SignUpEmailValues) => {
 const { email } = values
- onNext({ stage: 'create-password', params: { email } })
+ checkEmailInUse(email)


we should use the formik "isSubmitting here", and use that for the loading state on submit button, happy to pair on this.

ultimately this should be considered a "form level validation", and so lets hook it up appropriately

dylanjeffers · 2023-10-25T21:42:01Z

+ signIn: 'Sign In',
+ subHeader:
+ 'Join the revolution in music streaming! Discover, connect, and create on Audius.',
+ dividerText: 'Or, get started with one of your socials',


fine, but could we be descriptive like "socialsText"? cause it looks like a divider, but maybe be descriptive on what it actually is?

thoughts on socialsDividerText for a bit of both? 🤔

amendelsohn

Looks fantastic! Great job 👍

amendelsohn · 2023-10-25T21:34:21Z

+ return await audiusBackend.emailInUse(email)
+ },
+ options: {
+ type: 'mutation'


is this a mutation? sounds like a read operation to me

Yeah, I actually wasn't sure if this was the right approach either but I didn't see the non-mutations returning a method to manually trigger the api call? Wasn't sure if this was an intentional way to use mutation or not

is it important to manually trigger the call? even for a normal query hook it should automatically get called any time the args value changes
if you do need to call it manually, we have this
export const signUpApi = signUpApi.fetch
and elsewhere
signUpApi.emailInUse(email)

amendelsohn · 2023-10-25T21:34:57Z

+ }
+})
+
+export const { useEmailInUse } = signUpApi.hooks


use in use lol

amendelsohn · 2023-10-25T21:38:51Z

@@ -0,0 +1,41 @@
+import {
+ Button,
+ type ButtonProps,


did not know you could nest like this. neat!

amendelsohn · 2023-10-25T22:04:55Z

- </Formik>
- <Text>{messages.haveAccount}</Text>
- <Link to={SIGN_IN_PAGE}>{messages.signIn}</Link>
+ <form onSubmit={handleSubmit}>


reason we're not using formik for this?
I added a HarmonyTextField component that wraps harmony TextInput for use with formik if that's helpful

amendelsohn · 2023-10-25T22:08:00Z

+ autoFocus
+ autoComplete='email'


oh sweet. Stealing this for my page

amendelsohn · 2023-10-25T22:09:44Z

+ </Text>
+ <Divider className={styles.flex1} />
+ </Flex>
+ <Flex gap='s' w='100%' direction='row'>


nitpick, but I've been trying to use direction first. Probably a losing battle though 🤷

I wonder if we could write a custom lint command? 🤔

dylanjeffers

preemptive approval for when you get all the stuff we talked about in, great job

…jd/sign-up-email

audius-infra · 2023-10-27T19:45:48Z

Preview this change https://demo.audius.co/jd/sign-up-email

[38ac1b7] [C-3255] Sub-route logic & redirects for sign up flow (#6489) JD Francis [815df8b] [PAY-2090] Manual USDC Transfer Mobile UI (#6494) Reed [4fdd2dd] [C-3283] Improve harmony bundle (#6493) Dylan Jeffers [ca6e15e] [C-3261] Add mobile web signin UI (#6490) Andrew Mendelsohn [924c027] Add personal counts to DN aggregate routes metrics (#6484) Michelle Brier [1fc8456] [C-3271] Implement new sign up flow email page (desktop web) (#6464) JD Francis [4262e71] [PAY-1708] Update ToS/Learn More/early access links (#6491) Raymond Jacobson [157d8b7] [PAY-2043] Stop preview when purchase succeeds (#6472) Raymond Jacobson [e6027ff] [PROTO-1357] Add health UI and redirect root to it (#6482) Theo Ilie [a78356f] Filter out 0-amount challenges (#6488) Reed [086aa20] [PAY-2089] Add analytics events for users opening rewards claim modal (#6486) Randy Schott [f848217] Update iOS purchase unavailable copy (#6487) Reed [10997b6] [PAY-2013] Send event when purchase TOS clicked (#6485) Randy Schott [e176fec] Bump version to 0.5.4 audius-infra [b6da96f] Fix cooldown schedule (#6480) Reed [2bd883d] [Proposal] Add media query hook (#6469) Andrew Mendelsohn [42819cd] Hide ToS when purchase is in progress (#6479) Reed [e5de495] [PAY-1943] Separate feature flag for IOS USDC Purchase (#6478) Reed [7fab506] [PAY-2014] Add detailed purchase flow analytics (#6477) Randy Schott [3f1459c] Implement SocialButton in Harmony (#6473) JD Francis [a8fe47b] [PAY-2052] Disabled TOS while purchase in progress (#6476) Reed [7d51cfe] Use self-hosted runners for pushing images (#6467) Danny [260cd05] Harmony Text Input tweaks (design requests) (#6474) JD Francis [97cdcda] [PAY-2076][PAY-2075][PAY-2073][PAY-2026][PAY-2072][PAY-2074] Address landing page QA (#6459) Raymond Jacobson [7a222b4] [PAY-1986] Lock wallet address during stripe session creation (#6471) Randy Schott [0a5e0c0] [PAY-2051] Show preview UI when playing your own preview (#6468) Raymond Jacobson [76b14ce] [PAY-2041] Connect stripe session creation errors to analytics (#6465) Randy Schott [28a4800] Bump version to 0.5.3 audius-infra [3a176a2] Add fallbacks to SDK upload (#5970) Theo Ilie [2c71673] [C-2892 C-3253 C-3254] Add harmony-native typography (#6457) Dylan Jeffers [a9bae99] Add stylelint to harmony (#6456) Dylan Jeffers [084127a] chore: Fix chromatic args not being passed thru (#6466) JD Francis [75e517d] [C-3263] Add asChild to harmony Button (#6460) Dylan Jeffers [2add6e8] [PAY-2064] Fix misc mobile access & sale ui (#6463) Raymond Jacobson [7c58442] Update local stack postgres version (#6462) Raymond Jacobson [f6906d3] [PAY-2041] Return extended error information when stripe session creation fails (#6461) Randy Schott [f134b28] [PAY-1972] Filter out spammy accounts from explore premium tracks page (#6452) Reed [424d798] de-partition ops table (#6458) Steve Perkins [33604f8] Bump version to 0.5.2 audius-infra [fcd7dbd] [PAY-2032] Clean up userbank analytics events (#6450) Randy Schott [45a1509] [PAY-2015] Add USDC upload/edit analytics (#6449) Randy Schott [3482fe3] [C-3260, C-3236] Layout for SignIn page (web) (#6440) Andrew Mendelsohn [b81d1a2] [C-3266] Partially fix upload probers (#6451) Andrew Mendelsohn [4da1f79] Move psuedoselectors into class definition (#6455) Dylan Jeffers [049947d] Fix governance proposal release script (#6454) Raymond Jacobson [b195766] [C-3267] Use css color mixing instead of overlay/margin hack (#6453) Andrew Mendelsohn [f441b2d] [PAY-1998] Hide feed tip tile when USDC purchases is on (#6434) Raymond Jacobson [d5b7c69] [PROTO-1375] Proto dash QoL (modernization + bug fixes + performance) (#6442) Theo Ilie [de11917] Delete patch-release workflow (#6448) Theo Ilie [553bdce] [PAY-1962] Disable selectable pills during purchase (#6435) Reed [fb7f05b] Fix triggering patch-release workflow (#6447) Theo Ilie [fdcddf0] Fix cooldown summary table (#6445) Reed [d790864] Fix $AUDIO purchase (#6446) Raymond Jacobson [95792bc] Fix notifications (#6444) Raymond Jacobson [63d3c7f] refactor: Tweak Harmony button API (#6430) JD Francis [f03b0c0] [PAY-2063] Fix border colors (#6437) Raymond Jacobson [fbebfe4] Bump version to 0.5.1 audius-infra [a4047bd] Add Harmony completion check C-3246 (#6414) nicoback2 [58768e1] [PAY-2061] Hide table if no challenges summary (#6438) Raymond Jacobson [fdc4989] Add CI workflow to patch a SHA outside of release (#6439) Theo Ilie [02d767a] Filter out usdc create notifs from endpoint (#6436) Raymond Jacobson [fe53cfc] [C-3196] Add testing-library to harmony and harmony-native (#6432) Dylan Jeffers [4d9a7a5] Push dashboard in release workflow (#6433) Michelle Brier [25c7403] Fix jupiter buy-audio flow (#6429) Raymond Jacobson [25aec8b] Fix setup-dev.sh for users without .bashrc (#6428) Dylan Jeffers [f30664e] SummaryTable don't gray out last row if no SummaryItem (#6427) Reed [abbe592] Upgrade to 0.5.0 (#6426) Raymond Jacobson [428ba1a] [PAY-2012] Add analytics for purchase start/success/failure (#6425) Randy Schott [8dc22a7] Fix failing root npm install (#6424) Theo Ilie [8e2ed73] [C-3235] Fix rotating cover art (#6379) Dylan Jeffers [56f2217] Bump version to 0.4.39 audius-infra [8afa18c] [PAY-2045] Wire up content price and purchase limits (#6417) Randy Schott

DejayJD added 4 commits October 23, 2023 14:01

finish the sign up page UI
62b5a72

sign up tweaks
b0eec4c

Merge branch 'main' of github.com:AudiusProject/audius-protocol into …
87a417d
…jd/sign-up-email

Add validation logic + UI fixes & tweaks
296ac43

pull-request-sizeBot added the size/L label Oct 25, 2023

DejayJD commented Oct 25, 2023
View reviewed changes

DejayJD requested review from a team, amendelsohn and dylanjeffers October 25, 2023 20:41

DejayJD commented Oct 25, 2023
View reviewed changes

DejayJD added 3 commits October 25, 2023 15:57

use enum for status, add unknown error state handling
7aa79ee

style lint
050f84f

TS fix
db2d3b6

DejayJD changed the title ~~[C-3271] New sign up flow email page~~[C-3271] New sign up flow email page desktopOct 25, 2023

DejayJD commented Oct 25, 2023
View reviewed changes

dylanjeffers requested changes Oct 25, 2023
View reviewed changes

dylanjeffers reviewed Oct 25, 2023
View reviewed changes

quick PR feedback
4f872c3

DejayJD changed the title ~~[C-3271] New sign up flow email page desktop~~[C-3271] New sign up flow email page (desktop web)Oct 25, 2023

amendelsohn approved these changes Oct 25, 2023
View reviewed changes

more PR feedback
93e7eaa

DejayJD changed the title ~~[C-3271] New sign up flow email page (desktop web)~~[C-3271] Implement new sign up flow email page (desktop web)Oct 25, 2023

dylanjeffers approved these changes Oct 26, 2023
View reviewed changes

DejayJD added 5 commits October 26, 2023 11:14

Rework form validation logic
3f4d195

Merge branch 'main' of github.com:AudiusProject/audius-protocol into …
6749d53
…jd/sign-up-email

use harmony text field
88174b2

Merge branch 'main' of github.com:AudiusProject/audius-protocol into …
b77abce
…jd/sign-up-email

refactor social button to use harmony
340b661

DejayJD added 2 commits October 26, 2023 19:03

make signUp api not a mutation
ddb21a0

fix import
891c0d0

DejayJD merged commit 1fc8456 into mainOct 27, 2023

DejayJD deleted the jd/sign-up-email branch October 27, 2023 20:25

Uh oh!

Conversation

DejayJD commented Oct 25, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DejayJDOct 25, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dylanjeffers left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DejayJDOct 25, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amendelsohn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amendelsohnOct 25, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

amendelsohnOct 25, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DejayJD commented Oct 25, 2023•
edited
Loading

DejayJDOct 25, 2023•
edited
Loading

dylanjeffers left a comment •
edited
Loading

DejayJDOct 25, 2023•
edited
Loading

amendelsohnOct 25, 2023•
edited
Loading

amendelsohnOct 25, 2023•
edited
Loading