|
|
@@ -1,18 +1,60 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
+<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
- <title>Title</title>
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Login and Registration</title>
|
|
|
+ <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css">
|
|
|
<style>
|
|
|
+ html, body {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<iframe src="https://news.cnblogs.com/" height="300px" width="300px">
|
|
|
-</iframe>
|
|
|
-<script type="module">
|
|
|
-
|
|
|
+<div class="container">
|
|
|
+ <h1 class="text-center my-5">Login and Registration</h1>
|
|
|
+ <form id="auth-form">
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="email" class="form-label">Email address</label>
|
|
|
+ <input type="email" class="form-control" id="email">
|
|
|
+ </div>
|
|
|
+ <div class="mb-3">
|
|
|
+ <label for="password" class="form-label">Password</label>
|
|
|
+ <input type="password" class="form-control" id="password">
|
|
|
+ </div>
|
|
|
+ <div class="mb-3 form-check">
|
|
|
+ <input type="checkbox" class="form-check-input" id="register-checkbox">
|
|
|
+ <label class="form-check-label" for="register-checkbox">Register</label>
|
|
|
+ </div>
|
|
|
+ <button type="submit" class="btn btn-primary">Submit</button>
|
|
|
+ </form>
|
|
|
+</div>
|
|
|
+<script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
|
+<script>
|
|
|
+ const form = document.getElementById('auth-form');
|
|
|
+ const registerCheckbox = document.getElementById('register-checkbox');
|
|
|
+ form.addEventListener('submit', async (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ const email = document.getElementById('email').value;
|
|
|
+ const password = document.getElementById('password').value;
|
|
|
+ const url = registerCheckbox.checked ? '/register' : '/login';
|
|
|
+ try {
|
|
|
+ const response = await axios.post(url, { email, password });
|
|
|
+ console.log(response);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+ });
|
|
|
</script>
|
|
|
-
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
