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

app/assets/javascripts/application.js

@@ -41,6 +41,7 @@
 //= require osem-bootstrap
 //= require osem-revisionhistory
 //= require osem-commercials
+//= require osem-register
 //= require unobtrusive_flash
 //= require unobtrusive_flash_bootstrap
 //= require countable

app/assets/javascripts/osem-register.js

@@ -0,0 +1,15 @@
+$( document ).ready(function() {
+
+  $('.osem-register button.show-or-hide-password').click(function() {
+    const is_locked = $(this).data('lock');
+    $(this).data('lock', !is_locked);
+    $(this).parents('.osem-register').find('input').attr('type', is_locked ? 'text' : 'password');
+    if (is_locked) {
+      $(this).find('.show-password').hide();
+      $(this).find('.hide-password').show();
+    } else {
+      $(this).find('.show-password').show();
+      $(this).find('.hide-password').hide();
+    }
+  } );
+} );

app/views/devise/registrations/_form_fields.html.haml

@@ -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

app/views/devise/registrations/_password_field_with_view_password_button.haml

@@ -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