Html - Why is the login button not navigating to the admin dashboard?

PrinceSein
October 15, 2023
249 views
0 votes
2 Answers

When i click on the log In button it doesn’t navigate to the page dashboard.html. It doesn’t even show that my password is correct or wrong. I triend all the possible fixes i could perform but i am unable to fix. Can you help me identify the situation which is causing this problem and fix it, so i can move on to this stage, thank you very much.

const container = document.getElementById('container');
const registerBtn = document.getElementById('register-panel');
const loginBtn = document.getElementById('login-panel');

registerBtn.addEventListener('click', () => {
    container.classList.add("active");
});

loginBtn.addEventListener('click', () => {
    container.classList.remove("active");
});

function redirectToDashboard() {
    window.location.href = "dashboard.html";
}
function redirectToHome() {
    // Replace "index.html" with the actual URL of your login page
    window.location.href = "index.html";
}

// Predefined login credentials
const predefinedEmail = "[email protected]";
const predefinedPassword = "14781";

// Event listener for the login button
document.getElementById("login").addEventListener("click", function () {
    const enteredEmail = document.getElementById("email").value;
    const enteredPassword = document.getElementById("password").value;

    if (enteredEmail === predefinedEmail && enteredPassword === predefinedPassword) {
        document.getElementById("loginStatus").textContent = "Login successful. Redirecting...";
        // You can redirect the user to another page after successful login.
        // Replace the URL with the actual URL you want to redirect to.
        window.location.href = "dashboard.html";
    } else {
        document.getElementById("loginStatus").textContent = "Login failed. Please check your email and password.";
    }
});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

/* Add this new CSS for the logo */
/* Add this new CSS for the centered logo */
.logo {
    position: absolute;
    top: 10px; /* Adjust the top margin as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* Ensure the logo is on top */
}

.logo img {
    width: 220px; /* Adjust the width as needed */
    height: 90px;
}


