⚠️ [PAY-2387][PAY-2385] Web/Mobile Web: Change Email and Change Password

packages/common/package.json

@@ -56,18 +56,20 @@
  "numeral": "2.0.6",
  "proxy-memoize": "1.2.0",
  "query-string": "8.1.0",
- "redux-persist": "6.0.0",
  "react-redux": "8.0.5",
  "react-use": "17.4.0",
  "redux": "4.0.5",
+ "redux-persist": "6.0.0",
  "reselect": "4.0.0",
  "typed-redux-saga": "1.3.1",
  "typesafe-actions": "5.1.0",
  "ulid": "2.3.0",
- "zod": "3.21.4"
+ "zod": "3.21.4",
+ "zod-formik-adapter": "1.2.0"
  },
  "devDependencies": {
  "@reduxjs/toolkit": "1.6.1",
+ "@stripe/crypto": "0.0.4",
  "@types/bn.js": "5.1.0",
  "@types/jest": "29.5.7",
  "@types/lodash": "4.14.149",
@@ -78,7 +80,6 @@
  "eslint": "8.56.0",
  "jest": "29.7.0",
  "react": "18.2.0",
- "@stripe/crypto": "0.0.4",
  "ts-patch": "3.1.1",
  "typescript-transform-paths": "3.4.4"
  },

packages/common/src/hooks/index.ts

@@ -29,3 +29,5 @@ export * from './useCreateUserbankIfNeeded'
 export * from './usePurchaseMethod'
 export * from './useCoinflowAdapter'
 export * from './useIsWaitingForValidation'
+export * from './useChangePasswordFormConfiguration'
+export * from './useChangeEmailFormConfiguration'

packages/common/src/hooks/useChangeEmailFormConfiguration.ts

@@ -0,0 +1,152 @@
+import { useState, useCallback, useMemo } from 'react'
+
+import { FormikHelpers } from 'formik'
+import { z } from 'zod'
+import { toFormikValidationSchema } from 'zod-formik-adapter'
+
+import { useAudiusQueryContext } from '~/audius-query'
+import { useAppContext } from '~/context'
+import { confirmEmailSchema, emailSchema } from '~/schemas'
+
+import { isOtpMissingError } from './useChangePasswordFormConfiguration'
+
+const messages = {
+ invalidCredentials: 'Invalid credentials.',
+ somethingWrong: 'Something went wrong.',
+ passwordRequired: 'Please enter a password.',
+ emailUpdated: 'Email updated!'
+}
+
+export enum ChangeEmailPage {
+ ConfirmPassword = 0,
+ NewEmail = 1,
+ VerifyEmail = 2
+}
+
+export type ChangeEmailFormValues = {
+ email: string
+ oldEmail: string
+ password: string
+ otp: string
+}
+
+const initialValues: ChangeEmailFormValues = {
+ email: '',
+ oldEmail: '',
+ password: '',
+ otp: ''
+}
+
+const confirmPasswordFormikSchema = toFormikValidationSchema(
+ z.object({
+ password: z.string({
+ required_error: messages.passwordRequired
+ })
+ })
+)
+const verifyEmailFormikSchema = toFormikValidationSchema(confirmEmailSchema)
+
+export const useChangeEmailFormConfiguration = (onComplete: () => void) => {
+ const { audiusBackend } = useAppContext()
+ const [page, setPage] = useState(ChangeEmailPage.ConfirmPassword)
+ const audiusQueryContext = useAudiusQueryContext()
+ const EmailSchema = useMemo(
+ () => toFormikValidationSchema(emailSchema(audiusQueryContext)),
+ [audiusQueryContext]
+ )
+
+ const validationSchema =
+ page === ChangeEmailPage.ConfirmPassword
+ ? confirmPasswordFormikSchema
+ : page === ChangeEmailPage.NewEmail
+ ? EmailSchema
+ : page === ChangeEmailPage.VerifyEmail
+ ? verifyEmailFormikSchema
+ : undefined
+
+ const checkPassword = useCallback(
+ async (
+ values: ChangeEmailFormValues,
+ helpers: FormikHelpers<ChangeEmailFormValues>
+ ) => {
+ const { oldEmail, password } = values
+ const libs = await audiusBackend.getAudiusLibsTyped()
+ try {
+ const confirmed = await libs.Account?.confirmCredentials({
+ username: oldEmail,
+ password,
+ softCheck: true
+ })
+ if (confirmed) {
+ helpers.setFieldTouched('email', false)
+ setPage(ChangeEmailPage.NewEmail)
+ } else {
+ helpers.setFieldError('password', messages.invalidCredentials)
+ }
+ } catch (e) {
+ helpers.setFieldError('password', messages.invalidCredentials)
+ }
+ },
+ [setPage, audiusBackend]
+ )
+
+ const changeEmail = useCallback(
+ async (
+ values: ChangeEmailFormValues,
+ helpers: FormikHelpers<ChangeEmailFormValues>
+ ) => {
+ const { oldEmail, password, email, otp } = values
+ const sanitizedOtp = otp.replace(/\s/g, '')
+ const libs = await audiusBackend.getAudiusLibsTyped()
+
+ try {
+ // Try to change email
+ await libs.identityService!.changeEmail({
+ email,
+ otp: sanitizedOtp
+ })
+ await libs.Account!.changeCredentials({
+ newUsername: email,
+ newPassword: password,
+ oldUsername: oldEmail,
+ oldPassword: password
+ })
+ onComplete()
+ } catch (e) {
+ if (isOtpMissingError(e)) {
+ helpers.setFieldTouched('otp', false)
+ setPage(ChangeEmailPage.VerifyEmail)
+ } else {
+ helpers.setFieldError('otp', messages.invalidCredentials)
+ helpers.setFieldError('email', messages.somethingWrong)
+ }
+ }
+ },
+ [setPage, onComplete, audiusBackend]
+ )
+
+ const onSubmit = useCallback(
+ async (
+ values: ChangeEmailFormValues,
+ helpers: FormikHelpers<ChangeEmailFormValues>
+ ) => {
+ if (page === ChangeEmailPage.ConfirmPassword) {
+ await checkPassword(values, helpers)
+ } else if (page === ChangeEmailPage.VerifyEmail) {
+ await changeEmail(values, helpers)
+ } else {
+ await changeEmail(values, helpers)
+ }
+ },
+ [page, changeEmail, checkPassword]
+ )
+
+ return {
+ initialValues,
+ validateOnChange: false,
+ validationSchema,
+ onSubmit,
+ page,
+ setPage
+ }
+}