@mamoorali295/rbac
Version:
Complete RBAC (Role-Based Access Control) system for Node.js with Express middleware, NestJS integration, GraphQL support, MongoDB & PostgreSQL support, modern admin dashboard, TypeScript support, and dynamic permission management
208 lines (184 loc) • 6.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getLoginView = void 0;
const getLoginView = (baseUrl = '') => `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RBAC Admin - Login</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
backdrop-filter: blur(10px);
}
.login-header {
text-align: center;
margin-bottom: 32px;
}
.login-title {
font-size: 28px;
font-weight: 700;
color: #2d3748;
margin-bottom: 8px;
}
.login-subtitle {
color: #718096;
font-size: 16px;
}
.form-group {
margin-bottom: 24px;
}
.form-label {
display: block;
font-weight: 500;
color: #4a5568;
margin-bottom: 8px;
font-size: 14px;
}
.form-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-size: 16px;
transition: all 0.2s ease;
background: #f8fafc;
}
.form-input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.login-btn {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 14px 16px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 8px;
}
.login-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.login-btn:active {
transform: translateY(0);
}
.error-message {
background: #fed7d7;
color: #c53030;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
border-left: 4px solid #c53030;
}
.rbac-badge {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(10px);
}
.version-info {
text-align: center;
margin-top: 24px;
color: #a0aec0;
font-size: 12px;
}
</style>
</head>
<body>
<div class="rbac-badge">RBAC System</div>
<div class="login-container">
<div class="login-header">
<h1 class="login-title">Admin Dashboard</h1>
<p class="login-subtitle">Please sign in to continue</p>
</div>
<form action="${baseUrl}/login" method="POST" id="loginForm">
<div class="form-group">
<label for="username" class="form-label">Username</label>
<input
type="text"
id="username"
name="username"
class="form-input"
placeholder="Enter your username"
required
autocomplete="username"
>
</div>
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input
type="password"
id="password"
name="password"
class="form-input"
placeholder="Enter your password"
required
autocomplete="current-password"
>
</div>
<button type="submit" class="login-btn">
Sign In
</button>
</form>
<div class="version-info">
RBAC Admin Dashboard v1.0.0
</div>
</div>
<script>
// Show error message if present in URL
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('error')) {
const form = document.getElementById('loginForm');
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = 'Invalid username or password. Please try again.';
form.insertBefore(errorDiv, form.firstChild);
}
// Focus on username field
document.getElementById('username').focus();
// Handle form submission with loading state
document.getElementById('loginForm').addEventListener('submit', function(e) {
const btn = this.querySelector('.login-btn');
btn.textContent = 'Signing in...';
btn.disabled = true;
});
</script>
</body>
</html>
`;
exports.getLoginView = getLoginView;