Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Enroll</title> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='app.ico') }}"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Enroll</h1> | |
| <form id="signup-form"> | |
| <div class="input-field"> | |
| <input type="text" id="username" name="username" required> | |
| <label for="username">Username</label> | |
| </div> | |
| <div class="input-field"> | |
| <input type="password" id="password" name="password" required> | |
| <label for="password">Password</label> | |
| <i class="material-icons toggle-password" onclick="togglePasswordVisibility()">visibility_off</i> | |
| </div> | |
| <button class="btn waves-effect waves-light green darken-1" type="submit" name="action">Enroll | |
| <i class="material-icons right">send</i> | |
| </button> | |
| </form> | |
| <p>Already have an account? <a href="/">Authenticate</a></p> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script> | |
| function togglePasswordVisibility() { | |
| var passwordInput = document.getElementById("password"); | |
| var toggleIcon = document.querySelector(".toggle-password"); | |
| if (passwordInput.type === "password") { | |
| passwordInput.type = "text"; | |
| toggleIcon.textContent = "visibility"; | |
| } else { | |
| passwordInput.type = "password"; | |
| toggleIcon.textContent = "visibility_off"; | |
| } | |
| } | |
| $(document).ready(function(){ | |
| $('#signup-form').submit(function(e){ | |
| e.preventDefault(); | |
| $.ajax({ | |
| url: '/api/enroll', | |
| method: 'POST', | |
| contentType: 'application/json', | |
| data: JSON.stringify({ | |
| username: $('#username').val(), | |
| password: $('#password').val() | |
| }), | |
| success: function(response){ | |
| M.toast({html: response.message}); | |
| }, | |
| error: function(xhr, status, error){ | |
| M.toast({html: xhr.responseJSON.error}); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |