Javascript code to. - Display the name of administrator logged in - ensure you can logout

Question

1.00/5 (1 vote)

See more:

I have an admin login page that logs in to the admin dashboard and I need it to display the administrator logged in.
This is the code:

JavaScript

var adminName = '" . $username . "';";
  
      header("Location: admin.php");
      exit();
    } else {
      $error_message = "Invalid username or password";
    }
  } else {
    $error_message = "Error: " . mysqli_error($conn);
  }

  mysqli_close($conn);
}
?>

  <title>Admin Login
  
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    h2 {
      text-align: center;
      margin-top: 30px;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color:  #00abf0;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: blue;
    }

    .error-message {
      color: red;
      margin-top: 10px;
      text-align: center;
    }
    .logout-button {
      background-color:  #00abf0;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }

  <div class="container">
    <h2 id="admin-name">Admin Login</h2>
    <h2><a href="index.php" class="logout-button">Home</a></h2>
    
      Username:
      <br><br>
      Password:
      <br><br>
    
    <p>Don't have an account? <a href="admin_signup.php">Signup here</a></p>
    
      <p class="error-message"></p>
    
  </div>

  // Check if the adminName variable is defined
  if (typeof adminName !== 'undefined') {
    // Update the DOM with the administrator's name
    var adminNameElement = document.getElementById('admin-name');
    if (adminNameElement) {
      adminNameElement.textContent = 'Logged in as: ' + adminName;
    }
  }

What I have tried:

PHP

<?php

$hostname = "localhost";
$username = "root";
$password = "";
$database = "ddapp";

$conn = mysqli_connect($hostname, $username, $password, $database);

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = $_POST["username"];
  $password = $_POST["password"];

  $query = "SELECT * FROM admins WHERE username = '$username' LIMIT 1";

  $result = mysqli_query($conn, $query);

  if ($result) {

    $user = mysqli_fetch_assoc($result);

    if ($user && password_verify($password, $user['password'])) {
  
      session_start();
      $_SESSION["username"] = $username;
      $_SESSION["admin_name"] = $user['admin_name'];

      echo "<script>var adminName = '" . $username . "';</script>";
  
      header("Location: admin.php");
      exit();
    } else {
      $error_message = "Invalid username or password";
    }
  } else {
    $error_message = "Error: " . mysqli_error($conn);
  }

  mysqli_close($conn);
}
?>
<?php

?>

<!DOCTYPE html>
<html>
<head>
  <title>Admin Login</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f1f1f1;
    }

    h2 {
      text-align: center;
      margin-top: 30px;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color:  #00abf0;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type="submit"]:hover {
      background-color: blue;
    }

    .error-message {
      color: red;
      margin-top: 10px;
      text-align: center;
    }
    .logout-button {
      background-color:  #00abf0;
      color: #ffffff;
      border: none;
      padding: 8px 16px;
      font-size: 14px;
      border-radius: 4px;
      cursor: pointer;
    }

  </style>
</head>
<body>
  <div class="container">
    <h2 id = "admin-name">Admin Login</h2>
    <h2><a href="index.php" class="logout-button">Home</a></h2>
    <form method="post">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required><br><br>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required><br><br>
      <input type="submit" value="Login">
    </form>
    <p>Don't have an account? <a href="admin_signup.php">Signup here</a></p>
    <?php if (isset($error_message)): ?>
      <p class="error-message"><?php echo $error_message; ?></p>
    <?php endif; ?>
  </div>

</body>
<script>
  // Check if the adminName variable is defined
  if (typeof adminName !== 'undefined') {
    // Update the DOM with the administrator's name
    var adminNameElement = document.getElementById('admin-name');
    if (adminNameElement) {
      adminNameElement.textContent = 'Logged in as: ' + adminName;
    }
  }
</script>
</html>

Posted 1-Oct-23 9:19am

Member 16105269

Updated 2-Oct-23 5:31am

Deeksha Shenoy

v2

Add a Solution

Comments

Richard MacCutchan 2-Oct-23 3:53am

Very interesting, but you forgot to ask a question. Please use the Improve question link above, and add complete details of what is not working.

Richard Deeming 2-Oct-23 4:21am

$query = "SELECT * FROM admins WHERE username = '$username' LIMIT 1";

Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation/interpolation to build a SQL query. ALWAYS use a parameterized query.

PHP: SQL Injection - Manual[^]

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

raddevus · Answer 1 · 2023-10-02T03:22:00

So you echo out a script tag to hold the value in a JavaScript var:

PHP

echo "<script>var adminName = '" . $username . "';</script>";

So, when the page renders, if that works, you have the following JavaScript:

JavaScript

var adminName = "<value-of-php-$username>" // string value of what is in $username

But, then in the CLIENT side code you don't have anything that references that var adminName

That's the only place the admin name value is stored once the client is rendered.

We then see you attempting to retrieve the value from the DOM element:

JavaScript

var adminNameElement = document.getElementById('admin-name');
  if (adminNameElement) {
   adminNameElement.textContent = 'Logged in as: ' + adminName;
}

However, you cannot refer to the JavaScript var as just adminName because it is out of context at that point.

Why don't you just try the following PHP to see if it even works:

PHP

echo "<div id="testAdminName"> $username </div>";

Then you should just be able to view the div on the client.
If that works you can work out how to get the value into a variable.

Javascript code to. - Display the name of administrator logged in - ensure you can logout

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us