Spaces:
Sleeping
Sleeping
File size: 5,444 Bytes
6952a04 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!--
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.
-->
<!DOCTYPE html>
<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>
|