# Szablon: rejestracja
# W katalogu
|--src/ → Pliki źródłowe
| |--templates/ → Szablony: katalog główny
| | |--pages/ → Szablony: podstrony
| | | |--register.twig
# HTML
{% extends '../layouts/default.twig' %}
{% set head_title = 'Rejestracja' %}
{% set body_class = '' %}
{% block pagecss %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/password.min.css" integrity="sha256-V+gbO2e0sNon0tftdCs8J52KLEnhumk3FvNVA5R3iuM=" crossorigin="anonymous">
{% endblock %}
{% block page %}
<div class="page page-register">
<div class="container">
<div class="row">
<div class="col-12">
<div class="login-baner">
<a href="./" class="logo">
<img src="../img/logo.png" srcset="img/[email protected] 2x,
img/[email protected] 3x" alt="">
</a>
<a href="" class="btn btn-language">Change language <img src="img/flag-uk.jpg" srcset="img/[email protected] 2x,
img/[email protected] 3x"></a>
</div>
<div class="page-container">
<div class="bg-photo"></div>
<form class="formValidation" action="">
<div class="bg bg-grey">
<div class="m-titleBar">
<div class="titleBar__title">Zarejestruj się</div>
</div>
<div class="form-module">
<div class="input-field">
<label for="">Imię</label>
<input type="text" name="fname" value="Adam" required>
</div>
<div class="input-field">
<label for="">Nazwisko</label>
<input type="text" name="lname" required>
</div>
</div>
<div class="form-module">
<div class="input-field">
<label for="">Adres e-mail</label>
<input type="email" name="email" required>
</div>
<div class="input-field">
<label for="">Numer telefonu</label>
<input type="number" name="phone" required>
</div>
</div>
<div class="form-module">
<div class="input-field input-field__half" data-js="showPassword">
<label for="">Hasło</label>
<div class="input-field__icon">
<input type="password" id="password" name="password" required>
<i class="icon icon-eye-slash"></i>
</div>
</div>
</div>
<div class="form-module">
<div class="input-checkbox input-checkbox__half">
<label>
<input type="checkbox" name="rules" required/>
<span>Oświadczam, że zapoznałem/am się z treścią <a href="">Regulaminu</a> oraz <a
href="">Polityki Prywatności</a> i akceptuję ich postanowienia.</span>
</label>
</div>
<div class="input-radio input-checkbox__half">
<label>
<input type="radio" name="rules" required/>
<span>Oświadczam, że zapoznałem/am się z treścią <a href="">Regulaminu</a> oraz <a
href="">Polityki Prywatności</a> i akceptuję ich postanowienia.</span>
</label>
</div>
</div>
</div>
<div class="button-sets">
<div class="button-sets__placeholder"></div>
<div>
<button type="submit" class="btn btn-block btn-primary">ZAREJESTRUJ SIĘ</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% include '../components/footer.twig' %}
</div>
{% endblock %}
{% block pagejs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js" integrity="sha256-sPB0F50YUDK0otDnsfNHawYmA5M0pjjUf4TvRJkGFrI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_pl.min.js" integrity="sha256-dBjdiP5KbMpHWhMtrAZIL8MU3Rxz09JA+z8VS650njc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/password.min.js" integrity="sha256-XCB5dt3rHKQnJxv/aM01D/s00UmpnhaiEzLCWQdliXI=" crossorigin="anonymous"></script>
<script>
$('.formValidation').validate({
ignore:":hidden",
highlight: function(element) {
if($(element).is('.dropzone-validation')) {
$(element).parent().addClass('is-error');
} else if($(element).is('.invisible') || $(element).is('select')) {
$(element).parent().addClass('is-error');
} else {
$(element).addClass('is-error');
}
},
unhighlight: function(element) {
if($(element).is('.dropzone-validation')) {
$(element).parent().removeClass('is-error');
} else if($(element).is('.invisible') || $(element).is('select')) {
$(element).parent().removeClass('is-error');
} else {
$(element).removeClass('is-error');
}
},
errorElement: 'div',
errorClass: 'help is-error',
errorPlacement: function(error, element) {
if(element.is('.invisible') || element.is('select')) {
error.insertAfter(element.parent().find('.select2-container'));
} else if (element.is('.dropzone-validation')) {
error.insertAfter(element.parent());
} else if(element.is('input[type="checkbox"]')) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#password').password({
shortPass: 'Hasło jest za krótkie',
badPass: 'Słabe; dodaj więcej liter oraz cyfr',
goodPass: 'Średnie; spróbuj dodać znaki specjalne',
strongPass: 'Mocne!',
containsField: '',
enterPass: '',
showPercent: false,
showText: true, // shows the text tips
animate: true, // whether or not to animate the progress bar on input blur/focus
animateSpeed: 'fast', // the above animation speed
field: false, // select the match field (selector or jQuery instance) for better password checks
fieldPartialMatch: true, // whether to check for partials in field
minimumLength: 4 // minimum password length (below this threshold, the score is 0)
});
</script>
{% endblock %}