MineSeeker/templates/Security/login.html.twig

{% extends 'Game/index.html.twig' %}

{% block title %} - Sign In{% endblock %}

{% block metas %}
  {%- set _ogImage = 'https://' ~ app.request.host ~ asset('/images/mine-1600x627.png') -%}
  <meta name="robots" content="noindex,nofollow"/>
  <meta property="og:url" content="{{ app.request.uri }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:title" content="Sign In · MineSeeker"/>
  <meta property="og:description"
        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
  <meta property="og:image" content="{{ _ogImage }}"/>
  <meta property="og:image:width" content="1600"/>
  <meta property="og:image:height" content="627"/>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content="Sign In · MineSeeker"/>
  <meta name="twitter:description"
        content="Sign in to MineSeeker and keep track of your wins, stats and battle history."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block body %}
  <div class="auth-page">
    {% for message in app.flashes('success') %}
      <div class="auth-flash auth-flash--success">
        <i class="fas fa-circle-check"></i> {{ message }}
      </div>
    {% endfor %}

    {% for message in app.flashes('error') %}
      <div class="auth-flash auth-flash--error">
        <i class="fas fa-triangle-exclamation"></i> {{ message }}
      </div>
    {% endfor %}

    <div class="auth-card">
      <h2 class="auth-title">Sign In</h2>
      <p class="auth-sub">Welcome back, commander</p>

      {% if error %}
        <div class="auth-error">
          <i class="fas fa-triangle-exclamation"></i>
          {{ error.messageKey|trans(error.messageData, 'security') }}
        </div>
      {% endif %}

      <form class="auth-form" method="post" action="{{ path('MineSeekerBundle_login') }}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>

        <div class="auth-field">
          <label for="username" class="auth-label">Username</label>
          <div class="auth-input-wrap">
            <i class="fas fa-user auth-input-icon"></i>
            <input
              type="text"
              id="username"
              name="_username"
              class="auth-input"
              value="{{ last_username }}"
              autocomplete="username"
              autofocus
              required
            />
          </div>
        </div>

        <div class="auth-field">
          <label for="password" class="auth-label">Password</label>
          <div class="auth-input-wrap">
            <i class="fas fa-lock auth-input-icon"></i>
            <input
              type="password"
              id="password"
              name="_password"
              class="auth-input"
              autocomplete="current-password"
              required
            />
          </div>
        </div>

        <div class="auth-below-password">
          <label class="auth-remember">
            <input type="checkbox" name="_remember_me"/>
            <span>Remember me</span>
          </label>

          <p class="auth-forgot-password">
            <a href="{{ path('MineSeekerBundle_forgot_password') }}">Forgot your password?</a>
          </p>
        </div>

        <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/>

        <button type="submit" class="auth-submit">
          <i class="fas fa-right-to-bracket"></i> Sign In
        </button>
      </form>

      <div class="auth-divider">
        <span>or</span>
      </div>

      <div id="passkey-login-root"
           data-api-routes="{{ {
             authenticationBegin: path('api_webauthn_authentication_begin'),
             authenticationComplete: path('api_webauthn_authentication_complete'),
           }|json_encode|e('html') }}"
      ></div>

      <p class="auth-switch">
        No account yet?
        <a href="{{ path('MineSeekerBundle_register') }}">Create one</a>
      </p>
    </div>
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}

  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
  <script>
    document.querySelector('.auth-form').addEventListener('submit', function (e) {
      e.preventDefault();
      const form = this;
      grecaptcha.ready(function () {
        grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'login'}).then(function (token) {
          document.getElementById('g-recaptcha-response').value = token;
          form.submit();
        });
      });
    });

  </script>

  {{ vite_entry_script_tags('passkey') }}
{% endblock %}