qwikifiers
feat(password): create password component
I would like to contribute and create that component. Could it be assigned to me? @gioboa
password #
An input field password, with a confirmation input
Expected
Additionally to the WIA/ARIA specifications,
- regex strength based validation
- visible / not visible string
- confirmation input
Including dependencies shall be questioned, meanwhile reinventing the wheel shall be avoid. So I open the topic with this password checker that I recently got into: checkpass.
The idea is to expose a light interface to Qwik-ui's users while providing the high level of accessibility standards (and arguably, high level of good practices). I went through some documentations about the password inputs, including those ones (share your if any too)
- https://incl.ca/show-hide-password-accessibility-and-password-hints-tutorial/
- https://design-system.service.gov.uk/patterns/passwords/
- https://hds.hel.fi/components/password-input
The anatomy of the headless shall be composable, HTML valid (w3c) and Axe valid (using the Axe Chrome extension) ✌️.
I'm happy to get involved where you see fit.
🙏
Awesome @PatrykGodlewski 👏 I gave a look already and will be happy to contribute too
🙌
@PatrykGodlewski , I (re)implemented the component you made using two patterns:
- composable element
- hook
The contributor team is still discussing about the later (Discord thread).
For using the hook, I had to re-manipulate the integrality of your implementation.
Also, I upgraded checkpass to the version 3.0.0 and asked the author to expose the Constraints type – which he did very quickly.
It works like a charm.
Could we add a password meter – like here. What do you think; could you give a hand 💪 ?
Using the two patterns, we end with such integration:
export default component$(() => {
const input = useInputPassword();
return (
<InputPassword.Root {...input}>
<InputPassword.Input />
<InputPassword.Toggler>
<InputPassword.Icon />
</InputPassword.Toggler>
</InputPassword.Root>
)
});
where input provides the state of the component:
<ul>
<li>Password: {input.value.value}</li>
<li>Visible: {input.visible.value ? 'yes' : 'no'}</li>
<li>Match: {input3.match.value ? 'yes' : 'no'}</li>
<li>
Errors:
<ul>
{input.errors.value.map((error, i) => <li key={i}>{error.message}</li>)}
</ul>
</li>
</ul>
value.value is not really beautiful .. the first one is the value of the input, the second is the value of the signal
Awesome @tleperou! Previously, I attempted using an existing pattern in the project, but I was unaware of the Discord thread. However, I do have some questions regarding your implementation. Would it be possible to include a toggler for the confirmInput as well, since we already have one for the main input? By doing so, the implementation would look like this.
export default component$(() => {
const input = useInputPassword();
return (
<InputPassword.Root {...input}>
<InputPassword.Input>
<InputPassword.Toggler>
<InputPassword.Icon />
</InputPassword.Toggler>
</InputPassword.Input>
<div>confirm</div>
<InputPassword.InputConfirm>
<InputPassword.Toggler>
<InputPassword.Icon />
</InputPassword.Toggler>
</InputPassword.InputConfirm>
</InputPassword.Root>
)
});
Also, I think adding a password meter would be a great idea. Thank you for suggesting it! I'll make sure to work on that as soon as possible.
In my view, there's not really a major downside to this solution. We're making it optional, so anyone who doesn't like it can just choose not to use it. However, I'm open to feedback, and if there's something I've overlooked, please don't hesitate to point it out.
Should the functionality of the password meter be based on Checkpass or perhaps we should consider using a tool like zxcvbn?