write data check

UI/templates/base.html

@@ -46,5 +46,6 @@
     </div>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </body>
 </html>

UI/templates/login.html

@@ -6,22 +6,62 @@
 <div class="row justify-content-center">
     <div class="col-md-6">
         <h2 class="text-center">Login</h2>
-        {% if error %}
-        <div class="alert alert-danger" role="alert">
-            {{ error }}
-        </div>
-        {% endif %}
-        <form method="POST" action="/login">
+        <form id="loginForm" class="needs-validation" novalidate method="POST" action="/login">
+            {{ form.hidden_tag() }}
             <div class="form-group">
                 <label for="username">Username</label>
-                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" required>
+                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your 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" placeholder="Enter your password" required>
+                <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" minlength="1" maxlength="30" required>
+                <div class="invalid-feedback">
+                    Password must be between 1 and 30 characters long.
+                </div>
             </div>
             <button type="submit" class="btn btn-primary btn-block">Login</button>
         </form>
     </div>
 </div>
+
+<script>
+    // JavaScript for form validation
+    document.addEventListener('DOMContentLoaded', function() {
+        const loginForm = document.getElementById('loginForm');
+        loginForm.addEventListener('submit', function(event) {
+            if (!loginForm.checkValidity()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            loginForm.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');
+            }
+        });
+
+        // Real-time validation for password
+        const passwordInput = document.getElementById('password');
+        passwordInput.addEventListener('input', function() {
+            if (passwordInput.checkValidity()) {
+                passwordInput.classList.remove('is-invalid');
+                passwordInput.classList.add('is-valid');
+            } else {
+                passwordInput.classList.remove('is-valid');
+                passwordInput.classList.add('is-invalid');
+            }
+        });
+    });
+</script>
 {% endblock %}