Spaces:
Sleeping
Sleeping
| <!-- | |
| This is the login page template for the RedMindGPT application. | |
| It contains a login form where users can enter their username and password to sign in. | |
| The form includes validation to ensure that both fields are filled out before submission. | |
| The page also includes styling using CSS and utilizes the AdminLTE and Font Awesome libraries for additional design elements. | |
| --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| /* CSS styles for the login page */ | |
| .login-box-msg { | |
| color: grey; | |
| font-size: larger; | |
| font-weight: bold; | |
| } | |
| .remember-me { | |
| text-align: center; | |
| } | |
| </style> | |
| <title>RedMindGPT</title> | |
| <!-- AdminLTE CSS --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/adminlte.min.css"> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| </head> | |
| <body class="hold-transition login-page" style="background-image: url('static/img/AI.jpg'); background-size: cover;"> | |
| <div class="login-box"> | |
| <div class="card"> | |
| <!-- Logo --> | |
| <div style="align-items: center;"> | |
| <a href="#" style="color: blue; | |
| font-size: 30px; | |
| font-weight: bold; | |
| margin-left: 80px; | |
| margin-top: 20px; | |
| "><b>RedMindGPT</b></a> | |
| </div> | |
| <form action='/validate-user' name='loginForm' method="post" onsubmit="return validateForm()"> | |
| <div class="card-body login-card-body"> | |
| <p class="login-box-msg">Sign in</p> | |
| <div class="input-group mb-3"> | |
| <input type="text" class="form-control" placeholder="Username" name="username" required> | |
| <div class="input-group-append"> | |
| <div class="input-group-text"> | |
| <span class="fas fa-user"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-group mb-3"> | |
| <input type="password" class="form-control" placeholder="Password" name="password" required> | |
| <div class="input-group-append"> | |
| <div class="input-group-text"> | |
| <span class="fas fa-lock"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row" style="align-content: center;"> | |
| <div class="col-8"> | |
| <div class="icheck-primary"> | |
| <input type="checkbox" id="remember"> | |
| <label for="remember"> | |
| Remember Me | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row" style="align-content: center;"> | |
| <div class="col-4"> | |
| <button type="submit" class="btn btn-primary btn-block">Sign In</button> | |
| </div> | |
| <div class="col-4"> | |
| <button type="reset" class="btn btn-secondary btn-block">Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| <input type="hidden" id="userRole" name="userRole" value="{{ role }}"> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- jQuery --> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <!-- Bootstrap 4 --> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> | |
| <!-- AdminLTE App --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script> | |
| <script> | |
| // JavaScript function to validate the login form | |
| function validateForm() { | |
| //alert("Validating form"); | |
| var username = document.forms["loginForm"]["username"].value; | |
| var password = document.forms["loginForm"]["password"].value; | |
| if (username == "" || password == "") { | |
| alert("Username and Password must be filled out"); | |
| return false; | |
| } | |
| } | |
| function storeUserRole() { | |
| // Store user role in localStorage or sessionStorage | |
| var role1 = document.getElementById('userRole').value; | |
| //Salert("Role retrieved: " + role1); // Alert to confirm retrieval | |
| console.log("Retrieved user role from sessionStorage in index:", role1); // Debugging | |
| sessionStorage.setItem('userRole', role1); | |
| console.log("Role set in sessionStorage:", sessionStorage.getItem('userRole')); | |
| console.log("role",role1); | |
| } | |
| document.querySelector('input[name="username"]').addEventListener('change', function(event) { | |
| storeUserRole(); // Call this function before form submission | |
| }); | |
| </script> | |
| </body> | |
| </html> | |