Modification de la page de login.

[Jawn]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !
Alors voilà, je vous expose mon problème. J'ai énormément fait de recherche pour réussir à modifier la page /login de mon forum (pas la connexion qui se trouve sur l'index, mais bien la page de connexion quand on clique sur "connexion"). Il n'existe aucun template, je me suis donc dit qu'il fallait passer par du JS. On m'a filé un coup de main pour tenter quelque chose qui marche très bien en externe mais une fois installé, surprise, ça ne marche pas !

Je viens donc demander un peu d'aide. J'ai déjà fouillé les pages que l'on pourrait me donner quant à ce problème mais n'aies pas trouvé de solution.

Voici le code :

Code:

if (document.URL == 'dark-and-cold.com/login') {
         http://Document.getElementsByTagName('form').innerHTML = '';
         console.log(document.getElementsByTagName('form'));
         var form = document.getElementsByTagName('form');
         form[0].innerHTML = '<meta charset="UTF-8"/><div class="login-wrapper"> <div class="login-left"> <img src="https://imgur.com/j04xP5S.png"/> <div class="h1"> Entrer sur Insomnia </div></div><div class="login-right"> <div class="h2"> Bienvenue sur nos terres : </div><div class="form-group"> <input placeholder="Full Name" id="full-name" type="text"/> <label for="full-name">Nom d\'utilisateur</label> </div><div class="form-group"> <input placeholder="Password" id="Password" type="password"/> <label for="Password">Mot de passe</label> </div><div class="checkbox-container"> <input type="checkbox"/> <div class="text-checkbox"> J\'accepte les conditions du service. </div></div><div class="button-area"> <button class="btn btn-secondary"> Connexion </button> <button class="btn btn-primary"> S\'inscrire </button> </div></div></div><style>@import url(\'https://fonts.googleapis.com/css?family=Lato:300,400,700\');*{box-sizing: border-box;}html, body{margin: 0; padding: 0; height: 100%;}body{font-family: \'Lato\', sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%); overflow: hidden;}input{font-family: inherit; -webkit-appearance: none; -moz-appearance: none; border: 0; border-bottom: 1px solid #AAAAAA; font-size: 16px; color: #000; border-radius: 0;}input[type="text"],input[type="password"]{width: 100%; height: 40px;}button,input:focus{outline: 0;}::-webkit-input-placeholder{font-size: 16px; font-weight: 300; letter-spacing: -0.00933333em;}.form-group{position: relative; padding-top: 15px; margin-top: 10px;}label{position: absolute; top: 0; opacity: 1; -webkit-transform: translateY(5px); transform: translateY(5px); color: #aaa; font-weight: 300; font-size: 13px; letter-spacing: -0.00933333em; transition: all 0.2s ease-out;}input:placeholder-shown + label{opacity: 0; -webkit-transform: translateY(15px); transform: translateY(15px);}.h1{color: #fff; opacity: 0.8; font-size: 20px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2405em; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); text-align: center; cursor: pointer; position: absolute;}.open .h1{-webkit-transform: translateX(200px) translateZ(0); transform: translateX(200px) translateZ(0);}.h2{color: #000; font-size: 20px; letter-spacing: -0.00933333em; font-weight: 600; padding-bottom: 15px;}.login-wrapper{width: 800px; height: 440px; background-color: #fff; box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative;}.login-left{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); overflow: hidden;}.login-left img{object-fit: cover; width: 100%; height: 100%; display: block; transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99); object-position: left;}.open .login-left img{-webkit-transform: translateX(280px) translateZ(0); transform: translateX(280px) translateZ(0);}.open .login-left{-webkit-transform: translateX(-400px) translateZ(0); transform: translateX(-400px) translateZ(0);}.login-right{padding: 40px; position: absolute; top: 0; right: 0; width: 400px; -webkit-transform: translateX(400px) translateZ(0); transform: translateX(400px) translateZ(0); transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);}.open .login-right{-webkit-transform: translateX(0px) translateZ(0); transform: translateX(0px) translateZ(0);}.checkbox-container{display: flex; margin-top: 35px;}.text-checkbox{color: #aaa; font-size: 16px; letter-spacing: -0.00933333em; font-weight: 300; margin-left: 15px;}input[type="checkbox"]{cursor: pointer; margin: 0; height: 22px; position: relative; width: 22px; -webkit-appearance: none; transition: all 180ms linear;}input[type="checkbox"]:before{border: 1px solid #aaa; background-color: #fff; content: \'\'; width: 20px; height: 20px; display: block; border-radius: 2px; transition: all 180ms linear;}input[type="checkbox"]:checked:before{background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%); border: 1px solid #000000;}input[type="checkbox"]:after{content: \'\'; border: 2px solid #fff; border-right: 0; border-top: 0; display: block; height: 4px; left: 4px; opacity: 0; position: absolute; top: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 12px; transition: all 180ms linear;}input[type="checkbox"]:checked:after{opacity: 1;}.button-area{display: flex; justify-content: space-between; margin-top: 30px;}.btn{font-family: inherit; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: none; border-radius: 2px; height: 40px; display: flex; padding: 0 35px; cursor: pointer; font-size: 16px; text-transform: uppercase; letter-spacing: -0.00933333em;}.btn-primary{color: #bba986; background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);}.btn-secondary{color: #bba986;}</style>  ';
         var openLoginRight=document.querySelector('.h1');
         var loginWrapper=document.querySelector('.login-wrapper');
         openLoginRight.addEventListener('click', function(){loginWrapper.classList.toggle('open');});
      }

