MineSeeker/templates/Security/register.html.twig

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

{% block title %} - Register{% endblock %}

{% block body %}
  <div class="auth-page">
    {% for email in app.flashes('verify_email') %}
      <div class="auth-card auth-card--sent">
        <div class="auth-sent-icon"><i class="far fa-envelope"></i></div>
        <h2 class="auth-title">Check your inbox</h2>
        <p class="auth-sub">We sent an activation link to</p>
        <p class="auth-sent-email">{{ email }}</p>
        <p class="auth-sent-note">
          Click the link in the email to activate your account.<br>
          The link expires in <strong>24 hours</strong>.
        </p>
        <a
          href="{{ path('MineSeekerBundle_login') }}"
          class="auth-submit"
          style="text-decoration:none; margin-top:16px;"
        >
          Go to Sign In
        </a>
      </div>
    {% else %}
      <div class="auth-card">
        <h2 class="auth-title">Create Account</h2>
        <p class="auth-sub">Join the battle — no subscription required</p>

        {{ form_start(form, {attr: {class: 'auth-form'}}) }}

        <div class="auth-field">
          <label for="{{ form.username.vars.id }}" class="auth-label">Username</label>
          <div class="auth-input-wrap">
            <i class="fas fa-user auth-input-icon"></i>
            {{ form_widget(form.username, {
              attr: {
                class: 'auth-input' ~ (not form.username.vars.valid ? ' auth-input--error' : ''),
                autocomplete: 'username',
                autofocus: true,
                minlength: '3',
              }
            }) }}
          </div>
          {% if not form.username.vars.valid %}
            {% for error in form.username.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label for="{{ form.email.vars.id }}" class="auth-label">Email</label>
          <div class="auth-input-wrap">
            <i class="fas fa-envelope auth-input-icon"></i>
            {{ form_widget(form.email, {
              attr: {
                class: 'auth-input' ~ (not form.email.vars.valid ? ' auth-input--error' : ''),
                autocomplete: 'email',
              }
            }) }}
          </div>
          {% if not form.email.vars.valid %}
            {% for error in form.email.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label for="{{ form.plainPassword.first.vars.id }}" class="auth-label">Password</label>
          <div class="auth-input-wrap">
            <i class="fas fa-lock auth-input-icon"></i>
            {{ form_widget(form.plainPassword.first, {
              attr: {
                class: 'auth-input' ~ (not form.plainPassword.vars.valid ? ' auth-input--error' : ''),
                autocomplete: 'new-password',
                minlength: '6',
              }
            }) }}
          </div>
          {% if not form.plainPassword.vars.valid %}
            {% for error in form.plainPassword.vars.errors %}
              <p class="auth-field-error"><i class="fas fa-circle-exclamation"></i> {{ error.message }}</p>
            {% endfor %}
          {% endif %}
        </div>

        <div class="auth-field">
          <label for="{{ form.plainPassword.second.vars.id }}" class="auth-label">Confirm Password</label>
          <div class="auth-input-wrap">
            <i class="fas fa-lock auth-input-icon"></i>
            {{ form_widget(form.plainPassword.second, {
              attr: {
                class: 'auth-input' ~ (not form.plainPassword.vars.valid ? ' auth-input--error' : ''),
                autocomplete: 'new-password',
              }
            }) }}
          </div>
        </div>

        <button type="submit" class="auth-submit">
          <i class="fas fa-user-plus"></i> Create Account
        </button>

        {{ form_end(form) }}

        <p class="auth-switch">
          Already have an account?
          <a href="{{ path('MineSeekerBundle_login') }}">Sign in</a>
        </p>
      </div>
    {% endfor %}
  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_site_key }}" async defer></script>
  <script>
    (function () {
      const form = document.querySelector('.auth-form');
      if (!form) return;
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        grecaptcha.ready(function () {
          grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'register'}).then(function (token) {
            document.getElementById('{{ form.recaptcha.vars.id }}').value = token;
            form.submit();
          });
        });
      });
    }());
  </script>
{% endblock %}