@graphcommerce/magento-customer 6.2.0-canary.43 → 6.2.0-canary.45

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 6.2.0-canary.45
+
+### Minor Changes
+
+- [#1962](https://github.com/graphcommerce-org/graphcommerce/pull/1962) [`518b6ca24`](https://github.com/graphcommerce-org/graphcommerce/commit/518b6ca248fc94624dc06eb02de5b3eac0fc9483) - Created a new `<ValidatedPasswordElement/>` which validates according to Magento's validation groups and implement on all locations. Move remaining password fields to `<PasswordElement />` ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.44
+
 ## 6.2.0-canary.43
 
 ## 6.2.0-canary.42

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -1,3 +1,9 @@
+import {
+  ApolloErrorSnackbar,
+  PasswordElement,
+  PasswordRepeatElement,
+} from '@graphcommerce/ecommerce-ui'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import {
   Form,
   FormActions,
@@ -7,10 +13,8 @@ import {
   Button,
 } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
-import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import {
   ChangePasswordDocument,
   ChangePasswordMutation,
@@ -21,55 +25,61 @@ export function ChangePasswordForm() {
   const form = useFormGqlMutation<
     ChangePasswordMutation,
     ChangePasswordMutationVariables & { confirmPassword?: string }
-  >(ChangePasswordDocument)
-  const { muiRegister, handleSubmit, required, watch, data, formState, error } = form
+  >(ChangePasswordDocument, {}, { errorPolicy: 'all' })
+  const { handleSubmit, required, data, formState, error, control } = form
+  const [remainingError0, authenticationError] = graphqlErrorByCategory({
+    category: 'graphql-authentication',
+    error,
+  })
+  const [remainingError, inputError] = graphqlErrorByCategory({
+    category: 'graphql-input',
+    error: remainingError0,
+  })
+
   const submitHandler = handleSubmit(() => {})
-  const pass = watch('newPassword')
+
+  const showSuccess = !formState.isSubmitting && formState.isSubmitSuccessful && !error?.message
 
   return (
     <Form onSubmit={submitHandler} noValidate>
       <FormRow>
-        <TextField
+        <PasswordElement
+          control={control}
+          name='currentPassword'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.currentPassword}
+          autoComplete='current-password'
           label={<Trans id='Current Password' />}
           required={required.currentPassword}
-          {...muiRegister('currentPassword', { required: required.currentPassword })}
-          helperText={formState.errors.currentPassword?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(authenticationError)}
+          helperText={authenticationError?.message}
         />
       </FormRow>
 
       <FormRow>
-        <TextField
+        <ValidatedPasswordElement
+          control={control}
+          name='newPassword'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.newPassword}
+          autoComplete='new-password'
           label={<Trans id='New password' />}
           required={required.newPassword}
-          {...muiRegister('newPassword', { required: required.newPassword })}
-          helperText={formState.errors.newPassword?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(inputError)}
+          helperText={inputError?.message}
         />
-
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='newPassword'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword}
           label={<Trans id='Confirm password' />}
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) => value === pass || i18n._(/* i18n */ "Passwords don't match"),
-          })}
-          helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
         />
       </FormRow>
 
-      <ApolloCustomerErrorAlert error={error} />
-
       <FormDivider />
 
       <FormActions>
@@ -84,9 +94,13 @@ export function ChangePasswordForm() {
         </Button>
       </FormActions>
 
-      <MessageSnackbar sticky open={Boolean(formState.isSubmitSuccessful && data)}>
-        <Trans id='Successfully changed password' />
-      </MessageSnackbar>
+      <ApolloErrorSnackbar error={remainingError} />
+
+      {showSuccess && (
+        <MessageSnackbar open={showSuccess} sticky variant='pill'>
+          <Trans id='Successfully changed password' />
+        </MessageSnackbar>
+      )}
     </Form>
   )
 }

package/components/ResetPasswordForm/ResetPasswordForm.tsx

