adding a password meter

[badhri17]

I have an idea for adding a strength meter displayed as a popup while a value is being entered.

I am ready to contribute to the project by adding this feature

---

example

example 2

[fenilli]

This feature could be added using a plugin in the addons, but there are some questions about it, how would it know what is weak and strong?

[badhri17]

thank you gustavo for your response
first can you share with the plugin you talk about because I have checked the docs and nothing similar there

and about your question I am thinking of it as a props

there is 3 states: strong, medium,weak so: mediumRegex,strongRegex
and for the labels (the messages): weakLabel,strongLabel,mediumLabel

we need these properties to achieve this functionality perfectly

[fenilli]

I didn't mean that we had this already, I meant that this feature shouldn't be in the core of the input itself as there are people who would not opt-in for it, and its not a necessary feature.

I meant that you could write an addon/plugin to achieve this functionallity and pass a PR to the addons package.

It would add 6 props, I think that is too much, better to have instead a single prop that receiveis an object with those, also how would it integrate with validation? also if someone wants a simpler version that would be aside from the help instead of a popup how would that be possible if so?

[badhri17]

sorry for the misunderstanding and yes I agree it will be better as an addon
for the implementation I am thinking of this way:

  <FormKit
    type="password"
    label="enter a passowrd"
    :passwordMeter="{
    'strongRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*!~]).{12,}$',
    'mediumRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*]).{8,}$',
    'weakLabel':'weak',
    'mediumLabel': 'medium',
    'strongLabel' : ' strong'
    }"
  />

by default the result :

and they can custom the popup with slots

  <FormKit
    type="password"
    label="enter a passowrd"
    :passwordMeter="{
    'strongRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*!~]).{12,}$',
    'mediumRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*]).{8,}$',
    'weakLabel':'password is weak',
    'mediumLabel': 'password is good',
    'strongLabel' : 'password is very strong'
    }"
  >
  <template #header>
        <h6>Pick a password</h6>
    </template>
    <template #footer>
        <Divider />
        <p class="mt-2">Suggestions</p>
        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
            <li>At least one lowercase</li>
            <li>At least one uppercase</li>
            <li>At least one numeric</li>
            <li>Minimum 8 characters</li>
        </ul>
    </template>
  </formkit>

and the result

and maybe we can add later other options if the user want the password meter to appear below the field not on a popup

for the validation since its only a password meter plugin we don't have to add this option user can validate normally with the validation props

[fenilli]

Would those be optional or not? you sent this example, as the weak has not regex, by default would it be mean any value outside of empty is weak? if so, what would happen if there isn't a mediumRegex, but weak and strong?

{
    'strongRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*!~]).{12,}$',
    'mediumRegex':'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@#$%^*]).{8,}$',
    'weakLabel':'password is weak',
    'mediumLabel': 'password is good',
    'strongLabel' : 'password is very strong'
}

@justin-schroeder any input you could give?

[badhri17]

yes it will be optional user can put passwordMeter as a prop and the plugin will work automatically no need for the object

<FormKit
    type="password"
    label="enter a passowrd"
    passwordMeter
  />

by default the plugin has regex and labels

we only need two regex for the medium and strong if nothing match one of those it will classify as a weak password

what is your opinion?

[fenilli]

It should be fine as a addon yes, if you want you can work to make a PR for it.

[badhri17]

ok I will start working on it from today then I will make a PR for it