# Szablon: edycja konta
# W katalogu
|--src/ → Pliki źródłowe
| |--templates/ → Szablony: katalog główny
| | |--pages/ → Szablony: podstrony
| | | |--edycja-konta.twig
# HTML
{% extends '../layouts/default.twig' %}
{% set head_title = 'Edycja konta' %}
{% 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 %}
{% include '../../modules/top/top.twig' %}
<div class="container">
<div class="row">
<div class="col-12 col-lg-3 col-hd-2">
{% include '../../modules/sidebar/sidebar.twig' %}
</div>
<div class="col-12 col-lg-9 col-hd-10">
<div class="titleBar">
<div>
<div class="titleBar__title">Edycja konta</div>
</div>
</div>
<div class="page-container page-editAccount">
<div class="page-editAccountTitle">
<h1>Adam Kowalski</h1>
<h3>[email protected]</h3>
</div>
<form class="formValidation" action="">
<div class="bg bg-grey">
<div class="m-titleBar">
<div>
<div class="titleBar__title">Dane uczestnika</div>
</div>
</div>
<div class="form-module form-module__pr">
<div class="input-field">
<label for="">Imię</label>
<input type="text" name="fname" required>
</div>
<div class="input-field">
<label for="">Nazwisko</label>
<input type="text" name="lname" required>
</div>
</div>
<div class="form-module form-module__pr">
<div class="input-field input-field__half">
<label for="">Numer telefonu</label>
<input type="number" name="phone" value="+48 123 456 789" required>
</div>
</div>
<div class="m-titleBar">
<div>
<div class="titleBar__title">Zmiana hasła</div>
<p>Jeśli chcesz zmienić swoje hasło, wpisz je poniżej.</p>
</div>
</div>
<div class="form-module form-module__pr">
<div class="input-field" data-js="showPassword">
<label for="">Nowe hasło</label>
<div class="input-field__icon">
<input type="password" name="password" required>
<i class="icon icon-eye-slash"></i>
</div>
</div>
<div class="input-field" data-js="showPassword">
<label for="">Powtórz nowe hasło</label>
<div class="input-field__icon">
<input type="password" name="password2" required>
<i class="icon icon-eye-slash"></i>
</div>
</div>
</div>
</div>
<div class="button-sets button-sets__space-between button-sets__pr">
<div class="quarter order-1 order-md-0">
<a href="" class="btn btn-block">ANULUJ</a>
</div>
<div class="half order-0 order-md-1">
<button type="submit" class="btn btn-block btn-primary">ZAPISZ</button>
</div>
</div>
</form>
</div>
{% include '../components/footer.twig' with { 'container': false } %}
</div>
</div>
</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);
}
}
});
$('input[type="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 %}