Quasar: [v1] - QInput or QPassword - Convenient way of having a password field with visibility toggle

[vycoder]

Is your feature request related to a problem? Please describe.
This might seem weird because I know that we could achieve the same using QInput's slots. But after writing password fields for logins and signups (which has another confirm password field) writing the template and adding a new data prop has become a bit of a boilerplate.

Describe the solution you'd like
A new prop or prop/modifier that adds/removes visibility toggle when QInput type is password.

Describe alternatives you've considered
A separate Quasar component itself.

Additional context
Password field with visibility toggle has been a common UI pattern that seems intuitive for an input component to have.

[nothingismagick]

Do you mean like this?
https://quasar.dev/vue-components/input#Example--Input-types

Closing because it is implemented.

[nothingismagick]

Reading helps - sry. Basically you want there to be a password-toggle prop added to the input that injects something like this slot:

        <template v-slot:append>
          <q-icon
            :name="isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="isPwd = !isPwd"
          />
        </template>

So we'd also need to know which icon to use and where to place it, so three props or a prop as an object.

[vycoder]

Yeah @nothingismagick, something like that. Because right now, everytime I create a register UI with password and confirm password fields, I have to write 2 extra data prop, while also handling toggling types ie:

<q-input
  v-model="password"
  filled
  :type="isPwd ? 'password' : 'text'"
  hint="Password with toggle">
<q-input
  v-model="confirmPassword"
  filled
  :type="isPwd2 ? 'password' : 'text'
   hint="Confirm Password with toggle">

So we'd also need to know which icon to use and where to place it, so three props or a prop as an object.

Also, I think the absence of the said prop/props defaults to the default behavior of the input field now.

[nothingismagick]

Well, I can't promise that this will land anytime soon - especially because we are all pretty tapped. I would recommend you look into creating an app-extension for your needs. Then you can add it to your projects as needed. Alternatively, you could make a PR to core - if you feel up to it.

Not trying to blow you off - its just we've other priorities at the moment.

[vycoder]

yeah, no worries @nothingismagick! I'm not really in a hurry, I know you guys have a lot more on your plate. Just really putting it out here for the moment. Thanks for considering it!

I'll try to issue a PR when I can.

[pdanpdan]

This belongs to userland implementation, sorry. Also it would clash with the native browser 'view password' implementation and prevent the good functionality of password managers.