diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
index 5b061b89ea6..e13b6093e8c 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
@@ -32,7 +32,9 @@ const defaultTemplate = [
],
[
'core/list',
- {},
+ {
+ className: 'is-style-checkmark-list',
+ },
[
[
'core/list-item',
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx
index 4d7446443f5..a728c5d72d5 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/order-confirmation/create-account/form.tsx
@@ -9,6 +9,7 @@ import { PRIVACY_URL, TERMS_URL } from '@woocommerce/block-settings';
import { ValidatedTextInput } from '@woocommerce/blocks-components';
import { useSelect } from '@wordpress/data';
import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+import { getSetting } from '@woocommerce/settings';
const termsPageLink = TERMS_URL ? (
@@ -26,6 +27,67 @@ const privacyPageLink = PRIVACY_URL ? (
{ __( 'Privacy Policy', 'woocommerce' ) }
);
+const PasswordField = ( {
+ isLoading,
+ password,
+ setPassword,
+}: {
+ isLoading: boolean;
+ password: string;
+ setPassword: ( password: string ) => void;
+} ) => {
+ const [ passwordStrength, setPasswordStrength ] = useState( 0 );
+
+ return (
+
+
{
+ if (
+ validity.valueMissing ||
+ validity.badInput ||
+ validity.typeMismatch
+ ) {
+ return __(
+ 'Please enter a valid password',
+ 'woocommerce'
+ );
+ }
+ } }
+ customValidation={ ( inputObject ) => {
+ if ( passwordStrength < 2 ) {
+ inputObject.setCustomValidity(
+ __(
+ 'Please create a stronger password',
+ 'woocommerce'
+ )
+ );
+ return false;
+ }
+ return true;
+ } }
+ onChange={ ( value: string ) => setPassword( value ) }
+ feedback={
+
+ setPasswordStrength( strength )
+ }
+ />
+ }
+ />
+
+ );
+};
+
const Form = ( {
attributes: blockAttributes,
isEditor,
@@ -35,7 +97,6 @@ const Form = ( {
} ) => {
const [ isLoading, setIsLoading ] = useState( false );
const [ password, setPassword ] = useState( '' );
- const [ passwordStrength, setPasswordStrength ] = useState( 0 );
const hasValidationError = useSelect( ( select ) =>
select( VALIDATION_STORE_KEY ).getValidationError( 'account-password' )
);
@@ -44,6 +105,13 @@ const Form = ( {
( isEditor ? 'customer@email.com' : '' );
const nonceToken = blockAttributes?.nonceToken || '';
+ // Passwords might not be required based on settings.
+ const registrationGeneratePassword = getSetting(
+ 'registrationGeneratePassword',
+ false
+ );
+ const needsPassword = ! registrationGeneratePassword && ! password;
+
return (
+
+ >
+ ) }