changement login css,js

2 years ago · a63c1449ca
3 changed files with 61 additions and 8 deletions
--- a/login/login.css
+++ b/login/login.css
@ -8,6 +8,7 @@ body{
    color: white;
    height: 100vh;
    display: flex;
+    justify-content: center;
    flex-direction: column;
    align-items: center;
 }
@ -18,7 +19,6 @@ body{
    text-align: center;
    padding: 1em;
    border-radius: 10px;
-    margin: auto;
 }
 h1{
    margin: 0 0 0.4em 0;
@ -36,4 +36,30 @@ input{
    margin: 0.4em 0;
    font-size: 12px;
    color: rgb(219, 143, 143);
+}
+.buttons{
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    margin-bottom: 0.8em;
+}
+.buttons .button{
+    border: 0;
+    background-color: #ffffff;
+    padding: 0.6em;
+    border-radius: 10px;
+    transition: 0.2s ease-in-out;
+}
+.buttons .button:hover{
+    background-color: #c7c7c7;
+    transition: 0.2s ease-in-out;
+}
+.buttons .button.active{
+    background-color: #002d5e;
+    color: #ffffff;
+    transition: 0.2s ease-in-out;
+}
+.buttons .button.active:hover{
+    background-color: #02203f;
+    transition: 0.2s ease-in-out;
 }
--- a/login/login.js
+++ b/login/login.js
@ -0,0 +1,21 @@
+let current = "login";
+
+function switchPanel(from){
+    if(from === current) return;
+    if(from === "login"){
+        document.getElementsByClassName("login")[0].style.display = "block";
+        document.getElementsByClassName("register")[0].style.display = "none";
+        current = "login";
+
+        document.getElementsByClassName("button-login")[0].classList.add("active");
+        document.getElementsByClassName("button-register")[0].classList.remove("active");
+    }
+    else{
+        document.getElementsByClassName("login")[0].style.display = "none";
+        document.getElementsByClassName("register")[0].style.display = "block";
+        current = "register";
+    
+        document.getElementsByClassName("button-login")[0].classList.remove("active");
+        document.getElementsByClassName("button-register")[0].classList.add("active");
+    }
+}
--- a/login/login.php
+++ b/login/login.php
@ -8,36 +8,40 @@
    <title>Connexion</title>
 </head>
 <body>
+    <div class="buttons">
+        <button class="button button-login active" onclick="switchPanel('login')">Connexion</button>
+        <button class="button button-register" onclick="switchPanel('register')">S'inscrire</button>
+    </div>
    <div class="container login">
        <h1>Connexion</h1>
        <form action="cible_login.php" method="post" id="form">
            <div class="form-chunck">
                <label for="username">Utilisateur</label>
                <input class="input" type="text" name="username">
-                <?php if (isset($_GET['error']) AND $_GET['error'] == '2') { echo <<<HTML
+                <?php /*if (isset($_GET['error']) AND $_GET['error'] == '2') { echo <<<HTML
                    <p class="error">Nom d'utilisateur incorrecte</p>
-                HTML; } ?>
+                HTML; }*/ ?>
            </div>
            <div class="form-chunck">
                <label for="password">Mot de passe</label>
                <input class="input" type="password" name="password" id="">
-                <?php if (isset($_GET['error']) AND $_GET['error'] == '3') { echo <<<HTML
+                <?php /*if (isset($_GET['error']) AND $_GET['error'] == '3') { echo <<<HTML
                    <p class="error">Mot de passe incorrecte</p>
-                HTML; } ?>
+                HTML; }*/ ?>
            </div>
            <input class="button" type="submit" value="Se connecter">
        </form>
    </div>

-    <div class="container signin">
+    <div class="container register" style="display: none;">
        <h1>Toujours pas de compte chez deuzagio ?</h1>
        <form action="cible_sign-up.php" method="post" id="form">
            <div class="form-chunck">
                <label for="username">Utilisateur</label>
                <input class="input" type="text" name="username">
-                <?php if (isset($_GET['error']) AND $_GET['error'] == '1') { echo <<<HTML
+                <?php /*if (isset($_GET['error']) AND $_GET['error'] == '1') { echo <<<HTML
                    <p class="error">Nom d'utilisateur déjà pris</p>
-                HTML; } ?>
+                HTML; }*/ ?>
            </div>
            <div class="form-chunck">
                <label for="password">Mot de passe</label>
@ -46,5 +50,7 @@
            <input class="button" type="submit" value="Se connecter">
        </form>
    </div>
+
+    <script src="login.js"></script>
 </body>
 </html>