publiclab/plots2

<%= form_for :user_session, :as => :user_session, :url => "/user_sessions", :html => {:class => "form user-sessions-form"} do |f| %>

<input type="hidden" name="return_to" class="login-modal-redirect" value="<%= params[:return_to] || request.fullpath %>" />

<center>
<h2><%= raw translation('user_sessions.new.log_in') %></h2>
  <p class="form-grey" id="toSignup">or
    <%= link_to signup_path( return_to: params[:return_to] ) do %>
    <%= raw translation('user_sessions.new.sign_up') %></a> <%= raw translation('user_sessions.new.to_join') %>
    <% end %></p>
</center>

<%= render partial: 'layouts/errorMessages', locals: { model: @user_session } if @user_session.present? %>

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

<div id="socialIcons" class='col-lg-12'>
  <%= render :partial => "layouts/social_icons" %>
</div>

<br />

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

<div id="toggle" class="login-form">

  <div class="form-group">

    <label for="username"><%= translation('user_sessions.new.username') %></label>
    <%= f.text_field :username, { tabindex: 1, placeholder: "Username", class: 'form-control', id: 'username-login', required: true } %>

    <div class="form-group has-feedback">
    <label class="control-label" for="password"><%= translation('user_sessions.new.password') %></label>

    

      <div class="input-group">
        <%= f.password_field :password, { tabindex: 2,placeholder: "Password",class: 'form-control', id: 'password-signup', onpaste: 'return false;' , required: true } %>
        <div class="input-group-append">
          <a id="visibility" class="fa fa-eye input-group-text d-flex align-items-center" aria-hidden="true">
          </a>
        </div>
      </div>
    </div>
  </div>

  <input type="hidden" name="hash_params" value="" />

  <div class="input-group-inline">
    <button id="login-button" class="btn btn-primary btn-lg" type="submit"
    tabindex="3"><%= translation('user_sessions.new.log_in') %></button>

    <div class="form-check-inline">
      <label class="form-check-label" style="margin-left:12px;">
      <%= f.check_box :remember_me %> <%= translation('user_sessions.new.remember_me') %>
      </label>
    </div>

    <br />

    <p class="form-grey"><%= raw translation('user_sessions.new.reset_by_clicking_here', :url1 => "/reset/") %></p>
  </div>

</div>

<% end %>

<% if !current_user %>
<script>
  $(document).ready(function () {
    $('a.requireLogin').click(function (e) { //For every link that should require login
      // intercept the function of the original link, don't go there (yet):
      e.preventDefault();
      var mode = $(this).data('mode') || 'login';
      // set the mode of the modal to login if data-mode not specified
      setMode(mode);
      require_login_and_redirect_to($(this).attr('href'));
    });
  });

  function require_login_and_redirect_to(url) {
    // open the login modal to allow user to login:
    $('#loginModal').modal('show');
    // ensure the original destination of the link is preserved as the return_to parameter,
    // thus redirecting there once login or signup is completed:
    $('.login-modal-redirect').val(url);
  }
</script>
<% end %>

<script>
  $("a.loginToggle").click(function () {
    // When a button that always toggles the login modal is clicked
    setMode("login"); // Sets the mode of the modal to login, to show only the login partial
    $('#loginModal').modal(); // Open the login modal to allow user to login
  });

  $("#visibility").on("click", function (e) {
    e.preventDefault();
    var intervalID = setInterval(frame, 1500);
    // changes type from password to text along with the eye icon
    $("#visibility").toggleClass("fa-eye-slash");
    $("#password-signup").attr("type", "text");

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