Amélioration début du form account_create

kfet/static/kfet/css/index.css

@@ -189,3 +189,72 @@ textarea {
     padding-left: 20px;
     font-size:25px;
 }
+
+/*
+ * Pages formulaires seuls
+ */
+
+.form-only .content-form {
+    margin:15px;
+
+    background:#fff;
+
+    padding:15px;
+}
+
+.form-only #id_trigramme {
+    display:block;
+    width:200px;
+    height:80px;
+    margin:0 auto 15px;
+    border:1px solid #ccc;
+
+    font-size:70px;
+
+    text-align:center;
+    text-transform:uppercase;
+}
+
+/*
+ * Specific account create
+ */
+
+.highlight_autocomplete {
+    font-weight:bold;
+    text-decoration:underline;
+}
+
+#search_results {
+    top:0 !important;
+    left:0 !important;
+}
+
+#search_results ul {
+    list-style-type:none;
+    padding:0;
+    background:rgba(255,255,255,0.8);
+}
+
+#search_results ul li.user_category {
+    font-weight:bold;
+    background:#c8102e;
+    color:#fff;
+}
+
+#search_results ul li a {
+    display:block;
+    padding:5px 20px;
+    height:100%;
+    width:100%;
+}
+
+#search_results ul li a:hover {
+    background:rgba(200,16,46,0.9);
+    color:#fff;
+    text-decoration:none;
+}
+
+#search_results ul li span.text {
+    display:block;
+    padding:5px 20px;
+}

kfet/templates/kfet/account_create.html

@@ -13,19 +13,31 @@
 
 {% include 'kfet/base_messages.html' %}
 
-<form action="{% url "kfet.account.create" %}" method="post">
-    {% csrf_token %}
-    {{ trigramme_form }}
-    <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">
-    <div id="search_results"></div>
-    <div id="form-placeholder">
-        {% include 'kfet/account_create_form.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 id="form-placeholder">
+          {% include 'kfet/account_create_form.html' %}
+        </div>
+        {% if not perms.kfet.add_account %}
+          Authentification:
+          <input type="password" name="KFETPASSWORD">
+        {% endif %}
+      </form>
     </div>
-    {% if not perms.kfet.add_account %}
-        <input type="password" name="KFETPASSWORD">
-    {% endif %}
-</form>
+  </div>
+</div>
 <script type="text/javascript">
     $(document).ready(function() {
         // Affichage des résultats d'autocomplétion
@@ -53,12 +65,14 @@
         // Vérification client de la validité
         // et de ladisponibilité du trigramme choisi
         $('#id_trigramme').on('input', function() {
-            var trigramme = $('#id_trigramme').val();
+            var trigramme = $('#id_trigramme').val().toUpperCase();
             var container = '#trigramme_valid';
 
             var pattern = /^[^a-z]{3}$/;
             if (!(trigramme.match(pattern))) {
-                $(container).text("Non valide");
+                $('#id_trigramme')
+                    .css('background', '#fff')
+                    .css('color', '#000');
             } else {
                 $.ajax({
                     dataType: "json",
@@ -66,10 +80,11 @@
                     data: { trigramme: trigramme },
                 }).done(function(data) {
                     if (data['is_free']) {
-                        $(container).text("OK");
+                        $('#id_trigramme').css('background', '#009011');
                     } else {
-                        $(container).text("Déjà pris");
+                        $('#id_trigramme').css('background', '#C8102E');
                     }
+                    $('#id_trigramme').css('color', '#fff');
                 });
             }
         });

kfet/templates/kfet/account_create_autocomplete.html

@@ -7,13 +7,13 @@
         </a>
     </li>
     {% if kfet %}
-        <li>Comptes existant</li>
+        <li class="user_category"><span class="text">Comptes existant</span></li>
         {% for account, user in kfet %}
-            <li>{{ account }} [{{ user|highlight_user:q }}]</li>
+        <li><span class="text">{{ account }} [{{ user|highlight_user:q }}]</span></li>
         {% endfor %}
     {% endif %}
     {% if users_cof %}
-        <li>Membres du COF</li>
+    <li class="user_category"><span class="text">Membres du COF</span></li>
         {% for user in users_cof %}
             <li>
                 <a href="{% url "kfet.account.create.fromuser" user.username %}">
@@ -23,7 +23,7 @@
         {% endfor %}
     {% endif %}
     {% if users_notcof %}
-        <li>Non-membres du COF</li>
+    <li class="user_category"><span class="text">Non-membres du COF</span></li>
         {% for user in users_notcof %}
             <li>
                 <a href="{% url "kfet.account.create.fromuser" user.username %}">
@@ -33,7 +33,7 @@
         {% endfor %}
     {% endif %}
     {% if clippers %}
-        <li>Utilisateurs clipper</li>
+    <li class="user_category"><span class="text">Utilisateurs clipper</span></li>
         {% for clipper in clippers %}
             <li>
                 <a href="{% url "kfet.account.create.fromclipper" clipper.username %}">
@@ -42,8 +42,8 @@
         {% endfor %}
     {% endif %}
     {% if not q %}
-        <li>Pas de recherche, pas de résultats !</li>
+    <li class="user_category"><span class="text">Pas de recherche, pas de résultats !</span></li>
     {% elif not options %}
-        <li>Aucune correspondance trouvée :-(</li>
+    <li class="user_category"><span class="text">Aucune correspondance trouvée :-(</span></li>
     {% endif %}
 </ul>

kfet/templates/kfet/kpsul.html

@@ -187,6 +187,12 @@ $(document).ready(function() {
         if (account_data['id'] != 0) {
             buttons += '<a href="/k-fet/accounts/'+account_data['trigramme']+'" class="btn btn-primary" target="_blank" title="Modifier"><span class="glyphicon glyphicon-cog"></span></a>';
         }
+        if (account_data['id'] == 0) {
+            var trigramme = triInput.val().toUpperCase();
+            if (isValidTrigramme(trigramme)) {
+                buttons += '<a href="/k-fet/accounts/new?trigramme='+trigramme+'" class="btn btn-primary" target="_blank" title="Créer"><span class="glyphicon glyphicon-plus"></span></a>';
+            }
+        }
         account_container.find('.buttons').html(buttons);
     }
 

kfet/views.py

@@ -123,7 +123,8 @@ def account_create(request):
                     messages.error(request, \
                         "Cet utilisateur a déjà un compte K-Fêt : %s" % e.trigramme)
     else:
-        trigramme_form = AccountTriForm()
+        initial = { 'trigramme': request.GET.get('trigramme', '') }
+        trigramme_form = AccountTriForm(initial = initial)
         account_form = None
         cof_form = None
         user_form = None