gestioCOF/kfet/templates/kfet/account_create.html
2016-09-03 23:44:45 +02:00

95 lines
3.3 KiB
HTML

{% extends "kfet/base.html" %}
{% load staticfiles %}
{% block title %}Nouveau compte{% endblock %}
{% block extra_head %}
<script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
{% endblock %}
{% block content-header-title %}Création d'un compte{% endblock %}
{% block content %}
{% include 'kfet/base_messages.html' %}
<div class="row form-only">
<div class="col-sm-12 col-md-8 col-md-offset-2">
<div class="content-form">
<form action="{% url "kfet.account.create" %}" method="post" class="account_create">
{% csrf_token %}
<div>
{{ trigramme_form.trigramme.errors }}
{{ trigramme_form.trigramme }}
</div>
<div id="trigramme_valid"></div>
<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>
</div>
</div>
</div>
<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: 0,
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 container = '#trigramme_valid';
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 %}