Merci d'avance !

[Adam_sfp]

Bonjour

Comme vous avez fait un "tout en un" le script  intègre le HTML et le CSS vous êtes obligé de placer pas mal de  \ caractère d'échappement .. et on peut vite se retrouver avec des erreurs..

A votre place j’essaierai de faire votre page de login sur une page HTML ( en mettant donc votre html css et autres sur cette page )

Cette page aura un lien de type adressedevotreforum/h1-exemple

Ensuite vous pouvez essayer ce script dans gestion des pages javascript sur toutes les pages
Ce script va diriger vers votre page html servant de login page ( modifier /h1- par votre numéro de page html )

Code:

$(function() {
  /\/login/g.test(window.location.href) ? window.location = "/h1-" : " ";
});

*Attention soyez sur que votre code fonctionne sur la page html sinon vous risquez de tournez en boucle
et ne plus accéder à votre forum (il faudra désactiver le javascript du navigateur pour y accéder )...

Cdt.

[Jawn]

Merci beaucoup de votre réponse très rapide @"Adam_sfp" !
Alors normalement j'ai tout compris, sauf une petite chose. Le "modifier par le numéro de votre page HTML", je ne suis pas sûre de ce que c'est... xD !
Là, en créeant ton ma page HTML, le lien ressemble à adresseduforum//h2-h1-exemple; je dois donc y mettre le "h2" ?

EDIT : AH, J'AI TROUVÉ ! Seul souci, dans ma page HTML, le bouton de connexion ne marche pas ! Sachant qu'on ne peut pas y mettre de valeurs templates dedans, je suis un peu coincée :/

[Adam_sfp]

Bonsoir

Il vous manque pas mal d'éléments dans votre page HTML

Voici un exemple de base qui devrait vous permettre d'avancer

Code:

<form action="/login" method="post" name="form_login">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" />
    <label for="password">Password:</label>
    <input type="text" id="password" name="password" />
    <input value="Enter" id="login" name="login" type="submit" />

</form>

Pour vos boutons cela donnera quelque chose dans ce style

Code:

<button class="btn btn-secondary" value="Enter" id="login" name="login" type="submit" >
     Connexion    
 </button>

Code:

<button class="btn btn-primary" onclick="location.href='/register'">
                                                                    
                          
                          
     S'inscrire    
 </button>

Cdt.


*vous pouvez aussi ajouter mot de passe oublié avec ce lien

Code:

/profile?mode=sendpassword

[Jawn]

Mmh, alors, après quelques essaies, il y a quelques petits problèmes (je n'y connais vraiment rien, désolée).
Les mots "nom" et "mot de passe" sr chevauchent, et le bouton connexion ne marchent pas, juste le "entrer"

Je vous laisse le code à la suite :

Code:

<meta charset="UTF-8" />
<!--              ---------- Thanks Daniel Almeida for the reference  ---------              -->
<!--              https://dribbble.com/shots/4027518-Login-screen-interaction              -->
<div class="login-wrapper">
                              
   <div class="login-left">
                      <img src="https://imgur.com/j04xP5S.png" />               
      <div class="h1">
                     Entrer sur Insomnia           
      </div>
                                 
   </div>
                              
   <div class="login-right">
                                   
      <div class="h2">
                     Bienvenue sur nos terres :           
      </div>
                                   
      <div class="form-group">
         
         <form name="form_login" method="post" action="/login">
                <label for="username">Username:</label>    <input id="username" name="username" type="text" />    <label for="password">Password:</label>    <input name="password" id="password" type="text" />    <input type="submit" name="login" id="login" value="Enter" /> 
         </form>
                                      
         <div class="button-area">
                                           
            <button type="submit" name="login" id="login" value="Enter" class="btn btn-secondary">
               Connexion
            </button>
                                                 
            <button onclick="location.href='/register'" class="btn btn-primary">
               S'inscrire
            </button>
                                         
         </div>
                                    
      </div>
   </div>
       <style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

* {
  box-sizing: border-box;
}
a {
text-decoration:none;
}
a:hover { text-decoration:none !important;}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%);
  overflow: hidden;
}

