_edit_form.html.erb

<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 f.error_messages != "" %>
      <div class="alert alert-danger"><%= f.error_messages %></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: 'email'} %>
      </div>

    </div>

    <div class="form-group">
       <label for="current_password"><%= translation('users._form.current_password') %></label>
      <%= f.password_field :current_password, { placeholder: "Type your current password for verification",
                                                      tabindex: 4,
                                                      class: 'form-control',
                                                      id: 'current-password' }
      %>
    </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: 'password1',
                                          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: '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.email.text_field != "" && document.form.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>