Revue textes + CSS pages inscription/connexion

This commit is contained in:
Fabrice PENHOËT 2020-08-11 17:04:59 +02:00
parent 44881a8766
commit e417dbb7a5
9 changed files with 84 additions and 43 deletions

View File

@ -41,7 +41,7 @@
<div id="message"></div>
<form class="needJS" id="connection" method="POST">
<fieldset>
<label for="email">Email :</label><input id="email" type="email" name="email" placeholder="Adresse e-mail utilisée pour ce site" class="cardboard"required>
<label for="email">E-mail :</label><input id="email" type="email" name="email" placeholder="Adresse e-mail utilisée pour ce site" class="cardboard"required>
</fieldset>
<fieldset>
@ -66,10 +66,10 @@
<div id="response"></div>
<div class="framed">
<h2>Besoin d'aide?</h2>
<p class="engraved">Si vous avez oublié votre mot de passe, il vous suffit de cocher la case "Je souhaite recevoir un lien de connexion par e-mail". Un lien valide pendant une courte durée vous permettra de vous connecter au site.</p>
<p class="engraved">Si vous ne vous souvenez pas non plus de l'adresse e-mail utilisée sur ce site ou que vous n'y avez plus accès, vous pouvez <a href="/contact.html">nous contacter</a> en fournissant des informations permettant de vous identifier.</p>
<p class="engraved">La case "Je souhaite ne pas avoir à me connecter à chaque fois." vous permettra de rester connecté.e jusqu'à 6 mois, pour peu que vous utilisiez le même navigateur internet.</p>
<h2>Besoin d'aide ?</h2>
<p class="engraved">Si vous avez <b>oublié votre mot de passe</b>, il vous suffit de cocher la case "Je souhaite recevoir un lien de connexion par e-mail". Un lien valide pendant une courte durée vous permettra de vous connecter au site.</p>
<p class="engraved">Si vous ne vous souvenez pas non plus de l'adresse e-mail utilisée sur ce site ou que vous n'y avez plus accès, vous pouvez <a href="/contact.html">me contacter</a>, en fournissant des informations permettant de vous identifier.</p>
<p class="engraved">La case <b>"Je souhaite ne pas avoir à me connecter à chaque fois."</b> vous permettra de rester connecté jusqu'à 6 mois, pour peu que vous utilisiez le même navigateur internet sur le même ordinateur.</p>
</div>
</div>

View File

@ -40,30 +40,33 @@
<noscript>Désolé, mais pour l'instant, l'utilisation de WikiLerni nécessite l'activation du JavaScript.</noscript>
<form class="needJS" id="subscription" method="POST">
<fieldset>
<label for="name">Nom ou pseudo: </label><input id="name" type="text" name="name" placeholder="Pseudo de votre choix" class="cardboard" >
<label for="name">Nom ou pseudonyme : </label><input id="name" type="text" name="name" placeholder="Pseudo de votre choix" class="cardboard" >
</fieldset>
<fieldset>
<label for="email">Email: </label><input id="email" type="email" name="email" placeholder="Adresse e-mail" class="cardboard">
<label for="email">E-mail : </label><input id="email" type="email" name="email" placeholder="Adresse e-mail" class="cardboard">
<div id="emailMessage" class="cardboard"></div>
</fieldset>
<div id="emailMessage" class="cardboard"></div>
<fieldset>
<label for="password">Mot de passe: </label><input id="password" type="password" name="password" placeholder="Mot de passe de votre choix" class="cardboard">
<label for="password">Mot de passe : </label><input id="password" type="password" name="password" placeholder="Mot de passe de votre choix" class="cardboard">
<div id="passwordMessage" class="cardboard"><i>Au moins 8 caractères. <a href="#password" id="getPassword">Générer un mot de passe</a>.</i></div>
</fieldset>
<div id="passwordMessage" class="cardboard"><i>Au moins 8 caractères. <a href="#password" id="getPassword">Générer un mot de passe</a>.</i></div>
<fieldset>
<label for="codeGodfather">Code/e-mail parrainage: </label><input id="codeGodfather" type="text" name="codeGodfather" placeholder="Code ou email de votre parrain." class="cardboard">
<label for="codeGodfather">Code/e-mail parrain : </label><input id="codeGodfather" type="text" name="codeGodfather" placeholder="Code ou email de votre parrain." class="cardboard">
<div id="codeGodfatherMessage" class="cardboard"><i>Facultatif.</i></div>
</fieldset>
<div id="codeGodfatherMessage" class="cardboard"><i>Facultatif.</i></div>
<ul class="checkbox_li">
<li class="checkbox_li">
<label for="cguOk" class="check"><input type="checkbox" id="cguOk" name="cguOk" value="true" /><div class="checkbox_override"></div> J'accepte <a href="/CGV-CGU.html">les Conditions Générale d'Utilisation</a> du site (requis).</label>
<label for="cguOk" class="check"><input type="checkbox" id="cguOk" name="cguOk" value="true" /><div class="checkbox_override"></div> J'accepte <a href="/CGV-CGU.html" target="_blank" rel="noopener" title="À lire :)">les Conditions Générale d'Utilisation</a> du site (requis).</label>
</li>
<li class="checkbox_li">
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> J'accepte de recevoir les nouveaux quizs WikiLerni par email (facultatif).</label>
<label for="newsletterOk" class="check"><input type="checkbox" id="newsletterOk" name="newsletterOk" value="true" /><div class="checkbox_override"></div> Je souhaite recevoir de nouveaux quizs par e-mail (facultatif et vous pourrez stopper facilement).</label>
</li>
</ul>
<div class="input_wrapper">
@ -77,7 +80,7 @@
<p class="engraved">La saisie d'un pseudonyme, d'une adresse e-mail et d'un mot de passe <b>est obligatoire</b> et <b>vous devez accepter les Conditions Générales d'Utilisation</b>.</p>
<p class="engraved">Votre pseudonyme est complétement libre, mais servira à personnaliser certains affichages.</p>
<p class="engraved"><b>Vous recevrez un lien sur l'adresse e-mail saisie</b> sur lequel vous devrez cliquer pour valider la création de votre compte.</p>
<p class="engraved"><b>Votre mot de passe doit compter au moins 8 caractères.</b> Si vous manquez d'inspiration, cliquez sur le lien "Générer un mot de passe" pour en obtenir un !</p>
<p class="engraved"><b>Votre mot de passe doit compter au moins 8 caractères.</b> Si vous manquez d'inspiration, cliquez sur le lien "Générer un mot de passe" pour en obtenir un.</p>
<p class="engraved">Si vous connaissez une personne déjà inscrite à WikiLerni, <b>vous pouvez fournir son code parrain ou encore son adresse e-mail</b>. Dans le cas où vous optez ensuite pour un abonnement prémium, il sera alors allongé de 30 jours grâce à ce parrainage.</p>
</div>

