110 lines
4.6 KiB
Twig
110 lines
4.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
{% block title %}Register - ServerControl{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
<style>
|
|
.form-section-title {
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: #6c757d;
|
|
margin-bottom: .75rem;
|
|
padding-bottom: .4rem;
|
|
border-bottom: 1px solid rgba(108,117,125,.2);
|
|
}
|
|
.field-icon { color: #6c757d; }
|
|
.input-group-text { background: transparent; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="row justify-content-center mt-5">
|
|
<div class="col-md-5 col-lg-4">
|
|
<div class="card">
|
|
<div class="card-header py-3 d-flex align-items-center gap-2">
|
|
<i class="bi bi-person-plus-fill fs-5 text-primary"></i>
|
|
<div>
|
|
<h5 class="mb-0">Create account</h5>
|
|
<small class="text-muted">Join ServerControl</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
{{ form_start(form) }}
|
|
|
|
<p class="form-section-title"><i class="bi bi-person me-1"></i>Identity</p>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Email</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text field-icon"><i class="bi bi-envelope"></i></span>
|
|
{{ form_widget(form.email, {attr: {class: 'form-control', placeholder: 'you@example.com'}}) }}
|
|
</div>
|
|
{{ form_errors(form.email) }}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold">Pseudo</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text field-icon"><i class="bi bi-at"></i></span>
|
|
{{ form_widget(form.pseudo, {attr: {class: 'form-control', placeholder: 'Your display name'}}) }}
|
|
</div>
|
|
{{ form_errors(form.pseudo) }}
|
|
</div>
|
|
|
|
<p class="form-section-title"><i class="bi bi-key me-1"></i>Password</p>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text field-icon"><i class="bi bi-lock"></i></span>
|
|
{{ form_widget(form.plainPassword.first, {attr: {class: 'form-control', placeholder: '••••••••', id: 'pwd1'}}) }}
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePwd('pwd1','eye1')">
|
|
<i class="bi bi-eye" id="eye1"></i>
|
|
</button>
|
|
</div>
|
|
{{ form_errors(form.plainPassword.first) }}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold">Confirm password</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text field-icon"><i class="bi bi-lock-fill"></i></span>
|
|
{{ form_widget(form.plainPassword.second, {attr: {class: 'form-control', placeholder: '••••••••', id: 'pwd2'}}) }}
|
|
<button class="btn btn-outline-secondary" type="button" onclick="togglePwd('pwd2','eye2')">
|
|
<i class="bi bi-eye" id="eye2"></i>
|
|
</button>
|
|
</div>
|
|
{{ form_errors(form.plainPassword.second) }}
|
|
{{ form_errors(form.plainPassword) }}
|
|
</div>
|
|
|
|
<div class="pt-2 border-top">
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="bi bi-person-check me-1"></i>Create account
|
|
</button>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
</div>
|
|
<div class="card-footer text-center py-3 text-muted small">
|
|
Already have an account? <a href="{{ path('app_login') }}">Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
<script>
|
|
function togglePwd(inputId, eyeId) {
|
|
const input = document.getElementById(inputId);
|
|
const eye = document.getElementById(eyeId);
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
eye.className = 'bi bi-eye-slash';
|
|
} else {
|
|
input.type = 'password';
|
|
eye.className = 'bi bi-eye';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|