thedrummeraki/tanoshimu

<% url = @login_url if !@login_url.nil? %>
<% url = '/login' if url.nil? %>
<% error_cont_id = 'error-message' %>
<% wait_cont_id = 'waiting-message' %>
<% succ_cont_id = 'success-message' %>


<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div class="column is-4 is-offset-4">
        <h3 class="title has-text-grey"><%= t('welcome.title') %></h3>
        <p class="has-text-grey"><%= t('welcome.catch-phrase') %></p>
        <div class="card" style="padding: 30px; margin-top: 10px;">
          <figure class="avatar is-rounded">
              <%= image_tag 'tanoshimu', class: 'login logo' %>
          </figure>

          <div id="login-messages" class="text-center login-messages small" style="padding: 13px;">
            <div class="text-danger">
              <span id="error-message" class="has-text-danger"></span>
            </div>
            <div class="text-warning">
              <span id="waiting-message" class="has-text-warning"></span>
            </div>
            <div class="text-success">
              <span id="success-message" class="has-text-success"></span>
            </div>
          </div>

          <form id="login-form" class="form-signin" onsubmit="return false;">
            <div class="field">
              <div class="control">
                <input type="text" id="username" class="input is-rounded is-dark" placeholder="<%= t('welcome.login.username') %>" autocomplete="off" autofocus>
              </div>
            </div>

            <div class="field">
              <div class="control">
                <input type="password" id="password" class="input is-rounded is-dark" placeholder="<%= t('welcome.login.password') %>">
              </div>
            </div>
            <div style="margin-top: 10px;">
              <button class="button is-fullwidth is-primary" type="submit"><%= t('welcome.login.login') %></button>
            </div>

            <div class="text-center" style="margin-top: 20px;">
              <% if Config.oauth_enabled? %>
                <p style="margin-bottom: 10px;" style="color: #e0e0e0;">- <%= t('welcome.login.google-or') %> -</p>
                <% if Config.google_client_id.present? && Config.google_oauth_enabled? %>
                  <div>
                    <%= link_to '/auth/google_oauth2', method: :post, class: 'google-btn' do %>
                      <img width="20px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"/>
                      <%= t('welcome.login.google-login') %>
                    <% end %>
                  </div>
                <% end %>
                <% if Config.misete_client_id.present? %>
                  <div style="margin-top: 20px">
                    <%= link_to '/auth/misete', method: :post, class: 'google-btn' do %>
                      <i class="material-icons" style="font-size: 18px; padding-right: 5px;">lock</i><%= t('welcome.login.misete-login') %>
                    <% end %>
                  </div>
                <% end %>
              <% end %>
            </div>
          </form>
          <div class="hf-section">
            <%= render 'shared/language_change' %>
          </div>
          <div class="hf-section">
            <small><p>Request ID: </p><code class="request-id"><%= request_id %></code></small>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    function execLogin() {
      submit.style.display = 'none';
      login('error-message', 'waiting-message', 'success-message', 'login-form', () => {
        submit.style.display = 'block';
      }); 
    }
    const submit = document.querySelector('[type="submit"]');
    if (!submit) {
      return;
    }

    submit.addEventListener('click', () => {
      execLogin();
    });
  });


  // $(document).ready(function() {
  //   const submit = document.query

  //   var $submit = $('[type="submit"]');
  //   $('#login-form').find('input').keypress(function(e) {
  //      // Enter pressed?
  //      if(e.which == 10 || e.which == 13) {
  //        $submit.trigger('click');
  //      }
  //    });

  //    $submit.on('click', function() {
  //     execLogin();
  //    });

  //    function execLogin() {
  //      $submit.hide();
  //      login('error-message', 'waiting-message', 'success-message', 'login-form', function() {
  //        $submit.show();
  //      });
  //    }
  // });
</script>

<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>