From 88aad45fbb177470b1c5ab6bfc4da69d3f070987 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= <aurelien.delobelle@ens.fr>
Date: Sat, 3 Sep 2016 15:21:26 +0200
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20d=C3=A9but=20du=20form=20ac?=
 =?UTF-8?q?count=5Fcreate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kfet/static/kfet/css/index.css                | 69 +++++++++++++++++++
 kfet/templates/kfet/account_create.html       | 47 ++++++++-----
 .../kfet/account_create_autocomplete.html     | 14 ++--
 kfet/templates/kfet/kpsul.html                |  6 ++
 kfet/views.py                                 |  3 +-
 5 files changed, 115 insertions(+), 24 deletions(-)

diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css
index 886aa8ae..c7f44821 100644
--- a/kfet/static/kfet/css/index.css
+++ b/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;
+}
diff --git a/kfet/templates/kfet/account_create.html b/kfet/templates/kfet/account_create.html
index ef6bc4ff..f875ae4a 100644
--- a/kfet/templates/kfet/account_create.html
+++ b/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');
                 });
             }
         });
diff --git a/kfet/templates/kfet/account_create_autocomplete.html b/kfet/templates/kfet/account_create_autocomplete.html
index 70a75f34..b99abecf 100644
--- a/kfet/templates/kfet/account_create_autocomplete.html
+++ b/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>
diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html
index fb9682dd..b3b91aca 100644
--- a/kfet/templates/kfet/kpsul.html
+++ b/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);
     }
 
diff --git a/kfet/views.py b/kfet/views.py
index f7f8728e..a2da8a7b 100644
--- a/kfet/views.py
+++ b/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