MineSeeker/templates/Security/profile_security.html.twig

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

{% block title %} - Security Settings{% 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="{{ url('MineSeekerBundle_profile_security') | replace({'http://': 'https://'}) }}"/>
  <meta property="og:type" content="website"/>
  <meta property="og:site_name" content="MineSeeker"/>
  <meta property="og:title" content="Security Settings · MineSeeker"/>
  <meta property="og:description"
        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
  <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="Security Settings · MineSeeker"/>
  <meta name="twitter:description"
        content="Manage your MineSeeker account security — passkeys, two-factor authentication and more."/>
  <meta name="twitter:image" content="{{ _ogImage }}"/>
{% endblock %}

{% block body %}
  <div class="profile-page">
    <div class="profile-actions">
      <a href="{{ path('MineSeekerBundle_profile') }}" class="profile-action-btn">
        <i class="fa fa-chevron-left"></i> Back to Profile
      </a>
    </div>

    <div class="profile-section">
      <h2 class="profile-section__title">
        <i class="fa fa-key"></i> Passkeys (WebAuthn)
      </h2>
      <p class="profile-section__description">
        Passkeys provide a secure, passwordless way to sign in to your account. Manage your registered passkeys below.
      </p>

      <div id="passkey-manager-root"
           data-credentials="{{ credentials|json_encode|e('html') }}"
           data-api-routes="{{ {
             registrationBegin: path('api_webauthn_registration_begin'),
             registrationComplete: path('api_webauthn_registration_complete'),
             credentials: path('api_webauthn_credentials'),
           }|json_encode|e('html') }}"
      ></div>
    </div>

    <div class="profile-section">
      <h2 class="profile-section__title">
        <i class="fa fa-shield"></i> Two-Factor Authentication
      </h2>
      <p class="profile-section__description">
        Add an extra layer of security by requiring a one-time code from your authenticator app each time you sign in
        with a password.
      </p>

      {% set newBackupCodes = app.flashes('2fa_backup_codes') %}

      {% if isTotpEnabled %}
        <div class="twofa-status twofa-status--enabled">
          <i class="fa fa-check-circle"></i>
          Two-factor authentication is <strong>active</strong>.
        </div>

        {% if newBackupCodes|length > 0 %}
          <div class="twofa-backup-reveal">
            <p class="twofa-backup-reveal__warning">
              <i class="fa fa-exclamation-triangle"></i>
              Save these backup codes now — they will not be shown again.
            </p>
            <div class="twofa-backup-reveal__grid">
              {% for code in newBackupCodes[0] %}
                <code class="twofa-backup-code">{{ code }}</code>
              {% endfor %}
            </div>
          </div>
        {% endif %}

        <div class="twofa-actions">
          <form method="post" action="{{ path('MineSeekerBundle_2fa_disable') }}" class="twofa-actions__form">
            <input type="hidden" name="_token" value="{{ csrf_token('2fa_disable') }}"/>
            <button type="submit" class="btn btn--danger btn--sm">
              <i class="fa fa-times"></i> Disable 2FA
            </button>
          </form>

          <div class="twofa-backup-meta">
            <span class="twofa-backup-meta__count">
              <i class="fa fa-life-ring"></i>
              {{ backupCodesCount }} backup code{{ backupCodesCount != 1 ? 's' : '' }} remaining
            </span>
            <form method="post" action="{{ path('MineSeekerBundle_2fa_backup_regenerate') }}">
              <input type="hidden" name="_token" value="{{ csrf_token('2fa_backup_regen') }}"/>
              <button type="submit" class="btn btn--secondary btn--sm">
                <i class="fa fa-refresh"></i> Regenerate codes
              </button>
            </form>
          </div>
        </div>
      {% else %}
        <div class="twofa-status twofa-status--disabled">
          <i class="fa fa-times-circle"></i>
          Two-factor authentication is <strong>not enabled</strong>.
        </div>

        <form method="post" action="{{ path('MineSeekerBundle_2fa_prepare') }}">
          <input type="hidden" name="_token" value="{{ csrf_token('2fa_prepare') }}"/>
          <button type="submit" class="btn btn--primary">
            <i class="fa fa-shield"></i> Enable 2FA
          </button>
        </form>
      {% endif %}
    </div>

    <div class="profile-section">
      <h2 class="profile-section__title">
        <i class="fa fa-key"></i> Password changing
      </h2>
      <p class="profile-section__description">
        The password changing only possible through the Forgot password functionality on the Login page.
        The system would log you out anyway after requesting a new password, so this feature wasn't implemented here.
      </p>
    </div>
  </div>
{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  {{ vite_entry_link_tags('passkeyStyle') }}
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ vite_entry_script_tags('passkey', { dependency: 'react' }) }}
{% endblock %}