.container{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.container p{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin: 20px 0;
}

.container span{
    font-size: 12px;
}

.container a{
    color: #333;
    font-size: 13px;
    text-decoration: none;
    margin: 15px 0 10px;
}

.container button{
    background-color: #67FF43;
    color: #fff;
    font-size: 12px;
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
}

.container button.hidden{
    background-color: transparent;
    border-color: #fff;
}

.container form{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    height: 100%;
}

.container input{
    background-color: #eee;
    border: none;
    margin: 8px 0;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 8px;
    width: 100%;
    outline: none;
}

.form-container{
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in{
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.active .sign-in{
    transform: translateX(100%);
}

.sign-up{
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: move 0.6s;
}

@keyframes move{
    0%, 49.99%{
        opacity: 0;
        z-index: 1;
    }
    50%, 100%{
        opacity: 1;
        z-index: 5;
    }
}

.social-icons{
    margin: 20px 0;
}

.social-icons a{
    border: 1px solid #ccc;
    border-radius: 20%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    width: 40px;
    height: 40px;
}

.toggle-container{
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    border-radius: 150px 0 0 100px;
    z-index: 1000;
}

.container.active .toggle-container{
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}

.toggle{
    background-color: #512da8;
    height: 100%;
    background: linear-gradient(to right, #5c6bc0, #512da8);
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.container.active .toggle{
    transform: translateX(50%);
}

.toggle-panel{
    position: absolute;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 30px;
    text-align: center;
    top: 0;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.toggle-left{
    transform: translateX(-200%);
}

.container.active .toggle-left{
    transform: translateX(0);
}

.toggle-right{
    right: 0;
    transform: translateX(0);
}

.container.active .toggle-right{
    transform: translateX(200%);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- --------- My UNICONS ---------- -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

    <!-- --------- My CSS ---------- -->
    <link rel="stylesheet" href="styles/login.css">

    <!-- --------- FAVICON ---------- -->
    <link rel="icon" href="images/favicon.ico" type="icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Agrisense360 | Login</title>
</head>

<body>
    <div class="logo">
        <img src="images/header-logo1.webp" alt="Agrisense360 Logo" onclick="redirectToHome()">
    </div>
    
    <div class="container" id="container">
        <div class="form-container sign-up">
            <form>
                <h1>Create Account</h1>
                <div class="social-icons">
                    <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
                </div>
                <span>or use your email for registeration</span>
                <input type="text" placeholder="Name">
                <input type="email" placeholder="Email">
                <input type="password" placeholder="Password">
                <button id="register" onclick="redirectToDashboard" >Register</button>
            </form>
        </div>
        <div class="form-container sign-in">
            <form>
                <h1>Sign In</h1>
                <div class="social-icons">
                    <a href="#" class="icon" style="color: #67FF43;" title="Google Account"><i class="fa-brands fa-google-plus-g"></i></a>
                    <a href="#" class="icon" style="color: #67FF43;" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="icon" style="color: #67FF43;" title="Github"><i class="fa-brands fa-github"></i></a>
                    <a href="#" class="icon" style="color: #67FF43;" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                </div>
                <span>or use your email password</span>
                <input type="email" placeholder="Email">
                <input type="password" placeholder="Password">
                <a href="#">Forget Your Password?</a>
                <button id="login">Log in</button>
            </form>
        </div>
        <div class="toggle-container">
            <div class="toggle">
                <div class="toggle-panel toggle-left">
                    <h1>Welcome Back!</h1>
                    <p>To keep track of your crops development
                        and see recommendation to maximize your crop yeild.
                        sign-in with your account details here!</p>
                    <button class="hidden" id="login-panel">Sign In</button>
                    <p id="loginStatus"></p>
                </div>
                <div class="toggle-panel toggle-right">
                    <h1>Hello, Friend!</h1>
                    <p>Expect yield with quality any season.  
                        Join innovative farmers to enhance the
                        overall resilience of the agricultural 
                        industry and your field.</p>
                    <button class="hidden" id="register-panel">Sign Up</button>
                </div>
            </div>
        </div>
    </div>

    <!-- ----- MAIN JS ----- -->
    <script src="scripts/login.js"></script>
</body>

</html>

Answers

- jQueeny
- October 15, 2023 at 11:57 am
- 0 votes
0
You have missing ids in your html. Here:
```
const enteredEmail = document.getElementById("email").value;
const enteredPassword = document.getElementById("password").value;
```
Your getting the element by their id but your html looks like this:
```
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
```
You can fix this by adding the necessary ids like so:
```
<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
```
However, I would suggest you add name attributes to you inputs and select them that way like so:
```
<input type="email" name="loginEmail" placeholder="Email">
<input type="password" name="loginPassword" placeholder="Password">
```
And select them like so:
```
const enteredEmail = document.querySelector("input[name='loginEmail']").value;
const enteredPassword = document.querySelector("input[name='loginPassword']").value;
```
That way it’s semantically clear what your intention is because you have a couple of email inputs and a couple of password inputs in the html so this way it’s a bit easier to debug.

You also need to prevent the daufault behaviour of your form sbmitting in your click handler. Add this:
```
document.getElementById("login").addEventListener("click", function (e) {
        e.preventDefault();
//...
});
```
Login or Signup to reply.

Give the form and the two input elements a name. Listen for the submit event instead of the click event on the button. Use e.preventDefault() to stop the form from submitting, do your test and change the location like you already do.

There are some details I don’t get, but this seams to work.

const container = document.getElementById('container');
const registerBtn = document.getElementById('register-panel');

registerBtn.addEventListener('click', () => {
  container.classList.add("active");
});

function redirectToDashboard() {
  window.location.href = "dashboard.html";
}

function redirectToHome() {
  // Replace "index.html" with the actual URL of your login page
  window.location.href = "index.html";
}

// Predefined login credentials
const predefinedEmail = "[email protected]";
const predefinedPassword = "14781";

// Event listener for the login button
document.forms.login.addEventListener("submit", e => {
  e.preventDefault();
  container.classList.remove("active");
  const enteredEmail = e.target.email.value;
  const enteredPassword = e.target.password.value;

  if (enteredEmail === predefinedEmail && enteredPassword === predefinedPassword) {
    document.getElementById("loginStatus").textContent = "Login successful. Redirecting...";
    // You can redirect the user to another page after successful login.
    // Replace the URL with the actual URL you want to redirect to.
    window.location.href = "dashboard.html";
  } else {
    document.getElementById("loginStatus").textContent = "Login failed. Please check your email and password.";
  }
});

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}


/* Add this new CSS for the logo */


/* Add this new CSS for the centered logo */

.logo {
  position: absolute;
  top: 10px;
  /* Adjust the top margin as needed */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  /* Ensure the logo is on top */
}

.logo img {
  width: 220px;
  /* Adjust the width as needed */
  height: 90px;
}

.container {
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
}

.container p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.3px;
  margin: 20px 0;
}

.container span {
  font-size: 12px;
}

.container a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
  margin: 15px 0 10px;
}

.container button {
  background-color: #67FF43;
  color: #fff;
  font-size: 12px;
  padding: 10px 45px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
}

.container button.hidden {
  background-color: transparent;
  border-color: #fff;
}

.container form {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  height: 100%;
}

.container input {
  background-color: #eee;
  border: none;
  margin: 8px 0;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 8px;
  width: 100%;
  outline: none;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in {
  left: 0;
  width: 50%;
  z-index: 2;
}

.container.active .sign-in {
  transform: translateX(100%);
}

.sign-up {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.container.active .sign-up {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: move 0.6s;
}

@keyframes move {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

.social-icons {
  margin: 20px 0;
}

.social-icons a {
  border: 1px solid #ccc;
  border-radius: 20%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 3px;
  width: 40px;
  height: 40px;
}

.toggle-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
  border-radius: 150px 0 0 100px;
  z-index: 1000;
}

.container.active .toggle-container {
  transform: translateX(-100%);
  border-radius: 0 150px 100px 0;
}

.toggle {
  background-color: #512da8;
  height: 100%;
  background: linear-gradient(to right, #5c6bc0, #512da8);
  color: #fff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: all 0.6s ease-in-out;
}

.container.active .toggle {
  transform: translateX(50%);
}

.toggle-panel {
  position: absolute;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 30px;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: all 0.6s ease-in-out;
}

.toggle-left {
  transform: translateX(-200%);
}

.container.active .toggle-left {
  transform: translateX(0);
}

.toggle-right {
  right: 0;
  transform: translateX(0);
}

.container.active .toggle-right {
  transform: translateX(200%);
}

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="logo">
  <img src="images/header-logo1.webp" alt="Agrisense360 Logo" onclick="redirectToHome()">
</div>

<div class="container" id="container">
  <div class="form-container sign-up">
    <form>
      <h1>Create Account</h1>
      <div class="social-icons">
        <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
        <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
        <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
      </div>
      <span>or use your email for registeration</span>
      <input type="text" placeholder="Name">
      <input type="email" placeholder="Email">
      <input type="password" placeholder="Password">
      <button id="register" onclick="redirectToDashboard">Register</button>
    </form>
  </div>
  <div class="form-container sign-in">
    <form name="login">
      <h1>Sign In</h1>
      <div class="social-icons">
        <a href="#" class="icon" style="color: #67FF43;" title="Google Account"><i class="fa-brands fa-google-plus-g"></i></a>
        <a href="#" class="icon" style="color: #67FF43;" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="#" class="icon" style="color: #67FF43;" title="Github"><i class="fa-brands fa-github"></i></a>
        <a href="#" class="icon" style="color: #67FF43;" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
      </div>
      <span>or use your email password</span>
      <input type="email" name="email" placeholder="Email">
      <input type="password" name="password" placeholder="Password">
      <a href="#">Forget Your Password?</a>
      <button type="submit">Log in</button>
    </form>
  </div>
  <div class="toggle-container">
    <div class="toggle">
      <div class="toggle-panel toggle-left">
        <h1>Welcome Back!</h1>
        <p>To keep track of your crops development and see recommendation to maximize your crop yeild. sign-in with your account details here!</p>
        <button class="hidden" id="login-panel">Sign In</button>
        <p id="loginStatus"></p>
      </div>
      <div class="toggle-panel toggle-right">
        <h1>Hello, Friend!</h1>
        <p>Expect yield with quality any season. Join innovative farmers to enhance the overall resilience of the agricultural industry and your field.</p>
        <button class="hidden" id="register-panel">Sign Up</button>
      </div>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why is the login button not navigating to the admin dashboard?

Answers