SIDEL_ScriptsManager/app/templates/login.html

88 lines
4.0 KiB
HTML

{% extends "base.html" %}
{% block title %}{{ t.login }} - {{ t.app_title }}{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card shadow">
<div class="card-body">
<div class="text-center mb-4">
<img src="{{ url_for('static', filename='images/SIDEL.png') }}"
alt="SIDEL Logo"
class="sidel-logo mb-3">
<h1 class="h3 mb-3 fw-normal">{{ t.app_title }}</h1>
<p class="text-muted">Multi-Language Script Manager</p>
</div>
<form method="POST" action="{{ url_for('login') }}">
<div class="mb-3">
<label for="username" class="form-label">{{ t.username }}</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-person"></i></span>
<input type="text" class="form-control" id="username" name="username" required autocomplete="username">
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">{{ t.password }}</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input type="password" class="form-control" id="password" name="password" required autocomplete="current-password">
</div>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-primary btn-lg">
<i class="bi bi-box-arrow-in-right"></i> {{ t.login }}
</button>
</div>
</form>
<hr class="my-4">
<!-- Language Selector for Login Page -->
<div class="text-center">
<div class="btn-group" role="group" aria-label="Language selection">
<button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="en">EN</button>
<button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="es">ES</button>
<button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="it">IT</button>
<button type="button" class="btn btn-outline-secondary btn-sm language-option" data-lang="fr">FR</button>
</div>
</div>
</div>
</div>
<!-- Demo Users Info (Remove in Production) -->
<div class="card mt-3">
<div class="card-body">
<h6 class="card-title">Demo Users</h6>
<small class="text-muted">
<strong>admin/admin123</strong> - Administrator<br>
<strong>dev/dev123</strong> - Developer<br>
<strong>op/op123</strong> - Operator<br>
<strong>view/view123</strong> - Viewer
</small>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Auto-focus username field
document.getElementById('username').focus();
// Language selection for login page
document.querySelectorAll('.language-option').forEach(button => {
button.addEventListener('click', function() {
const lang = this.dataset.lang;
// Update URL with language parameter and reload
const url = new URL(window.location);
url.searchParams.set('lang', lang);
window.location.href = url.toString();
});
});
</script>
{% endblock %}