kpsul/kfet/templates/kfet/account_create.html
2020-08-28 18:45:07 +02:00

86 lines
3 KiB
HTML

{% extends "kfet/base_form.html" %}
{% load staticfiles %}
{% block title %}Nouveau compte{% endblock %}
{% block header-title %}Création d'un compte{% endblock %}
{% block extra_head %}
<script src="{% static 'vendor/jquery/jquery.autocomplete-light.min.js' %}" type="text/javascript"></script>
{% endblock %}
{% block main %}
<form action="" method="post" class="account_create">
{% csrf_token %}
<div>
{{ trigramme_form.trigramme.errors }}
{{ trigramme_form.trigramme }}
</div>
<p class="help-block">Les mots contenant des caractères non alphanumériques seront ignorés</p>
<input type="text" name="q" id="search_autocomplete" spellcheck="false" placeholder="Chercher un utilisateur par nom, prénom ou identifiant clipper" class="form-control">
<div style="position:relative;">
<div id="search_results"></div>
</div>
<div class="form-horizontal">
<div id="form-placeholder">
{% include 'kfet/account_create_form.html' %}
</div>
{% if not perms.kfet.add_account %}
{% include 'kfet/form_authentication_snippet.html' %}
{% endif %}
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
// Affichage des résultats d'autocomplétion
$('input#search_autocomplete').yourlabsAutocomplete({
url: '{% url "kfet.account.create.autocomplete" %}',
minimumCharacters: 3,
id: 'search_autocomplete',
choiceSelector: 'li:has(a)',
container: $("#search_results"),
box: $("#search_results"),
});
// Chargement du formulaire adapté au choix sélectionné
$('input#search_autocomplete').bind(
'selectChoice',
function(e, choice, autocomplete) {
autocomplete.hide();
link = choice.find('a:first');
if (link.length && link.attr('href') != undefined) {
$('#form-placeholder').html("").load(link.attr('href'));
}
}
);
// Vérification client de la validité
// et de ladisponibilité du trigramme choisi
$('#id_trigramme').on('input', function() {
var trigramme = $('#id_trigramme').val().toUpperCase();
var pattern = /^[^a-z]{3}$/;
if (!(trigramme.match(pattern))) {
$('#id_trigramme')
.css('background', '#fff')
.css('color', '#000');
} else {
$.ajax({
dataType: "json",
url: "{% url "kfet.account.is_validandfree.ajax" %}",
data: { trigramme: trigramme },
}).done(function(data) {
if (data['is_free']) {
$('#id_trigramme').css('background', '#009011');
} else {
$('#id_trigramme').css('background', '#C8102E');
}
$('#id_trigramme').css('color', '#fff');
});
}
});
});
</script>
{% endblock %}