SIDEL_ScriptsManager/app/templates/admin/user_form.html

227 lines
11 KiB
HTML

{% extends "base.html" %}
{% block title %}
{% if user %}Edit User{% else %}Create User{% endif %} - Scripts Manager
{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<!-- Header -->
<div class="row mb-4">
<div class="col">
<div class="d-flex align-items-center">
<a href="{{ url_for('admin_users') }}" class="btn btn-outline-secondary me-3">
<i class="bi bi-arrow-left"></i>
</a>
<div>
<h1 class="h2 mb-1">
<i class="bi bi-person-{{ 'gear' if user else 'plus' }} me-2"></i>
{% if user %}Edit User: {{ user.username }}{% else %}Create New User{% endif %}
</h1>
<p class="text-muted mb-0">
{% if user %}Modify user information and permissions{% else %}Add a new user to the system{% endif %}
</p>
</div>
</div>
</div>
</div>
<!-- User Form -->
<div class="row">
<div class="col-lg-8 col-xl-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-person-vcard me-1"></i>
User Information
</h5>
</div>
<div class="card-body">
<form method="POST" id="user-form">
<!-- Username -->
<div class="mb-3">
<label for="username" class="form-label">
<i class="bi bi-person me-1"></i>
Username <span class="text-danger">*</span>
</label>
<input type="text"
class="form-control"
id="username"
name="username"
value="{{ user.username if user else '' }}"
required
{% if user %}readonly{% endif %}>
{% if user %}
<div class="form-text">Username cannot be changed after creation.</div>
{% endif %}
</div>
<!-- Email -->
<div class="mb-3">
<label for="email" class="form-label">
<i class="bi bi-envelope me-1"></i>
Email Address <span class="text-danger">*</span>
</label>
<input type="email"
class="form-control"
id="email"
name="email"
value="{{ user.email if user else '' }}"
required>
</div>
<!-- User Level -->
<div class="mb-3">
<label for="user_level" class="form-label">
<i class="bi bi-shield me-1"></i>
User Level <span class="text-danger">*</span>
</label>
<select class="form-select" id="user_level" name="user_level" required>
<option value="">Select user level...</option>
<option value="viewer" {% if user and user.user_level == 'viewer' %}selected{% endif %}>
Viewer - Read-only access
</option>
<option value="user" {% if user and user.user_level == 'user' %}selected{% endif %}>
User - Execute basic scripts
</option>
<option value="operator" {% if user and user.user_level == 'operator' %}selected{% endif %}>
Operator - Execute all scripts
</option>
<option value="developer" {% if user and user.user_level == 'developer' %}selected{% endif %}>
Developer - Script management
</option>
<option value="admin" {% if user and user.user_level == 'admin' %}selected{% endif %}>
Administrator - Full access
</option>
</select>
<div class="form-text">
Select the appropriate permission level for this user.
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label">
<i class="bi bi-lock me-1"></i>
Password {% if not user %}<span class="text-danger">*</span>{% endif %}
</label>
<div class="input-group">
<input type="password"
class="form-control"
id="password"
name="password"
{% if not user %}required{% endif %}>
<button type="button" class="btn btn-outline-secondary" id="toggle-password">
<i class="bi bi-eye"></i>
</button>
</div>
<div class="form-text">
{% if user %}
Leave blank to keep current password. Otherwise, enter new password.
{% else %}
Enter a secure password (minimum 6 characters recommended).
{% endif %}
</div>
</div>
<!-- Submit Buttons -->
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle me-1"></i>
{% if user %}Update User{% else %}Create User{% endif %}
</button>
<a href="{{ url_for('admin_users') }}" class="btn btn-secondary">
<i class="bi bi-x-circle me-1"></i>
Cancel
</a>
</div>
</form>
</div>
</div>
</div>
<!-- User Level Information -->
<div class="col-lg-4 col-xl-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-info-circle me-1"></i>
Permission Levels
</h5>
</div>
<div class="card-body">
<div class="permission-level mb-3">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-secondary me-2">Viewer</span>
<small class="text-muted">Level 1</small>
</div>
<p class="small mb-0">Read-only access to view scripts and results.</p>
</div>
<div class="permission-level mb-3">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-warning me-2">User</span>
<small class="text-muted">Level 2</small>
</div>
<p class="small mb-0">Execute basic scripts and manage personal projects.</p>
</div>
<div class="permission-level mb-3">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-success me-2">Operator</span>
<small class="text-muted">Level 3</small>
</div>
<p class="small mb-0">Execute all scripts including system operations.</p>
</div>
<div class="permission-level mb-3">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-primary me-2">Developer</span>
<small class="text-muted">Level 4</small>
</div>
<p class="small mb-0">Manage scripts, environments, and system configuration.</p>
</div>
<div class="permission-level">
<div class="d-flex align-items-center mb-2">
<span class="badge bg-danger me-2">Administrator</span>
<small class="text-muted">Level 5</small>
</div>
<p class="small mb-0">Full system access including user management.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Toggle password visibility
document.getElementById('toggle-password').addEventListener('click', function() {
const passwordInput = document.getElementById('password');
const icon = this.querySelector('i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.className = 'bi bi-eye-slash';
} else {
passwordInput.type = 'password';
icon.className = 'bi bi-eye';
}
});
// Form validation
document.getElementById('user-form').addEventListener('submit', function(e) {
const password = document.getElementById('password').value;
const isNewUser = {{ 'false' if user else 'true' }};
if (isNewUser && password.length < 6) {
e.preventDefault();
alert('Password must be at least 6 characters long.');
return false;
}
});
});
</script>
{% endblock %}