141 lines
4.6 KiB
Twig
141 lines
4.6 KiB
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 %}
|