CenturyLinkCloud / Cyclops

The UX/UI Pattern Guide for the CenturyLink Platform
http://assets.ctl.io/cyclops
MIT License
20 stars 16 forks source link

passwordStrength widget #147

Closed guyaparker closed 6 years ago

guyaparker commented 6 years ago

The passwordStrength validator is supposed to be used with the passwordStrength widget. See http://assets.ctl.io/cyclops/1.8.4/validators.html#passwordStrength.

It doesn't look like there has ever been any documentation for the passwordStrength widget at http://assets.ctl.io/cyclops/1.8.4/widgets.html.

I found that whilst using a form with passwordStrength setup on a field I could get duplicate elements showing up for the passwordStrength widget. Whilst using the form I would have a correct element: <p class="password-strength">password strength: weak</p>

Then as the form validators run before the form submission I would have: <p class="password-strength"></p><p class="password-strength">password strength: weak</p>

Then if something went wrong during the form submission I would have: <p class="password-strength"></p><p class="password-strength"></p><p class="password-strength">password strength: weak</p>

By looking at the passwordStrength function I was able to determine that it can accept a messageContainer option. When I used that option the duplicate messages were removed.

So to avoid duplicate messages setup the widget like this: widget: { name: 'passwordStrength', options: { messageContainer: $('#passwordStrength')[0] } } And include the container referenced by messageContainer immediately after the form field: <p id="passwordStrength" class="password-strength"></p>

I suspect that the passwordStrength function could be improved to avoid adding duplicate elements near line 2913 in cyclops.js: container = options.messageContainer ? $(options.messageContainer) : $('<p class=\'password-strength\'></p>');

osbornm commented 6 years ago

@guyaparker here is the documentation https://assets.ctl.io/cyclops/1.8.5/forms.html#passwordStrength

it's definitely not in the right place and should have something under the widgets section.