Add button to show and hide password in the devise registrations form

Makes it easy for a user to check that he have typed the password correctly.
This commit is contained in:
David Moreno 2023-01-19 20:47:22 +01:00 committed by Henne Vogelsang
parent 6e276b2787
commit 1ff30d155d
4 changed files with 30 additions and 2 deletions

View file

@ -18,10 +18,12 @@
= f.label :password, 'Password'
- if !@user.persisted?
%abbr{title: 'This field is required'} *
= f.password_field :password, required: !@user.persisted?, class: 'form-control', placeholder: 'Password'
= render partial: 'devise/registrations/password_field_with_view_password_button', locals: { f: f, required: !@user.persisted?, placeholder: 'Password', method: :password }
.form-group
= f.label :password_confirmation, 'Password Confirmation'
= f.password_field :password_confirmation, required: !@user.persisted?, class: 'form-control', placeholder: 'Password Confirmation'
= render partial: 'devise/registrations/password_field_with_view_password_button', locals: { f: f, required: !@user.persisted?, placeholder: 'Password Confirmation', method: :password_confirmation }
- if @user.persisted?
%p.text-muted
Leave blank if you don't want to change your password

View file

@ -0,0 +1,10 @@
.input-group.osem-register
= f.password_field method, required: required, class: 'form-control', placeholder: placeholder
.input-group-btn
%button.btn.btn-default{ type: 'button', class: 'show-or-hide-password', 'data-lock': "true" }
%span.show-password
%i.fa-solid.fa-lock
Show password
%span.hide-password{ style: 'display: none'}
%i.fa-solid.fa-unlock
Hide password