input {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-bottom: 1px solid #AAAAAA;
  font-size: 16px;
  color: #000;
  border-radius: 0;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 40px;
}

button,
input:focus {
  outline: 0;
}

::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.00933333em;
}

.form-group {
  position: relative;
  padding-top: 15px;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  color: #aaa;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.00933333em;
  transition: all 0.2s ease-out;
}

input:placeholder-shown  + label {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

.h1 {
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2405em;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  text-align: center;
  cursor: pointer;
  position: absolute;
}

.open .h1 {
  -webkit-transform: translateX(200px) translateZ(0);
          transform: translateX(200px) translateZ(0);
}

.h2 {
  color: #000;
  font-size: 20px;
  letter-spacing: -0.00933333em;
  font-weight: 600;
  padding-bottom: 15px;
}

.login-wrapper {
  width: 800px;
  height: 440px;
  background-color: #fff;
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.login-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  overflow: hidden;
}

.login-left img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  object-position: left;
}

.open .login-left img {
  -webkit-transform: translateX(280px) translateZ(0); 
          transform: translateX(280px) translateZ(0); 
}

.open .login-left {
  -webkit-transform: translateX(-400px) translateZ(0);
          transform: translateX(-400px) translateZ(0);
}

.login-right {
  padding: 40px;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  -webkit-transform: translateX(400px) translateZ(0);
          transform: translateX(400px) translateZ(0);
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

.open .login-right {
  -webkit-transform: translateX(0px) translateZ(0);
          transform: translateX(0px) translateZ(0);
}

.checkbox-container {
  display: flex;
  margin-top: 35px;
}

.text-checkbox {
  color: #aaa;
  font-size: 16px;
  letter-spacing: -0.00933333em;
  font-weight: 300;
  margin-left: 15px;
}

input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  height: 22px;
  position: relative;
  width: 22px;
  -webkit-appearance: none;
  transition: all 180ms linear;
}

input[type="checkbox"]:before {
    border: 1px solid #aaa;
    background-color: #fff;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 2px;
    transition: all 180ms linear;
}

input[type="checkbox"]:checked:before {
    background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%);
    border: 1px solid #000000;
}

input[type="checkbox"]:after {
  content: '';
  border: 2px solid #fff;
  border-right: 0;
  border-top: 0;
  display: block;
  height: 4px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 6px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 12px;
  transition: all 180ms linear;
}

input[type="checkbox"]:checked:after {
    opacity: 1;
}

.button-area {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none; 
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 40px;
  display: flex;
  padding: 0 35px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.00933333em;
}

