Spaces:
Runtime error
Runtime error
<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> | |