<!DOCTYPE html> <html lang="en"> <head> {% include 'includes/head.html' %} {% block stylesheets %} <style> #notification-bar { font-size: large; font-weight: bolder; position: fixed; top: 0; left: 0; width: 100%; color: #fff; padding: 20px; text-align: center; z-index: 9999; } .hidden { display: none; } .success { background-color: #4caf50; } .error { background-color: #f44336; } </style> {% endblock %} </head> <div id="notification-bar" class="hidden"></div> <body class=""> <div class="wrapper"> <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent mw-100"> <div class="container-fluid overflow-hidden"> <div class="navbar-wrapper"> <div class="navbar-toggle d-inline"> <button type="button" class="navbar-toggler"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </button> </div> <a class="navbar-brand" href="/">Authentication</a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-bar navbar-kebab"></span> <span class="navbar-toggler-bar navbar-kebab"></span> <span class="navbar-toggler-bar navbar-kebab"></span> </button> <div class="collapse navbar-collapse" id="navigation"> <ul class="navbar-nav ml-auto"> <li class="input-group d-flex align-items-center mb-0"> <label class="switch theme-switch"> <input type="checkbox" class="bsc" checked=""> <span class="slider"></span> </label> </li> <li class="separator d-lg-none"></li> </ul> </div> </div> </nav> <!-- End Navbar --> <div class="container-fluid"> <div class="content"> <div class="container"> <div class="row pt-5"> <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5"> <div class="card"> <div class="card-header text-center py-4"> <h4 class="title">Login</h4> </div> <div class="card-body px-5 py-3"> <form method="post" action="{% url 'loginuser' %}"> {% csrf_token %} {% if form.non_field_errors %} {% for error in form.non_field_errors %} <small class="text-danger mb-3">{{ error }}</small> {% endfor %} {% endif %} <div class="form-group"> <label for="username">Username</label> <input type="text" name="username" id="username" class="form-control" required> {% if form.errors.username %} {% for error in form.errors.username %} <small class="text-danger mb-3">{{ error }}</small> {% endfor %} {% endif %} </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" id="password" class="form-control" required> {% if form.errors.password %} {% for error in form.errors.password %} <small class="text-danger mb-3">{{ error }}</small> {% endfor %} {% endif %} </div> <button type="submit" class="btn btn-block btn-primary mt-2 mb-4">Signin</button> </form> <div class="text-center"> <a href="{% url 'password_reset_page' %}">Forgot Password?</a> </div> </div> </div> </div> </div> </div> </div> <footer class="footer px-5 py-4 fixed-bottom"> <div class="copyright mx-auto float-none text-center"> © <a href="#">Team Z</a> - Billing Software </div> </footer> </div> </div> {% include 'includes/fixed-plugin.html' %} {% include 'includes/scripts.html' %} {% block javascripts %} <script> document.addEventListener("DOMContentLoaded", function () { const notificationBar = document.getElementById("notification-bar"); function showNotification(status, message) { notificationBar.textContent = message; notificationBar.classList.add(status); notificationBar.classList.remove("hidden"); setTimeout(function () { hideNotification(); }, 3000); } function hideNotification() { notificationBar.textContent = ""; notificationBar.classList.remove("success", "error"); notificationBar.classList.add("hidden"); } const successMessage = "{{ success_message }}"; const errorMessage = "{{ error_message }}"; if (successMessage.trim() !== "") { showNotification("success", successMessage.trim()); } if (errorMessage.trim() !== "") { showNotification("error", errorMessage.trim()); } }); </script> {% endblock javascripts %} </body> </html>