publiclab/plots2

<div style="padding:10px;">
<%= form_for @user, :url => {:controller => 'users', :action => 'update'}, :html => {:class => "row",:id => 'edit-form' } do |f| %>
  <%= hidden_field_tag "user[ui_update]", "true" %>
  <div class="col-md-10">
    <% if @user.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(@user.errors.count, "error") %> prohibited this form from being saved:</h2>
        <ul>
          <% @user.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

      <div class='col-md-12' style="display:flex; justify-content: center;">
        <h3> Link your Public Lab account to providers </h3>
      </div>

      <div class='col-md-12' style="display:flex; justify-content: center;">
        <%= render :partial => "layouts/social_icons" %>
      </div>

      <br style="clear:both;"/>

    <div class="row">

      <div class="form-group col-md-6">
        <label for="username"><%= translation('users._form.username') %></label>
        <%= f.text_field :username, { readonly: true, tabindex: 1, placeholder: "Username", class: 'form-control', id: 'username' , title: 'Username field cannot be changed', disabled: true} %>
        <input type="hidden" name="id" value="<%= @user.username %>" />
      </div>

      <div class="form-group col-md-6">
        <label for="email"><%= translation('users._form.email') %></label>
        <%= f.text_field :email, { tabindex: 3, required: true, placeholder: "you@email.com", class: 'form-control', id: 'new_email'} %>
      </div>

    </div>

    <div class="form-group">
       <label for="current_password"><%= translation('users._form.current_password') %></label>
        <div class="input-group">
          <%= f.password_field :current_password, { placeholder: "Type your current password for verification",
                                                    tabindex: 4,
                                                    class: 'form-control',
                                                    id: 'current-password'
                                                  }
          %>
          <div class="input-group-append">
            <a id="show_password" class="fa fa-eye input-group-text d-flex align-items-center" aria-hidden="true">
            </a>
          </div>
        </div>
    </div>

    <div class="row">
      <div class="form-group col-md-6">
        <% if @user.crypted_password.nil? %>
          <label for="password"><%= translation('users._form.create_password') %></label>
        <% else %>
           <label for="password"><%= translation('users._form.change_password') %></label>
        <% end %>
        <%= f.password_field :password, { placeholder: "Enter your new password",
                                          tabindex: 5,
                                          class: 'form-control',
                                          id: 'new_password',
                                          onpaste: 'return false;' }
        %>
      </div>

      <div class="form-group col-md-6">
        <label for="password_confirmation"><%= translation('users._form.password_confirmation') %></label>
        <%= f.password_field :password_confirmation, { placeholder: I18n.t('users._form.confirm_password'),
                                                       tabindex: 6,
                                                       class: 'form-control',
                                                       id: 'new_password-confirmation',
                                                       onpaste: 'return false;' }
        %>
      </div>
    </div>

    <div class="form-group">
      <label for="user_bio"><%= translation('users._form.bio') %></label>
      <%= f.text_area :bio, { placeholder: I18n.t('users._form.add_bio'),
                                          rows: 8,
                                          class: 'form-control',
                                          tabindex: 7 }
      %>
    </div>

    <div class="form-group form-inline" style="clear:both;padding-top:10px;">

        <!-- button for saving edits for existing users -->
         <button class="btn btn-lg btn-primary btn-save" type="submit" tabindex="8"><%= translation('users._form.save') %></button>

      <script>
        (function() {
          $('.btn-save').click(function onClick(e) {
            if(document.form.new_email.text_field != "" && document.form.new_email.pattern == '[^@]+@[^@]+\.[a-zA-Z]{2,6}')
                   {
                     $(this).addClass("disabled") // disable the button after it is clicked
                     .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
                   }
            })
        })();
      </script>
    </div>

</div>
<div class="col-md-2">
  <%= render :partial => 'users/photo' %>
</div>

<% end %>
</div>

<style>
.error {
    color: #D34836;
  }
</style> 

<script>
  $("#show_password").on("click", function (e) {
    e.preventDefault();
    var interval_ID = setInterval(hide, 1500);
    // changes type from password to text along with the eye icon
    $("#show_password").toggleClass("fa-eye-slash");
    $("#current-password").attr("type", "text");

    function hide() {
      // changes type from text again to password after 1.5 seconds along with eye-slash icon
      clearInterval(interval_ID);
      $("#current-password").attr("type", "password");
      $("#show_password").toggleClass("fa-eye-slash");
    }
  });
</script>