.btn-primary {
 
    background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn-primary a {
 color: #bba986;
}
.btn-secondary {
  color: #bba986; 
}
</style>    <script>
  var openLoginRight = document.querySelector('.h1');
var loginWrapper = document.querySelector('.login-wrapper');

openLoginRight.addEventListener('click', function(){
  loginWrapper.classList.toggle('open');
});
  </script>
</div>

[Jawn]

Up

[Jawn]

Up ^^

[Adam_sfp]

Bonsoir

Peut être comme ceci:

Code:

<meta charset="UTF-8" />
<!--      ---------- Thanks Daniel Almeida for the reference  ---------      -->
<!--      https://dribbble.com/shots/4027518-Login-screen-interaction      --><div class="login-wrapper">
              
   <div class="login-left">
              <img src="https://imgur.com/j04xP5S.png" />       
      <div class="h1">
             Entrer sur Insomnia   
      </div>
                 
   </div>
              
   <div class="login-right">
                   
      <div class="h2">
             Bienvenue sur nos terres :   
      </div>
            <form style="" action="/login" method="post" name="form_login">       
      <div class="form-group">
                   <input type="text" name="username" id="username" placeholder="Full Name" />      <label for="username">Nom d'utilisateur</label>           
      </div>
         
     
         
         
                   
      <div class="form-group">
                   <input type="text" id="password" name="password" placeholder="Password"/>      <label for="password">Mot de passe</label>           
      </div>
         
         
     
         
         
                   
      <div class="checkbox-container">
                   <input type="checkbox" />         
         <div class="text-checkbox">
                J'accepte les conditions du service.   
         </div>
                      
      </div>
           
                 
                       
                       
                       
      <div class="button-area">
                        
         <button class="btn btn-secondary" value="" id="login" name="login" type="submit" >
                Connexion   
         </button>
                  
         <button class="btn btn-primary" onclick="location.href='http://google.com'">
                                                                   
                         
                         
                S'inscrire   
         </button>
                  
      </div>
                 
   

    <style>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: linear-gradient(243.87deg, #262624 30.6%, #f7a729 130.6%);
  overflow: hidden;
}

input {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  border-bottom: 1px solid #AAAAAA;
  font-size: 16px;
  color: #000;
  border-radius: 0;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 40px;
}

button,
input:focus {
  outline: 0;
}

::-webkit-input-placeholder {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.00933333em;
}

.form-group {
  position: relative;
  padding-top: 15px;
  margin-top: 10px;
}

label {
  position: absolute;
  top: 0;
  opacity: 1;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  color: #aaa;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: -0.00933333em;
  transition: all 0.2s ease-out;
}

input:placeholder-shown  + label {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

.h1 {
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2405em;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  text-align: center;
  cursor: pointer;
  position: absolute;
}

.open .h1 {
  -webkit-transform: translateX(200px) translateZ(0);
          transform: translateX(200px) translateZ(0);
}

.h2 {
  color: #000;
  font-size: 20px;
  letter-spacing: -0.00933333em;
  font-weight: 600;
  padding-bottom: 15px;
}

.login-wrapper {
  width: 800px;
  height: 440px;
  background-color: #fff;
  box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.login-left {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  overflow: hidden;
}

.login-left img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
  object-position: left;
}

.open .login-left img {
  -webkit-transform: translateX(280px) translateZ(0); 
          transform: translateX(280px) translateZ(0); 
}

.open .login-left {
  -webkit-transform: translateX(-400px) translateZ(0);
          transform: translateX(-400px) translateZ(0);
}

.login-right {
  padding: 40px;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  -webkit-transform: translateX(400px) translateZ(0);
          transform: translateX(400px) translateZ(0);
  transition: all 770ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
}

.open .login-right {
  -webkit-transform: translateX(0px) translateZ(0);
          transform: translateX(0px) translateZ(0);
}

.checkbox-container {
  display: flex;
  margin-top: 35px;
}

.text-checkbox {
  color: #aaa;
  font-size: 16px;
  letter-spacing: -0.00933333em;
  font-weight: 300;
  margin-left: 15px;
}

input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  height: 22px;
  position: relative;
  width: 22px;
  -webkit-appearance: none;
  transition: all 180ms linear;
}

input[type="checkbox"]:before {
    border: 1px solid #aaa;
    background-color: #fff;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 2px;
    transition: all 180ms linear;
}

input[type="checkbox"]:checked:before {
    background: linear-gradient(198.08deg, #f1a62f 45.34%, #e2e69d 224.21%);
    border: 1px solid #000000;
}

input[type="checkbox"]:after {
  content: '';
  border: 2px solid #fff;
  border-right: 0;
  border-top: 0;
  display: block;
  height: 4px;
  left: 4px;
  opacity: 0;
  position: absolute;
  top: 6px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 12px;
  transition: all 180ms linear;
}

input[type="checkbox"]:checked:after {
    opacity: 1;
}

.button-area {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.btn {
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none; 
  background-color: transparent;
  border: none;
  border-radius: 2px;
  height: 40px;
  display: flex;
  padding: 0 35px;
  cursor: pointer;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: -0.00933333em;
}

.btn-primary {
    color: #bba986;
    background: linear-gradient(198.08deg, #000000 45.34%, #ffb025 224.21%);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
  color: #bba986; 
}
</style>      </form>  <script>
  var openLoginRight = document.querySelector('.h1');
var loginWrapper = document.querySelector('.login-wrapper');

openLoginRight.addEventListener('click', function(){
  loginWrapper.classList.toggle('open');
});
  </script>

Cdt.

[Jawn]

OH MON DIEU CA MARCHE !
Merci merci merci merci un million de fois !!!