@@ -1,14 +1,10 @@
-import {
-  PasswordElement,
-  PasswordRepeatElement,
-  TextFieldElement,
-} from '@graphcommerce/ecommerce-ui'
+import { PasswordRepeatElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { TextField } from '@mui/material'
 import { useRouter } from 'next/router'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 import {
   ResetPasswordDocument,
   ResetPasswordMutation,
@@ -59,11 +55,11 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
         />
       </FormRow>
       <FormRow>
-        <PasswordElement
+        <ValidatedPasswordElement
           control={control}
           name='newPassword'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
           label={<Trans id='New password' />}
           required
           disabled={formState.isSubmitting}
@@ -71,9 +67,9 @@ export function ResetPasswordForm(props: ResetPasswordFormProps) {
         <PasswordRepeatElement
           control={control}
           name='confirmPassword'
+          autoComplete='new-password'
           passwordFieldName='newPassword'
           variant='outlined'
-          type='password'
           label={<Trans id='Confirm password' />}
           required
           disabled={formState.isSubmitting}

package/components/SignInForm/SignInForm.tsx

@@ -1,9 +1,18 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { useApolloClient } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
+import {
+  Button,
+  FormRow,
+  FormActions,
+  iconEyeCrossed,
+  iconEye,
+  IconSvg,
+} from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
+import { Box, FormControl, IconButton, InputAdornment, Link, SxProps, Theme } from '@mui/material'
+import { MouseEvent, useState } from 'react'
 import { CustomerDocument } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
@@ -12,7 +21,6 @@ type SignInFormProps = { email: string; sx?: SxProps<Theme> }
 
 export function SignInForm(props: SignInFormProps) {
   const { email, sx } = props
-
   const client = useApolloClient()
   const form = useFormGqlMutation(
     SignInDocument,
@@ -32,7 +40,7 @@ export function SignInForm(props: SignInFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { muiRegister, handleSubmit, required, formState, error } = form
+  const { handleSubmit, required, formState, error, control } = form
   const [remainingError, authError] = graphqlErrorByCategory({
     category: 'graphql-authentication',
     error,
@@ -41,18 +49,19 @@ export function SignInForm(props: SignInFormProps) {
 
   return (
     <Box component='form' onSubmit={submitHandler} noValidate sx={sx}>
-      <FormRow>
-        <TextField
-          key='password'
+      <FormRow sx={{ gridTemplateColumns: 'none' }}>
+        <PasswordElement
           variant='outlined'
-          type='password'
           error={!!formState.errors.password || !!authError}
+          control={control}
+          name='password'
           label={<Trans id='Password' />}
           autoFocus
           autoComplete='current-password'
           id='current-password'
           required={required.password}
-          {...muiRegister('password', { required: required.password })}
+          disabled={formState.isSubmitting}
+          helperText={!!formState.errors.password || authError?.message}
           InputProps={{
             endAdornment: (
               <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
@@ -60,8 +69,6 @@ export function SignInForm(props: SignInFormProps) {
               </Link>
             ),
           }}
-          helperText={formState.errors.password?.message || authError?.message}
-          disabled={formState.isSubmitting}
         />
       </FormRow>
 

package/components/SignInForm/SignInFormInline.tsx

@@ -1,7 +1,8 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, TextField, Theme } from '@mui/material'
+import { Box, Link, SxProps, Theme } from '@mui/material'
 import { SignInDocument, SignInMutationVariables } from './SignIn.gql'
 
 type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
@@ -12,13 +13,13 @@ type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & {
 const { classes } = extendableComponent('SignInFormInline', ['form', 'button'] as const)
 
 export function SignInFormInline(props: InlineSignInFormProps) {
-  const { email, sx = [] } = props
+  const { email, children, sx = [] } = props
   const form = useFormGqlMutation(
     SignInDocument,
     { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
     { errorPolicy: 'all' },
   )
-  const { muiRegister, handleSubmit, required, formState, error } = form
+  const { handleSubmit, required, formState, control } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -41,35 +42,34 @@ export function SignInFormInline(props: InlineSignInFormProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <TextField
+      <PasswordElement
+        control={control}
         variant='outlined'
-        type='password'
-        error={!!formState.errors.password || !!error?.message}
+        name='password'
         label={<Trans id='Password' />}
         autoFocus
         autoComplete='current-password'
         id='current-password'
         required={required.password}
-        {...muiRegister('password', { required: required.password })}
-        helperText={error?.message}
         disabled={formState.isSubmitting}
         InputProps={{
           endAdornment: (
-            <Button
-              href='/account/forgot-password'
-              color='secondary'
-              variant='text'
-              className={classes.button}
-              sx={{ minWidth: 'max-content' }}
-            >
+            <Link href='/account/forgot-password' underline='hover' sx={{ whiteSpace: 'nowrap' }}>
               <Trans id='Forgot password?' />
-            </Button>
+            </Link>
           ),
         }}
       />
-      <Button type='submit' loading={formState.isSubmitting} color='secondary' variant='pill'>
+      <Button
+        type='submit'
+        loading={formState.isSubmitting}
+        color='secondary'
+        variant='pill'
+        sx={{ alignSelf: 'start', marginTop: (theme) => `calc(${theme.spacings.xxs} * .33)` }}
+      >
         <Trans id='Sign in' />
       </Button>
+      {children}
     </Box>
   )
 }

package/components/SignUpForm/SignUpForm.tsx

@@ -1,15 +1,14 @@
-import { useQuery } from '@graphcommerce/graphql'
+import { PasswordElement, PasswordRepeatElement } from '@graphcommerce/ecommerce-ui'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Alert, FormControlLabel, Switch, TextField } from '@mui/material'
+import { Alert, FormControlLabel, Switch } from '@mui/material'
 import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
 import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 
 type SignUpFormProps = { email: string }
 
@@ -18,8 +17,6 @@ const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailCon
 export function SignUpForm(props: SignUpFormProps) {
   const { email } = props
 
-  const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
-
   const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
 
   const form = useFormGqlMutation<
@@ -31,11 +28,10 @@ export function SignUpForm(props: SignUpFormProps) {
     { errorPolicy: 'all' },
   )
 
-  const { muiRegister, handleSubmit, required, watch, formState, error } = form
+  const { muiRegister, handleSubmit, required, formState, error, control } = form
   const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
 
   const submitHandler = handleSubmit(() => {})
-  const watchPassword = watch('password')
 
   useFormPersist({ form, name: 'SignUp', exclude: ['password', 'confirmPassword'] })
 
@@ -50,37 +46,27 @@ export function SignUpForm(props: SignUpFormProps) {
   return (
     <form onSubmit={submitHandler} noValidate>
       <FormRow>
-        <TextField
+        <ValidatedPasswordElement
+          control={control}
+          name='password'
           variant='outlined'
-          type='password'
           error={!!formState.errors.password || !!inputError}
           label={<Trans id='Password' />}
           autoFocus
           autoComplete='new-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-            minLength: {
-              value: Number(storeConfig?.minimum_password_length ?? 8),
-              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
-            },
-          })}
-          helperText={formState.errors.password?.message || inputError?.message}
           disabled={formState.isSubmitting}
+          helperText={inputError?.message}
         />
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword}
+          error={!!formState.errors.confirmPassword || !!inputError}
           label={<Trans id='Confirm password' />}
           autoComplete='new-password'
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) =>
-              value === watchPassword || i18n._(/* i18n */ "Passwords don't match"),
-          })}
-          helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
         />
       </FormRow>

package/components/SignUpForm/SignUpFormInline.tsx

@@ -1,14 +1,17 @@
-import { ApolloErrorAlert } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  ApolloErrorAlert,
+  PasswordElement,
+  PasswordRepeatElement,
+} from '@graphcommerce/ecommerce-ui'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Alert, Box, TextField } from '@mui/material'
+import { Alert, Box } from '@mui/material'
 import React from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
 import { SignUpConfirmDocument } from './SignUpConfirm.gql'
+import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
 
 type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
   children?: React.ReactNode
@@ -26,13 +29,8 @@ const { classes } = extendableComponent('SignUpFormInline', [
 
 const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailConfirmation ?? false
 
-export function SignUpFormInline({
-  email,
-  children,
-  firstname,
-  lastname,
-  onSubmitted = () => {},
-}: SignUpFormInlineProps) {
+export function SignUpFormInline(props: SignUpFormInlineProps) {
+  const { email, children, firstname, lastname, onSubmitted = () => {} } = props
   const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
 
   const form = useFormGqlMutation<
@@ -56,13 +54,9 @@ export function SignUpFormInline({
     { errorPolicy: 'all' },
   )
 
-  const { muiRegister, watch, handleSubmit, required, formState } = form
+  const { handleSubmit, formState, control, error, required } = form
+  const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
   const submitHandler = handleSubmit(() => {})
-  const watchPassword = watch('password')
-
-  const minPasswordLength = Number(
-    useQuery(StoreConfigDocument).data?.storeConfig?.minimum_password_length ?? 8,
-  )
 
   if (requireEmailValidation && form.formState.isSubmitSuccessful) {
     return (
@@ -75,36 +69,25 @@ export function SignUpFormInline({
   return (
     <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
       <FormRow className={classes.row} sx={{ padding: 0 }}>
-        <TextField
+        <ValidatedPasswordElement
+          control={control}
+          name='password'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.password || !!form.error}
           label={<Trans id='Password' />}
-          autoFocus
-          autoComplete='new-password'
-          id='new-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-            minLength: {
-              value: minPasswordLength,
-              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
-            },
-          })}
           disabled={formState.isSubmitting}
+          error={!!inputError}
+          helperText={inputError?.message}
         />
-        <TextField
+        <PasswordRepeatElement
+          control={control}
+          name='confirmPassword'
+          passwordFieldName='password'
+          autoComplete='new-password'
           variant='outlined'
-          type='password'
-          error={!!formState.errors.confirmPassword || !!form.error}
           label={<Trans id='Confirm password' />}
-          autoComplete='new-password'
           required
-          {...muiRegister('confirmPassword', {
-            required: true,
-            validate: (value) => value === watchPassword,
-          })}
-          helperText={!!formState.errors.confirmPassword && <Trans id='Passwords should match' />}
           disabled={formState.isSubmitting}
         />
       </FormRow>
@@ -133,7 +116,7 @@ export function SignUpFormInline({
           </Box>
         </FormRow>
       </FormRow>
-      <ApolloErrorAlert error={form.error} />
+      <ApolloErrorAlert error={remainingError} />
     </Form>
   )
 }

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -1,3 +1,4 @@
+import { PasswordElement } from '@graphcommerce/ecommerce-ui'
 import {
   Button,
   Form,
@@ -16,6 +17,8 @@ import {
   UpdateCustomerEmailMutation,
   UpdateCustomerEmailMutationVariables,
 } from './UpdateCustomerEmail.gql'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError'
 
 type UpdateCustomerEmailFormProps = {
   email: string
@@ -26,13 +29,20 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
 
   const form = useFormGqlMutation<
     UpdateCustomerEmailMutation,
-    UpdateCustomerEmailMutationVariables & {
-      currentEmail?: string
-      confirmEmail?: string
-    }
-  >(UpdateCustomerEmailDocument)
+    UpdateCustomerEmailMutationVariables & { currentEmail?: string; confirmEmail?: string }
+  >(
+    UpdateCustomerEmailDocument,
+    {},
+    {
+      errorPolicy: 'all',
+    },
+  )
 
-  const { handleSubmit, error, required, formState, watch, muiRegister, reset } = form
+  const { handleSubmit, error, required, formState, watch, muiRegister, reset, control } = form
+  const [remainingError, authenticationError] = graphqlErrorByCategory({
+    category: 'graphql-authentication',
+    error,
+  })
   const submit = handleSubmit(() => {
     reset()
   })
@@ -45,7 +55,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='current-email'
           variant='outlined'
           type='text'
-          autoComplete='currentEmail'
+          autoComplete='email'
           autoFocus
           error={formState.isSubmitted && !!formState.errors.currentEmail}
           helperText={formState.isSubmitted && formState.errors.currentEmail?.message}
@@ -67,8 +77,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='email'
           variant='outlined'
           type='text'
-          autoComplete='email'
-          autoFocus
+          autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.email}
           helperText={formState.isSubmitted && formState.errors.email?.message}
           label={<Trans id='New email' />}
@@ -82,8 +91,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           key='confirm-email'
           variant='outlined'
           type='text'
-          autoComplete='confirmEmail'
-          autoFocus
+          autoComplete='off'
           error={formState.isSubmitted && !!formState.errors.confirmEmail}
           helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
           label={<Trans id='Confirm new email' />}
@@ -96,21 +104,21 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
       </FormRow>
 
       <FormRow>
-        <TextField
+        <PasswordElement
+          control={control}
           variant='outlined'
-          type='password'
-          error={!!formState.errors.password}
+          name='password'
           label={<Trans id='Password' />}
-          autoComplete='password'
+          autoComplete='current-password'
           required={required.password}
-          {...muiRegister('password', {
-            required: required.password,
-          })}
-          helperText={formState.errors.password?.message}
           disabled={formState.isSubmitting}
+          error={Boolean(authenticationError)}
+          helperText={authenticationError?.message}
         />
       </FormRow>
 
+      <ApolloCustomerErrorSnackbar error={remainingError} />
+
       <FormDivider />
       <FormActions>
         <Button
@@ -123,7 +131,6 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           <Trans id='Save changes' />
         </Button>
       </FormActions>
-      <ApolloCustomerErrorAlert error={error} />
 
       <MessageSnackbar sticky open={formState.isSubmitSuccessful && !error}>
         <Trans id='Successfully updated email' />

package/components/ValidatedPasswordElement/ValidatedPasswordElement.tsx

@@ -0,0 +1,47 @@
+import { PasswordElement, PasswordElementProps } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+
+export type ValidatedPasswordElementProps<T extends FieldValues> = PasswordElementProps<T>
+
+export function ValidatedPasswordElement<TFieldValues extends FieldValues>(
+  props: PasswordElementProps<TFieldValues>,
+): JSX.Element {
+  const { ...textFieldProps } = props
+
+  const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
+  const minPasswordLength = Number(storeConfig?.minimum_password_length) ?? 0
+  const passwordMinCharacterSets = Number(storeConfig?.required_character_classes_number) ?? 0
+
+  const validation: NonNullable<PasswordElementProps<TFieldValues>['validation']> = {}
+
+  validation.minLength = {
+    value: minPasswordLength,
+    message: i18n._(/* i18n */ 'Password must have at least {minPasswordLength} characters', {
+      minPasswordLength,
+    }),
+  }
+
+  validation.validate = (value: string) => {
+    const pass = value.trim()
+    let counter = 0
+
+    if (pass.match(/\d+/)) counter++
+    if (pass.match(/[a-z]+/)) counter++
+    if (pass.match(/[A-Z]+/)) counter++
+    if (pass.match(/[^a-zA-Z0-9]+/)) counter++
+
+    if (counter < passwordMinCharacterSets) {
+      return i18n._(
+        /* i18n */ 'Minimum of different classes of characters in password is {passwordMinCharacterSets}. Classes of characters: Lower Case, Upper Case, Digits, Special Characters.',
+        { passwordMinCharacterSets },
+      )
+    }
+
+    return true
+  }
+
+  return <PasswordElement {...textFieldProps} validation={validation} />
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.2.0-canary.43",
+  "version": "6.2.0-canary.45",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.43",
-    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.43",
-    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.43"
+    "@graphcommerce/eslint-config-pwa": "6.2.0-canary.45",
+    "@graphcommerce/prettier-config-pwa": "6.2.0-canary.45",
+    "@graphcommerce/typescript-config-pwa": "6.2.0-canary.45"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.2.0-canary.43",
-    "@graphcommerce/framer-utils": "6.2.0-canary.43",
-    "@graphcommerce/graphql": "6.2.0-canary.43",
-    "@graphcommerce/graphql-mesh": "6.2.0-canary.43",
-    "@graphcommerce/image": "6.2.0-canary.43",
-    "@graphcommerce/magento-graphql": "6.2.0-canary.43",
-    "@graphcommerce/magento-store": "6.2.0-canary.43",
-    "@graphcommerce/next-ui": "6.2.0-canary.43",
-    "@graphcommerce/react-hook-form": "6.2.0-canary.43"
+    "@graphcommerce/ecommerce-ui": "6.2.0-canary.45",
+    "@graphcommerce/framer-utils": "6.2.0-canary.45",
+    "@graphcommerce/graphql": "6.2.0-canary.45",
+    "@graphcommerce/graphql-mesh": "6.2.0-canary.45",
+    "@graphcommerce/image": "6.2.0-canary.45",
+    "@graphcommerce/magento-graphql": "6.2.0-canary.45",
+    "@graphcommerce/magento-store": "6.2.0-canary.45",
+    "@graphcommerce/next-ui": "6.2.0-canary.45",
+    "@graphcommerce/react-hook-form": "6.2.0-canary.45"
   },
   "peerDependencies": {
     "@lingui/react": "^4.2.1",