Improve signup css

This commit is contained in:
poka 2019-11-08 02:55:37 +01:00
parent a5652703b1
commit 980148e2bb
3 changed files with 48 additions and 27 deletions

View File

@ -104,23 +104,42 @@ header.header img {
text-align: center; 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 */ /* LOADING PUBKEY */
/******************************************************************/ /******************************************************************/
/*.loadingPubkey { #cle_pub {
// display: none; 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;
}*/
.loadingPubkey { .loadingPubkey {
display: none; display: none;

View File

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

View File

@ -2,19 +2,21 @@
{% block body %} {% block body %}
<!-- <script type="text/javascript" src="../../../public/js/script.js"></script>--> <!-- <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"> <form action="{{ path('account.signup') }}" method="post">
{{ csrf_input() }} {{ csrf_input() }}
{{ field('username', user.username, "Pseudo") }} {{ field('username', user.username, "Pseudo *") }}
<div class="loadingPubkey"></div> <div class="loadingPubkey"></div>
<div id="livesearch-pubkey"></div> <div id="livesearch-pubkey"></div>
<div id=cle_pub>{{ field('pubkey', user.pubkey, "Clé publique") }}</div> <div id=cle_pub>{{ field('pubkey', user.pubkey, "Clé publique*") }}</div>
{{ field('firstname', user.firstname, "Prénom") }} {{ field('lastname', user.lastname, "Nom") }} <div id=lastnameDiv>{{ field('lastname', user.lastname, "Nom") }}</div>
{{ field('email', user.email, "Email", {type: 'email'}) }} <div id=firstnameDiv>{{ field('firstname', user.firstname, "Prénom") }}</div>
{{ field('password', null, "Mot de passe", {type: 'password'}) }} {{ field('email', user.email, "Email *", {type: 'email'}) }}
{{ field('password_confirm', null, "Confirmez le mot de passe", {type: 'password'}) }} {{ 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'}) }} {{ 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> </form>
</div> </div>
@ -24,7 +26,7 @@
var textInput = document.getElementById('username'); var textInput = document.getElementById('username');
var timeout = null; var timeout = null;
$body = $("body"); $body = $("body");
noPubKey("hide") (document.getElementById("pubkey").value) ? noPubKey("block") : true ;
textInput.onkeyup = function (e) { textInput.onkeyup = function (e) {
clearTimeout(timeout); clearTimeout(timeout);
@ -36,9 +38,9 @@ textInput.onkeyup = function (e) {
pubkeyIsNull = pubkeyAnswer.includes("Aucune clé n'a été trouvé à partir de ce pseudo"); 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 !"; // (pubkeyIsNull) ? sentenceAnswer=this.responseText : sentenceAnswer="j'ai trouvé ta clé publique Ḡ1 !";
// sentenceAnswer=this.responseText; // 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; (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"); (pubkeyIsNull) ? noPubKey("block") : noPubKey("hide");
} }
} }