From 0e6afa3012763a09e7072eb3ee94f779785c471f Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Fri, 4 Aug 2023 15:14:24 +0100 Subject: [PATCH 1/7] Wrap checkbox in InputWrapper to provide visual feedback --- css/index.styl | 6 ++++++ src/field/custom_input.jsx | 1 + src/ui/input/checkbox_input.jsx | 23 ++++++++++++++++++++--- src/ui/input/input_wrap.jsx | 6 +++++- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/css/index.styl b/css/index.styl index e5215ee6b..71b82c555 100644 --- a/css/index.styl +++ b/css/index.styl @@ -491,6 +491,12 @@ loadingSize = 30px span display block margin-left 20px + .auth0-lock-input-wrap + background #ffffff + border 1px solid #ffffff + .auth0-lock-input-checkbox.auth0-lock-error .auth0-lock-input-wrap + span + color red // Social diff --git a/src/field/custom_input.jsx b/src/field/custom_input.jsx index e29c035f4..f2525b8af 100644 --- a/src/field/custom_input.jsx +++ b/src/field/custom_input.jsx @@ -39,6 +39,7 @@ const CustomInput = ({ return ( changeField(l.id(model), name, `${e.target.checked}`, validator)} checked={getFieldValue(model, name)} placeholderHTML={placeholderHTML} diff --git a/src/ui/input/checkbox_input.jsx b/src/ui/input/checkbox_input.jsx index 5b0488295..d5c276aa9 100644 --- a/src/ui/input/checkbox_input.jsx +++ b/src/ui/input/checkbox_input.jsx @@ -1,10 +1,26 @@ import React from 'react'; +import InputWrap from './input_wrap'; export default class CheckboxInput extends React.Component { render() { - const { lockId, name, ariaLabel, placeholder, checked, placeholderHTML } = this.props; + const { + lockId, + name, + ariaLabel, + placeholder, + checked, + placeholderHTML, + isValid, + invalidHint + } = this.props; + return ( -
+ -
+ ); } diff --git a/src/ui/input/input_wrap.jsx b/src/ui/input/input_wrap.jsx index b1bfbac11..0d21a57d9 100644 --- a/src/ui/input/input_wrap.jsx +++ b/src/ui/input/input_wrap.jsx @@ -3,12 +3,16 @@ import React from 'react'; export default class InputWrap extends React.Component { render() { - const { after, focused, invalidHint, isValid, name, icon } = this.props; + const { after, focused, invalidHint, isValid, name, icon, className } = this.props; let blockClassName = `auth0-lock-input-block auth0-lock-input-${name}`; if (!isValid) { blockClassName += ' auth0-lock-error'; } + if (className) { + blockClassName += ` ${className}`; + } + let wrapClassName = 'auth0-lock-input-wrap'; if (focused && isValid) { wrapClassName += ' auth0-lock-focused'; From e0bb5984fc929392ed5f99db41ad5c87f9a4ba51 Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Fri, 4 Aug 2023 15:14:36 +0100 Subject: [PATCH 2/7] Add test and update snapshots --- .../__snapshots__/custom_input.test.jsx.snap | 112 +++++++++++++----- src/__tests__/field/custom_input.test.jsx | 11 ++ 2 files changed, 92 insertions(+), 31 deletions(-) diff --git a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap index b720024b4..debd9b74c 100644 --- a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap +++ b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap @@ -2,45 +2,95 @@ exports[`CustomInput when type == checkbox and when placeholderHTML is set renders correctly as a CheckBoxInput 1`] = `
-
`; exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput 1`] = `
- +
+ +
+
+`; + +exports[`CustomInput when type == checkbox shows an error when value is incorrect 1`] = ` +
+
+ +
+
`; diff --git a/src/__tests__/field/custom_input.test.jsx b/src/__tests__/field/custom_input.test.jsx index 09e55b185..cd0735722 100644 --- a/src/__tests__/field/custom_input.test.jsx +++ b/src/__tests__/field/custom_input.test.jsx @@ -97,6 +97,7 @@ describe('CustomInput', () => { describe('when type == checkbox', () => { beforeEach(() => (defaultProps.type = 'checkbox')); it('renders correctly as a CheckBoxInput', () => { + require('field/index').isFieldVisiblyInvalid = () => false; const CustomInput = getComponent(); expectComponent().toMatchSnapshot(); @@ -104,6 +105,8 @@ describe('CustomInput', () => { describe('and when placeholderHTML is set', () => { it('renders correctly as a CheckBoxInput', () => { + require('field/index').isFieldVisiblyInvalid = () => false; + const CustomInput = getComponent(); expectComponent( @@ -111,6 +114,14 @@ describe('CustomInput', () => { ).toMatchSnapshot(); }); }); + + it('shows an error when value is incorrect', () => { + const CustomInput = getComponent(); + + expectComponent( + Placeholder'} /> + ).toMatchSnapshot(); + }); }); describe('when type == hidden', () => { beforeEach(() => { From a849c018b94a07f4e86c1f920dadd8597ee8bdcf Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Fri, 4 Aug 2023 15:14:54 +0100 Subject: [PATCH 3/7] Add to playground --- support/index.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/support/index.html b/support/index.html index d2044ff0c..cfe9fb2e8 100644 --- a/support/index.html +++ b/support/index.html @@ -155,7 +155,17 @@

validator: function () { return true; } - } + }, + { + type: 'checkbox', + name: 'newsletter', + prefill: 'false', + placeholder: 'I hereby agree that I want to receive marketing emails from your company', + validator: (value) => ({ + valid: value === 'true', + hint: 'This is a mandatory field', + }), + }, ], hooks: { loggingIn: function (context, done) { From 21759e4fe429a79f71ec7f9549092ff1e2db9bce Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Tue, 5 Sep 2023 12:11:55 +0100 Subject: [PATCH 4/7] Only make checkbox text red if no invalid hint is provided --- css/index.styl | 2 ++ src/ui/input/checkbox_input.jsx | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/css/index.styl b/css/index.styl index 71b82c555..53673b77b 100644 --- a/css/index.styl +++ b/css/index.styl @@ -497,6 +497,8 @@ loadingSize = 30px .auth0-lock-input-checkbox.auth0-lock-error .auth0-lock-input-wrap span color red + .dont-show-as-invalid + color rgba(0,0,0,0.54) // Social diff --git a/src/ui/input/checkbox_input.jsx b/src/ui/input/checkbox_input.jsx index d5c276aa9..9a6f9a1d3 100644 --- a/src/ui/input/checkbox_input.jsx +++ b/src/ui/input/checkbox_input.jsx @@ -14,6 +14,8 @@ export default class CheckboxInput extends React.Component { invalidHint } = this.props; + const spanClass = invalidHint ? 'dont-show-as-invalid' : 'show-as-invalid' + return ( + ) : ( - {placeholder} + {placeholder} )} From cddf14e8def15086f6a03c8370ae4d3daf73a6a8 Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Tue, 5 Sep 2023 12:16:14 +0100 Subject: [PATCH 5/7] Fix tests --- .../__snapshots__/custom_input.test.jsx.snap | 36 ++++++++++++++++++- src/__tests__/field/custom_input.test.jsx | 10 ++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap index debd9b74c..e618b2275 100644 --- a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap +++ b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap @@ -18,6 +18,37 @@ exports[`CustomInput when type == checkbox and when placeholderHTML is set rende type="checkbox" /> Placeholder", + } + } + /> + + + +`; + +exports[`CustomInput when type == checkbox highlights placeholder text when no invalid hint is provided 1`] = ` +
+
+ @@ -72,6 +105,7 @@ exports[`CustomInput when type == checkbox shows an error when value is incorrec type="checkbox" /> Placeholder", diff --git a/src/__tests__/field/custom_input.test.jsx b/src/__tests__/field/custom_input.test.jsx index cd0735722..b39c7fe35 100644 --- a/src/__tests__/field/custom_input.test.jsx +++ b/src/__tests__/field/custom_input.test.jsx @@ -122,6 +122,16 @@ describe('CustomInput', () => { Placeholder'} /> ).toMatchSnapshot(); }); + + it('highlights placeholder text when no invalid hint is provided', () => { + require('field/index').getFieldInvalidHint = () => undefined; + + const CustomInput = getComponent(); + + expectComponent( + Placeholder'} /> + ).toMatchSnapshot(); + }); }); describe('when type == hidden', () => { beforeEach(() => { From 7e38507cf5299479e544adb4f1cb1b71b1ee8a9c Mon Sep 17 00:00:00 2001 From: Ewan Harris Date: Tue, 5 Sep 2023 13:42:18 +0100 Subject: [PATCH 6/7] Improve changing of className --- css/index.styl | 4 +--- .../field/__snapshots__/custom_input.test.jsx.snap | 8 ++++---- src/ui/input/checkbox_input.jsx | 2 +- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/css/index.styl b/css/index.styl index 53673b77b..869d61841 100644 --- a/css/index.styl +++ b/css/index.styl @@ -495,10 +495,8 @@ loadingSize = 30px background #ffffff border 1px solid #ffffff .auth0-lock-input-checkbox.auth0-lock-error .auth0-lock-input-wrap - span + span.no-hint color red - .dont-show-as-invalid - color rgba(0,0,0,0.54) // Social diff --git a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap index e618b2275..e6dffc651 100644 --- a/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap +++ b/src/__tests__/field/__snapshots__/custom_input.test.jsx.snap @@ -18,7 +18,7 @@ exports[`CustomInput when type == checkbox and when placeholderHTML is set rende type="checkbox" /> Placeholder", @@ -48,7 +48,7 @@ exports[`CustomInput when type == checkbox highlights placeholder text when no i type="checkbox" /> Placeholder", @@ -78,7 +78,7 @@ exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput type="checkbox" /> placeholder @@ -105,7 +105,7 @@ exports[`CustomInput when type == checkbox shows an error when value is incorrec type="checkbox" /> Placeholder", diff --git a/src/ui/input/checkbox_input.jsx b/src/ui/input/checkbox_input.jsx index 9a6f9a1d3..b6bc2fac0 100644 --- a/src/ui/input/checkbox_input.jsx +++ b/src/ui/input/checkbox_input.jsx @@ -14,7 +14,7 @@ export default class CheckboxInput extends React.Component { invalidHint } = this.props; - const spanClass = invalidHint ? 'dont-show-as-invalid' : 'show-as-invalid' + const spanClass = invalidHint ? '' : 'no-hint' return ( Date: Thu, 14 Sep 2023 12:13:36 +0100 Subject: [PATCH 7/7] Align hint text with checkbox text --- css/index.styl | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/css/index.styl b/css/index.styl index 869d61841..07eb0902b 100644 --- a/css/index.styl +++ b/css/index.styl @@ -494,9 +494,11 @@ loadingSize = 30px .auth0-lock-input-wrap background #ffffff border 1px solid #ffffff - .auth0-lock-input-checkbox.auth0-lock-error .auth0-lock-input-wrap - span.no-hint - color red + .auth0-lock-input-checkbox.auth0-lock-error + .auth0-lock-input-wrap span.no-hint + color red + .auth0-lock-error-invalid-hint + margin-left 20px // Social