Improve signup css

public/css/style.css

@@ -104,23 +104,42 @@ header.header img {
  text-align: center;
 }
 
+#signupContain {
+  background-color: lightgray;
+  opacity: 0.9;
+  margin: auto;
+  margin-top: 1rem;
+  padding:1rem;
+  width: 500px;
+}
+
+#firstnameDiv {
+  width: 49%;
+  display: inline-block;
+}
+
+#lastnameDiv {
+  width: 50%;
+  display: inline-block;
+}
+
+#champsOgligatoire {
+  float: right;
+  font-size: 0.8em;
+}
+
+#validSignup {
+  display: block;
+  margin: auto;
+}
+
 /******************************************************************/
 /*                           LOADING PUBKEY                       */
 /******************************************************************/
 
-/*.loadingPubkey {
-//    display:    none;
-    position:   fixed;
-    z-index:    1000;
-    top:        0;
-    left:       0;
-    height:     100%;
-    width:      100%;
-    background: rgba( 255, 255, 255, .8 ) 
-                url('http://i.stack.imgur.com/FhHRx.gif') 
-                50% 50% 
-                no-repeat;
-}*/
+#cle_pub {
+  display:    none;
+}
 
 .loadingPubkey {
     display:    none;

src/Account/Action/SignupAction.php

@@ -60,9 +60,9 @@ class SignupAction
         $validator = (new Validator($params))
             ->required('username', 'pubkey', 'email', 'password', 'password_confirm', 'created_at')
             ->length('username', 3)
-            ->length('pubkey', 44)
-            ->length('firstname', 2)
-            ->length('lastname', 2)
+            ->length('pubkey', 43)
+            ->length('firstname', 0)
+            ->length('lastname', 0)
             ->email('email')
             ->confirm('password')
             ->length('password', 4)

src/Account/views/signup.twig

@@ -2,19 +2,21 @@
 
 {% block body %}
 <!--  <script type="text/javascript" src="../../../public/js/script.js"></script>-->
-  <div class="container" style="background-color: lightgray;opacity: 0.9;margin: 1rem;padding:1rem;">
+  <div class="container" id="signupContain">
     <form action="{{ path('account.signup') }}" method="post">
       {{ csrf_input() }}
-      {{ field('username', user.username, "Pseudo") }}
+      {{ field('username', user.username, "Pseudo *") }}
       <div class="loadingPubkey"></div>
       <div id="livesearch-pubkey"></div>
-      <div id=cle_pub>{{ field('pubkey', user.pubkey, "Clé publique") }}</div>
-      {{ field('firstname', user.firstname, "Prénom") }}  {{ field('lastname', user.lastname, "Nom") }}
-      {{ field('email', user.email, "Email", {type: 'email'}) }}
-      {{ field('password', null, "Mot de passe", {type: 'password'}) }}
-      {{ field('password_confirm', null, "Confirmez le mot de passe", {type: 'password'}) }}
+      <div id=cle_pub>{{ field('pubkey', user.pubkey, "Clé publique*") }}</div>
+      <div id=lastnameDiv>{{ field('lastname', user.lastname, "Nom") }}</div>
+      <div id=firstnameDiv>{{ field('firstname', user.firstname, "Prénom") }}</div>
+      {{ field('email', user.email, "Email *", {type: 'email'}) }}
+      {{ field('password', null, "Mot de passe *", {type: 'password'}) }}
+      {{ field('password_confirm', null, "Confirmez le mot de passe *", {type: 'password'}) }}
+      <div id="champsOgligatoire">* Champs obligatoires</div>
       {{ field('created_at', date(), null, {type: 'hidden'}) }}
-      <button class="btn btn-primary">S'inscrire</button>
+      <button class="btn btn-primary" id="validSignup">S'inscrire</button>
     </form>
   </div>
 
@@ -24,7 +26,7 @@
 var textInput = document.getElementById('username');
 var timeout = null;
 $body = $("body");
-noPubKey("hide")
+(document.getElementById("pubkey").value) ? noPubKey("block") : true ;
 
 textInput.onkeyup = function (e) {
     clearTimeout(timeout);
@@ -36,9 +38,9 @@ textInput.onkeyup = function (e) {
                 pubkeyIsNull = pubkeyAnswer.includes("Aucune clé n'a été trouvé à partir de ce pseudo");
  //               (pubkeyIsNull) ? sentenceAnswer=this.responseText : sentenceAnswer="j'ai trouvé ta clé publique Ḡ1 !";  
 //                sentenceAnswer=this.responseText;
-                document.getElementById("livesearch-pubkey").innerHTML=pubkeyAnswer;
+                (pubkeyIsNull) ? document.getElementById("livesearch-pubkey").innerHTML=pubkeyAnswer : document.getElementById("livesearch-pubkey").innerHTML='ḠTrouvé une clé ! =)<br>Clé publique: ' + pubkeyAnswer;
                 (pubkeyIsNull) ? document.getElementById("pubkey").value="" : document.getElementById("pubkey").value=pubkeyAnswer;
-                document.getElementById("livesearch-pubkey").style.border="1px solid #A5ACB2";
+                document.getElementById("livesearch-pubkey").style.border="2px solid #A5ACB2";
                 (pubkeyIsNull) ? noPubKey("block") : noPubKey("hide");
             }
         }