dramaling-vocab-learning/frontend/public/test-register.html

62 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Test Register API</title>
</head>
<body>
<h1>Test Register API</h1>
<form id="testForm">
<div>
<label>Username:</label>
<input type="text" id="username" value="testuser123" required>
</div>
<div>
<label>Email:</label>
<input type="email" id="email" value="testuser123@example.com" required>
</div>
<div>
<label>Password:</label>
<input type="password" id="password" value="TestPassword123" required>
</div>
<button type="submit">Register</button>
</form>
<div id="result"></div>
<script>
document.getElementById('testForm').addEventListener('submit', async (e) => {
e.preventDefault();
const data = {
username: document.getElementById('username').value,
email: document.getElementById('email').value,
password: document.getElementById('password').value
};
console.log('Sending data:', data);
try {
const response = await fetch('http://localhost:5008/api/auth/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
console.log('Response status:', response.status);
const result = await response.json();
console.log('Response data:', result);
document.getElementById('result').innerHTML =
'<pre>' + JSON.stringify(result, null, 2) + '</pre>';
} catch (error) {
console.error('Error:', error);
document.getElementById('result').innerHTML =
'<div style="color: red;">Error: ' + error.message + '</div>';
}
});
</script>
</body>
</html>