write add user

2024-06-22 05:01:32 +00:00
parent 2d407a53f0
commit c6df6a9a28
4 changed files with 185 additions and 17 deletions
--- a/UI/templates/adduser.html
+++ b/UI/templates/adduser.html
@ -0,0 +1,108 @@
+{% extends "base.html" %}
+
+{% block title %}Add User{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+    <div class="col-md-6">
+        <h2 class="text-center">Add User</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">&times;</span>
+                        </button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        <form id="addUserForm" class="needs-validation" novalidate method="POST" action="/admin/adduser">
+            {{ form.hidden_tag() }}
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$" required>
+                <div class="invalid-feedback">
+                    Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" id="password" name="password" minlength="1" maxlength="30" placeholder="Enter password" required>
+                <div class="invalid-feedback">
+                    Password must be between 1 and 30 characters long.
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="name">Name</label>
+                <input type="text" class="form-control" id="name" name="name" pattern="^[\u4e00-\u9fa5]{2,5}$" placeholder="Enter name" required>
+                <div class="invalid-feedback">
+                    Name must be 2-5 Chinese characters.
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="mailAddr">Email</label>
+                <input type="email" class="form-control" id="mailAddr" name="mailAddr" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" maxlength="30" placeholder="Enter email" required>
+                <div class="invalid-feedback">
+                    Invalid email format.
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="privilege">Privilege</label>
+                <input type="text" class="form-control" id="privilege" name="privilege" pattern="^[0-9]$|^10$" placeholder="Enter privilege" required>
+                <div class="invalid-feedback">
+                    Privilege must be an integer between 0 and 10.
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary btn-block">Add User</button>
+        </form>
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const addUserForm = document.getElementById('addUserForm');
+
+        // Utility function to toggle validation classes
+        function validateInput(input) {
+            if (input.checkValidity()) {
+                input.classList.remove('is-invalid');
+                input.classList.add('is-valid');
+            } else {
+                input.classList.remove('is-valid');
+                input.classList.add('is-invalid');
+            }
+        }
+
+        // Attach input event listeners for real-time validation
+        ['username', 'password', 'name', 'mailAddr', 'privilege'].forEach(fieldId => {
+            const input = document.getElementById(fieldId);
+            input.addEventListener('input', () => validateInput(input));
+        });
+
+        // Final form validation on submit
+        addUserForm.addEventListener('submit', function(event) {
+            let formValid = true;
+
+            ['username', 'password', 'name', 'mailAddr', 'privilege'].forEach(fieldId => {
+                const input = document.getElementById(fieldId);
+                validateInput(input);
+                if (!input.checkValidity()) {
+                    formValid = false;
+                }
+            });
+
+            if (!formValid) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+
+            addUserForm.classList.add('was-validated');
+        });
+    });
+</script>
+{% endblock %}