[C-3354, C-3396, C-3397] Sign up QA #6780

dylanjeffers · 2023-11-27T18:17:30Z

Description

Establishes "SignUp" page which sets up the root elements for sign-in/sign-up (background waves and core layout)
Updates all sign-up pages to leverage SignUp root code, which meant removing the AudiusValues and other layout aspects built into a lot of the pages
Consolidates all "Desktop" "Mobile" variants into a single file
Improves the create-email/password transitions and animations for desktop and mobile
Creates a "CreateLoginDetails" page separate from "CreatePassword" page so we can isolate the verified handle flows
A bunch of other QoL improvements

How Has This Been Tested?

I'd like cypress to start passing with this round. Otherwise confirmed ui looks correct and behaves correctly for both breakpoints.

This reverts commit 29abb47.

gitguardian · 2023-11-27T18:17:34Z

⚠️ GitGuardian has uncovered 3 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	Secret	Commit	Filename
8818104	Generic High Entropy Secret	`ab8ba45`	packages/embed/.env.prod	View secret
8818104	Generic High Entropy Secret	`ab8ba45`	packages/embed/.env.stage	View secret
8818104	Generic High Entropy Secret	`ab8ba45`	packages/embed/.env.dev	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secrets safely. Learn here the best practices.
Revoke and rotate these secrets.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

dylanjeffers · 2023-11-27T18:22:39Z

packages/common/src/audius-query/AudiusQueryContext.ts

@@ -22,3 +22,15 @@ export type AudiusQueryContextType = {
 export const AudiusQueryContext = createContext<AudiusQueryContextType | null>(
  null
 )
+
+export const useAudiusQueryContext = () => {


this prevents the null checks on all the context

dylanjeffers · 2023-11-27T18:23:10Z

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -93,7 +94,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
      })
    }