View File

@ -235,7 +235,13 @@ input:checked ~ .checkbox_override {
border-top: 1px solid rgba(255,255,255,0.5);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.25);
}
}
::placeholder
{
color:#c6b4cb;
}
/*#ERROR:target, #SUCCESS:target, #INFO:target,*/
p.error, p.success, p.info,
@ -264,7 +270,7 @@ background-image: url('../img/background-texture.png');
@media screen and (max-width: 600px) {
footer
{font-size: 0.75em;}
{font-size: 0.7em;}
header ul li::after,
footer ul li::after
@ -273,8 +279,8 @@ background-image: url('../img/background-texture.png');
header ul li,
footer ul li
{display: inline-block;
margin-left: 0.5em;
margin-right: 0.5em;}
margin-left: 0.2em;
margin-right: 0.2em;}
header ul li::before,
footer ul li::before

View File

@ -221,6 +221,11 @@ input:checked ~ .checkbox_override {
background-color: rgba(255, 255, 255, 0.25);
}
::placeholder
{
color:#c6b4cb;
}
p.error, p.success, p.info,
div.error, div.success, div.info
{

View File

@ -48,7 +48,7 @@
ul.checkbox_li
{
width:100%;
padding-left:1em;
padding-left: 0 1em;
}
li.checkbox_li
{
@ -67,7 +67,7 @@ margin-left: 1%;
#login .framed .engraved
{text-align: justify;
{text-align: left;
margin: 1em;}
#login .error, #login .success, #login .info
@ -81,7 +81,17 @@ margin-left: 1%;
{width: 90%;
text-align: right;}
#login label
/*#login label
{width: auto;
float: left;}
float: left;}*/
#login label, input {width: 90%; }
ul.checkbox_li
{
width:90%;
padding-left: 1em;
}
}

View File

@ -62,7 +62,7 @@ margin-left: 1%;
{margin-bottom: 0px;}
#login .framed .engraved
{text-align: justify;
{text-align: left;
margin: 1em;}
#login #ERROR, #login .error, #login .success, #login .info

View File

@ -54,19 +54,23 @@
ul.checkbox_li
{
width:100%;
padding-left:1em;
padding: 0 1em;
}
li.checkbox_li
{
width:100%;
width:90%;
}
#login label.check
#signup label.check
{
width:100%;
text-align:left;
display:inline-block;
margin-left: 1%;
}
#signup .framed .engraved
{text-align: left;
margin: 1em;}
#signup .error, #signup .info, #signup .success
{margin: 1em;
@ -78,7 +82,16 @@ margin-left: 1%;
{width: 90%;
text-align: right;}
#signup label
/*#signup label
{width: auto;
float: left;}
float: left;}*/
ul.checkbox_li
{
width:90%;
padding-left: 1em;
}
#signup label, input {width: 90%; }
}

View File

@ -61,6 +61,10 @@ display:inline;
margin-left: 1%;
}
#signup .framed .engraved
{text-align: left;
margin: 1em;}
#signup .error, #signup .info, #signup .success
{
margin: 1em;

View File

@ -4,7 +4,7 @@ module.exports =
needName: "Merci de choisir un nom d'utilisateur.",
needNotTooLongName: "Merci de choisir un nom d'utilisateur ne comptant pas plus de 70 caractères.",
needEmail: "Merci de saisir votre adresse e-mail.",
needUniqueEmail: "L'adresse e-mail que vous avez saisie est déjà utilisée par un autre utilisateur. Si vous avez déjà un compte, <a href='/#URL'>cliquez-ici pour vous connecter</a>.",
needUniqueEmail: "L'adresse e-mail que vous avez saisie est déjà utilisée pour un compte utilisateur. Si vous avez déjà un compte, <a href='/#URL'>cliquez-ici pour vous connecter</a>.",
needNotTooLongEmail: "Merci de saisir une adresse e-mail ne comptant pas plus de 255 caractères.",
needPassWord : "Merci de fournir un mot de passe.",
needLongPassWord : "Merci de fournir un mot de passe d'au moins MIN_LENGTH caractères.",
@ -13,14 +13,14 @@ module.exports =
needLanguage : "Il manque le code langue.",
needValidLastConnectionDate : "La date de dernière connexion n'est pas valide.",
needSMTP : "Il manque le serveur SMTP.",
needSMTPNotFound : "Il manque le serveur SMTP.",
needSMTPNotFound : "Il manque un serveur SMTP valide.",
needKnowNewsletterOk : "Il faut savoir si l'utilisateur accepte ou refuse de recevoir la newsletter.",
needTimeDifference : "Il faut connaître le nombre de minutes du décalage horaire.",
needMinTimeDifference : "Il faut fournir un nombre de minutes à enlever à l'heure GMT ne dépassant pas 720.",
needMaxTimeDifference : "Il faut fournir un nombre de minutes à ajouter à l'heure GMT ne dépassant pas 840.",
needUGCOk : "Vous devez accepter les CGU pour pouvoir créer votre compte. ",
godfatherNotFound: "Aucun utilisateur n'a été trouvé pour ce code parrain.",
godfatherFound: "Votre parrain a bien été trouvé !",
needUGCOk : "Merci d'accepter les CGU pour créer votre compte.",
godfatherNotFound: "Désolé mais aucun utilisateur n'a été trouvé pour ce code/e-mail parrain :(",
godfatherFound: "Votre \"parrain\" a bien été trouvé :)",
mailValidationMessage: "Votre inscription est bien enregistrée.\nPour la finaliser, merci de cliquer dans les 24H sur le lien de confirmation qui vient de vous être envoyé par e-mail.",
mailValidationLinkSubject : "Merci de valider votre inscription",
mailValidationLinkTxt : "Valider mon compte.",
@ -39,28 +39,28 @@ module.exports =
mailThankGodfatherBodyTxt : "Bonjour USER_NAME,\nGrâce à vous un nouvel utilisateur (EMAIL) vient de s'inscrire sur NOM_SITE.\nMerci et à bientôt !",
mailThankGodfatherBodyHTML : "<h3>Bonjour USER_NAME,</h3><p>Grâce à vous un nouvel utilisateur (EMAIL) vient de s'inscrire sur NOM_SITE.</p><p>Merci et à bientôt !</p>",
badLinkValidationMessage: "Votre lien de confirmation ne semble pas valide ou bien il a expiré. Vous pouvez en recevoir un nouveau <a href='#URL'>en cliquant ici</a>.",
emailNotFound: "Aucun utilisateur trouvé pour cette adresse e-mail.",
alreadyConnected: "Vous êtes déjà connecté(e) au site !",
needBeConnected: "Vous devez être connecté(e) pour accéder à cette page.",
emailNotFound: "Aucun compte utilisateur n'a été trouvé pour cette adresse e-mail.",
alreadyConnected: "Vous êtes déjà connecté au site !",
needBeConnected: "Vous devez être connecté pour accéder à cette page.",
connectionOk: "Connexion réussie.",
needChooseLoginWay: "Vous devez soit saisir votre mot de passe, soit cocher la case vous permettant de recevoir un lien de connexion par e-mail.",
needValidationToLogin : "Vous devez d'abord valider votre compte avant de vous connecter. Pour ce faire, un lien vient de vous être envoyé par e-mail.",
tooManyLoginFails : "Trop de tentatives de connexion infructueuses pour cette adresse e-mail. Vous devez attendre MINUTES minutes pour essayer de nouveau.",
badPassword: "Le mot de passe n'est pas le bon.",
tooManyLoginFails : "Désolé mais il y a eu trop de tentatives de connexion infructueuses pour cette adresse e-mail. Vous devez attendre MINUTES minutes pour essayer de nouveau.",
badPassword: "Aucun compte utilisateur ne correspond aux informations saisies.",
mailLoginLinkSubject : "Votre lien de connexion.",
mailLoginLinkTxt : "Me connecter.",
mailLoginLinkBodyTxt : "Bonjour USER_NAME,\n\nPour vous connecter à votre compte, cliquez sur le lien suivant sans tarder :\nLINK_URL",
mailLoginLinkBodyHTML : "<h3>Bonjour USER_NAME,</h3><p>Pour vous connecter à votre compte, cliquez sur le lien suivant sans tarder :</p>",
mailLoginLinkMessage : "Un lien de connexion vient de vous être envoyé sur votre adresse e-mail. Ne tardez pas à l'utiliser, car il n'est valable que durant ",
updatedOkMessage: "Vos informations ont bien été mises à jour.",
updatedNeedGoodEmail : "Mais la nouvelle adresse e-mail n'a pu être enregistrée car elle n'a pas un format correct.",
updatedNeedGoodEmail : "Mais la nouvelle adresse e-mail n'a pu être enregistrée, car elle n'a pas un format correct.",
updatedNeedUniqueEmail : "Mais la nouvelle adresse e-mail saisie (NEW_EMAIL) n'a pu être enregistrée, car elle est déjà utilisée pour un autre compte.",
mailUpdateLoginSubject : "Merci de valider vos nouveaux identifiants.",
mailUpdateLoginLinkTxt : "Valider.",
mailUpdateLoginBodyTxt : "Bonjour USER_NAME,\n\nPour valider vos nouveaux identifiants de connexion, cliquez sur le lien suivant sans tarder :\nLINK_URL",
mailUpdateLoginBodyHTML : "<h3>Bonjour USER_NAME,</h3><p>Pour valider vos nouveaux identifiants de connexion, cliquez sur le lien ci-dessous sans tarder.</p>",
mailUpdateLoginLinkMessage: "Cependant, vous avez modifié au moins un de vos identifiants de connexion (email et/ou mot de passe) et <b>vous devez cliquer sur le lien qui vient de vous êtres envoyé sur votre adresse (NEW_EMAIL) pour valider ce changement</b>. En attendant, merci de continuer à utiliser vos anciens identifiants.",
updatedNeedValidatedUser: "L'utilisateur que vous souhaité modifier n'existe pas/plus ou n'a pas encore validé son compte.",
mailUpdateLoginLinkMessage: "Cependant, vous avez modifié au moins un de vos identifiants de connexion (e-mail et/ou mot de passe) et <b>vous devez cliquer sur le lien qui vient de vous êtres envoyé sur votre adresse (NEW_EMAIL) pour valider ce changement</b>.<br>En attendant, merci de continuer à utiliser vos anciens identifiants.",
updatedNeedValidatedUser: "L'utilisateur que vous souhaitez modifier n'existe pas/plus ou n'a pas encore validé son compte.",
updatedNeedGoodGodfather : "Mais le nouveau code parrain n'a pu être retenu, car il ne correspond à aucun compte utilisateur ou à l'utilisateur lui-même.",
mailUpdateLoginOkMessage: "La mise à jour de vos identifiants a bien été enregistrée.",
updatedFailedGodfatherNotFound : "L'identifiant fourni pour le parrain ne correspond à aucun utilisateur.",
@ -74,7 +74,7 @@ module.exports =
deleteFailMessage: "Tentative de suppression d'un utilisateur inexistant : ",
mailDeleteLinkOkMessage: "Votre compte a bien été supprimé. Merci d'avoir utilisé nos services.",
mailDeleteLinkAlreadyMessage: "Il semble que vous ayez déjà validé la suppression de votre compte.",
mailDeleteLinkFailMessage: "Votre lien de suppression n'est pas valide ou alors il n'est plus valable.",
mailDeleteLinkFailMessage: "Votre lien de suppression n'est pas valide ou alors il a expiré.",
cronDeleteUnvalidedUsersMessage: " comptes utilisateurs non validés ont été supprimés.",
deleteInactiveUsersMessage: " comptes utilisateurs inactifs ont été supprimés.",
welcomeMessage: "Bienvenue #NAME !",