87 lines
3.3 KiB
HTML
87 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Query Profile{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<h2 class="text-center">Query User Profile</h2>
|
|
|
|
<!-- Flash messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form id="queryForm" class="needs-validation" novalidate method="POST" action="/admin/queryprofile">
|
|
{{ form.hidden_tag() }}
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
{{ form.username(class="form-control", placeholder="Enter the username to query", id="username", maxlength="20", pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$") }}
|
|
<div class="invalid-feedback">
|
|
Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block">Query</button>
|
|
</form>
|
|
|
|
{% if user_info %}
|
|
<div class="card mt-4 border-custom">
|
|
<div class="card-body">
|
|
<h4 class="card-title">{{ user_info.name }}</h4>
|
|
<p class="card-text"><strong>Username:</strong> {{ user_info.username }}</p>
|
|
<p class="card-text"><strong>Email:</strong> {{ user_info.email }}</p>
|
|
<p class="card-text"><strong>Privilege:</strong> {{ user_info.privilege }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript for form validation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const queryForm = document.getElementById('queryForm');
|
|
queryForm.addEventListener('submit', function(event) {
|
|
if (!queryForm.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
queryForm.classList.add('was-validated');
|
|
});
|
|
|
|
// Real-time validation for username
|
|
const usernameInput = document.getElementById('username');
|
|
usernameInput.addEventListener('input', function() {
|
|
if (usernameInput.checkValidity()) {
|
|
usernameInput.classList.remove('is-invalid');
|
|
usernameInput.classList.add('is-valid');
|
|
} else {
|
|
usernameInput.classList.remove('is-valid');
|
|
usernameInput.classList.add('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.border-custom {
|
|
border: 2px solid #007bff; /* 蓝色边框 */
|
|
border-radius: 15px; /* 圆角边框 */
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
|
|
}
|
|
.card-body {
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|