-    const iconCss = {
+    const iconCss = !isStaticIcon && {


this fixes issue where metamask icon was being slightly overriden by the button icon styles

dylanjeffers · 2023-11-27T18:23:32Z

packages/harmony/src/components/layout/Divider/Divider.tsx

@@ -36,7 +36,8 @@ export const Divider = (props: DividerProps) => {
    ...(!children &&
      orientation === 'vertical' && {
        borderRight: border,
-        alignSelf: 'stretch'
+        alignSelf: 'stretch',
+        height: 'auto'


fixes issue where vertical divider was not working in all contexts.

dylanjeffers · 2023-11-27T18:24:08Z

packages/harmony/src/components/text-link/TextLink.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof TextLink> = {
  render: (props) => (
    <Flex direction='row' gap='4xl'>
      <TextLink {...props} />
-      <TextLink {...props} _isHovered />
+      <TextLink {...props} showUnderline />


sometimes we want links to stand out from text that has the same color

audius-infra · 2023-11-27T18:30:16Z

Preview this change https://demo.audius.co/dj-c-3354-qa-round

This reverts commit 29abb47.

audius-infra · 2023-11-27T19:20:44Z

Preview this change https://demo.audius.co/dj-c-3354-qa-round

amendelsohn

🔥 Insane PR 👏

So many great changes. Awesome refactor!

amendelsohn · 2023-11-27T18:48:09Z

packages/common/src/audius-query/AudiusQueryContext.ts

+
+  if (!audiusQueryContext) {
+    throw new Error(
+      'useQueryContext has to be used within <AudiusQueryContext.Provider>'


Suggested change

'useQueryContext has to be used within <AudiusQueryContext.Provider>'

'useAudiusQueryContext has to be used within <AudiusQueryContext.Provider>'

amendelsohn · 2023-11-27T18:49:46Z

packages/harmony/src/components/layout/Paper/types.ts

   * @default white
   */
-  backgroundColor?: Exclude<BackgroundColors, 'default'>
+  backgroundColor?: BackgroundColors


bit weird now that 'default' is an option but not the default option. I guess it's ok though

could argue it's an issue with naming semantic colors 'default'

Good point, but sure why I removed that actually... will investigate

amendelsohn · 2023-11-27T18:53:49Z

packages/web/src/components/stepped-progress/SteppedProgress.tsx

      <Flex alignItems='center' gap='s'>
        {steps.map((s, i) => (
-          <>
+          <Fragment key={s.key}>


oh neat. Didn't know key worked on fragment

yeah i wish you could just apply it to the <>

amendelsohn · 2023-11-27T19:10:15Z

packages/web/src/pages/sign-on-page/SignOnPage.tsx

+            top: 0,
+            left: 0,
+            background: 'white',
+            zIndex: 1,


we've been using zIndex: 1 a lot lately. Is there merit to having some scoping built in to harmony so we're not using global z-indexes? In signup it's not likely to be a problem since everything is on its own page/overlay and it'll be obvious when something's off, but curious if this will get hairy in the rest of the app.

yeah i'd love a layering system. the zIndex: 1 is like "a layer above the base" since its all relative, but curious what css gurus think

amendelsohn · 2023-11-27T22:00:23Z

packages/web/src/pages/sign-up-page/components/FollowArtistTile.tsx

+          <IconSoundwave
+            css={{
+              opacity: '60%',
+              position: 'absolute',
+              right: spacing.s,
+              top: spacing.s,
+              zIndex: 1,
+              'g path': {
+                fill: color.icon.staticWhite
+              }
+            }}
+          />


oh this was in my todos. Thank you!

amendelsohn · 2023-11-27T22:27:43Z

packages/web/src/pages/sign-up-page/utils/passwordSchema.ts

+  .object({
+    password: z
+      .string()
+      .regex(/\d/, { message: 'hasNumber' })


are these keys for the messages object in CreatePasswordPage? Should we type them to match?

yeah they are! i agree this should be a type

amendelsohn · 2023-11-27T22:29:00Z

packages/web/src/pages/sign-up-page/utils/loginDetailsSchema.ts

+    password: z
+      .string()
+      .regex(/\d/, { message: 'hasNumber' })
+      .min(8, { message: 'minLength' })
+      .refine(isNotCommonPassword, { message: 'notCommon' }),
+    confirmPassword: z.string()


can we just merge passwordSchema?

so annoyingly you cannot merge a refined schema, since .refine returns an "effect". there appears to be no clean workaround, apart from defining the .object and .effect as separate constants, and then interleaving them back in... here is the context: colinhacks/zod#454

amendelsohn · 2023-11-27T22:31:32Z

packages/web/src/pages/sign-up-page/pages/PickHandlePage.tsx

+            <Flex gap={isMobile ? 's' : 'l'} direction='column'>
+              {isMobile ? null : (
+                <Text size='s' variant='label' color='subdued'>
+                  1 {messages.outOf} 2


could make the messages.outOf a function that takes the numerator and denominator

amendelsohn · 2023-11-27T22:32:24Z

packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx

+  const handleChangeGenre = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setCurrentGenre(e.target.value)
+  }, [])


amendelsohn · 2023-11-27T22:39:43Z

packages/web/src/pages/sign-up-page/components/NavHeader.tsx

+  const signUpState = useSelector(getSignOn)
+  if (match?.params.currentPath) {
+    const { allowedRoutes } = determineAllowedRoute(
+      signUpState,
+      match?.params.currentPath
+    )


optionally, you could make determineAllowedRoute a hook as well and it can call useSelector inside

i was so down with that, but then i saw the other reference to it was in a "render" function and i think? that cant use a hook

[97ee16b] Fix routing for legacy sign-on (#6834) Dylan Jeffers [c5f150f] [C-3374] Fix play/pause on trending mobile (#6833) Dylan Jeffers [3612090] [C-3417] Cover photos default to blurred profile photo if unset (#6811) Andrew Mendelsohn [fb74614] [PROTO-1458] Expose postgres upgrade logs in mediorum (#6830) Theo Ilie [6deaeab] [C-2591] Fix Follow All button on mobile (#6831) Andrew Mendelsohn [d952d16] [C-3453] Replace edit collection form with new fields (#6829) Andrew Mendelsohn [3ed1747] Make mobile buy buttons stick to bottom (#6827) Reed [4d02605] [PAY-2209] Use single modal for purchase and transfer (#6810) Reed [f84f24e] [PAY-2227] Set min-width for NavPopupMenu (#6826) Reed [17ca613] Auto-hide scheduled releases and index as utc (#6824) Isaac Solo [3d8fbaa] [C-3421] Add email-in-use hint (#6825) Dylan Jeffers [b88999f] [PAY-2215] Play full purchased tracks from mobile library (#6821) Reed [46c953e] Bump version to 0.5.29 audius-infra [1d688a2] Track number of blobs served from mediorum and expose metric endpoint (#6816) Michelle Brier [958ff2b] Fix merchant id (#6822) Raymond Jacobson [d168c29] [C-3403] Fix sign-up e2e (#6815) Dylan Jeffers [534a405] [PAY-2228] Add coinflow merchant id (#6820) Raymond Jacobson [fe57135] Fix analytics after vite migration (#6819) Raymond Jacobson [16fc48c] [C-3399] Fix trending links and twitter embed (#6818) Dylan Jeffers [6517400] [C-3414] Update password reset modals to use harmony components (#6817) Kyle Shanks [7f37ee2] Fix embed player playlist styles (#6813) Raymond Jacobson [1e66d4f] Bump version to 0.5.28 audius-infra [f519ae2] [PAY-2213] Fix closing Add Funds modal (#6814) Raymond Jacobson [28d7f35] Set up test jail doc & skip current flaky tests (#6774) JD Francis [0ca4675] Make DN a thin container when running locally, add createSender on DN start (#6335) Marcus Pasell [8df08b3] trending: use aggregate tables (#6806) Steve Perkins [16e2d08] [C-3389] Native harmony layout components (#6808) JD Francis [e863af4] [C-3419] Add common sign-up components (#6809) Dylan Jeffers [53772e6] [C-3415] Add confirm handle page (#6797) Dylan Jeffers [3e82b69] Negative error codes for allowing (#6807) Isaac Solo [1b7c76f] add arm builds for uptime (#6805) alecsavvy [eadeadb] Update payment router readme (#6804) Saliou Diallo [fc28641] [PAY-2208] Make payment router test e2e (#6803) Raymond Jacobson [19eed3f] Bump version to 0.5.27 audius-infra [d786864] [C-3391] Update native harmony Text component to use harmony theme values (#6798) Kyle Shanks [40c3e18] [PAY-2211] Remove borders around withdraw/purchase tab empty states (#6796) Reed [30a6674] Improve harmony font consistency (#6802) Raymond Jacobson [8c377a4] Protocol dashboard entrypoint (#6776) Michelle Brier [81ae2a1] [PAY-2219] Address Embed QA (#6801) Raymond Jacobson [a5e5d56] Fix FixedDecimal.toShorthand() for numbers less than a tenth (#6742) Marcus Pasell [00b0d25] Add Solana Relay to Discovery (#6782) Marcus Pasell [f2a8150] Fix redirect protocol (#6800) Raymond Jacobson [9ddbf19] [PAY-2220] Use slot_diff in user_bank health (#6799) Reed [12f39f1] fix: Update welcome modal cover photo to use saved cover photos (#6781) JD Francis [0c70996] [PAY-2216] DN health_check 500's if index user bank unhealthy (#6795) Reed [7f35a50] Bump version to 0.5.26 audius-infra [d8cf15c] require push-uptime to deploy (#6794) Michelle Brier [76de38b] [C-3354, C-3396, C-3397] Sign up QA (#6780) Dylan Jeffers [051c6c2] [PAY-2212] Don't grow fullWidth buttons (#6791) Reed [5fe1c83] Fix uptime ts errors (#6793) Michelle Brier [1124ae5] Fix dashboard prod deploy (#6787) Michelle Brier [2fefdad] Enable embed ci workflow on main (#6792) Raymond Jacobson [9b00279] [PROTO-1449] Make mediorum query eth directly for service providers (#6788) Theo Ilie [5bc0a23] [PAY-2176] Implement remote config hooks via context (#6778) Randy Schott [d734058] Default retry for verified user bot (#6783) Isaac Solo [d58dbb4] [PAY-2210] Change crpyto transfer modal button to secondary (#6790) Reed [9624aaa] Fix user bank indexing (#6789) Raymond Jacobson [8448c37] [PAY-2214] Change require to import in AnimatedIconbutton (#6786) Reed [26f89a8] Fix web lint (#6784) Reed [22a34b1] [PAY-2066] Buy Crypto via SOL recovery flow (#6598) Marcus Pasell [b47402a] Connect social to finish profile page, fix account header z index C-3384 (#6779) nicoback2 [d4d6b71] Bump version to 0.5.25 audius-infra [c846f7a] d contracts interface (#6767) Michelle Brier

dylanjeffers added 10 commits November 21, 2023 16:19

[C-3396] Refactor sign-up

6f42c28

Refactor password page

7d24f13

Revert "Revert "[C-3388] Improve sign-on root (#6753)" (#6764)"

57e4ed7

This reverts commit 29abb47.

Use zod in password page

aeb22a4

Improve pick handle

8d983cb

Improve auth code

8274260

Merge branch 'main' into dj-all-the-things

ab8ba45

Lots more changes

0cf4457

Fix animations, login-details-page

d6e3c59

Fix verified handle flow

2d2c721

dylanjeffers requested review from a team and sliptype and removed request for a team November 27, 2023 18:17

pull-request-size bot added the size/XXL label Nov 27, 2023

dylanjeffers requested review from a team and removed request for sliptype November 27, 2023 18:17

dylanjeffers commented Nov 27, 2023

View reviewed changes

Revert "Revert "[C-3388] Improve sign-on root (#6753)" (#6764)"

990af18

This reverts commit 29abb47.

dylanjeffers changed the title ~~[C-3354] Sign up QA~~ [C-3354, C-3396, C-3397] Sign up QA Nov 27, 2023

dylanjeffers added 2 commits November 27, 2023 11:04

Merge branch 'main' into dj-c-3354-qa-round

99c4e5d

Merge branch 'main' into dj-c-3354-qa-round

64412a2

amendelsohn approved these changes Nov 27, 2023

View reviewed changes

Address comments

469b60a

dylanjeffers merged commit 76de38b into main Nov 28, 2023
3 of 4 checks passed

dylanjeffers deleted the dj-c-3354-qa-round branch November 28, 2023 05:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-3354, C-3396, C-3397] Sign up QA #6780

[C-3354, C-3396, C-3397] Sign up QA #6780

dylanjeffers commented Nov 27, 2023 •

edited

Loading

gitguardian bot commented Nov 27, 2023 •

edited

Loading

dylanjeffers Nov 27, 2023

dylanjeffers Nov 27, 2023

dylanjeffers Nov 27, 2023

dylanjeffers Nov 27, 2023

audius-infra commented Nov 27, 2023

audius-infra commented Nov 27, 2023

amendelsohn left a comment

amendelsohn Nov 27, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 27, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

amendelsohn Nov 27, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

amendelsohn Nov 27, 2023

amendelsohn Nov 27, 2023

dylanjeffers Nov 28, 2023

	'useQueryContext has to be used within <AudiusQueryContext.Provider>'
	'useAudiusQueryContext has to be used within <AudiusQueryContext.Provider>'

[C-3354, C-3396, C-3397] Sign up QA #6780

[C-3354, C-3396, C-3397] Sign up QA #6780

Conversation

dylanjeffers commented Nov 27, 2023 • edited Loading

Description

How Has This Been Tested?

gitguardian bot commented Nov 27, 2023 • edited Loading

⚠️ GitGuardian has uncovered 3 secrets following the scan of your pull request.

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

audius-infra commented Nov 27, 2023

audius-infra commented Nov 27, 2023

amendelsohn left a 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

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

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

dylanjeffers commented Nov 27, 2023 •

edited

Loading

gitguardian bot commented Nov 27, 2023 •

edited

Loading