86 lines
3.2 KiB
PHP
86 lines
3.2 KiB
PHP
<?php
|
|
require('../.hta_header.php');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PocketBase Login</title>
|
|
</head>
|
|
<body>
|
|
<div class="my-5">
|
|
<form id="loginForm" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
|
|
<div style="display: flex; flex-direction: column; max-width: 500px; width: 400px; gap: 10px; background-color: #ffddcc; padding: 30px; border-radius: 10px;">
|
|
<h3 style="text-align: center; color: #402517; line-height: 0;">Login</h3>
|
|
<hr style="border-top: 2px solid #402517;">
|
|
<input type="text" id="userName" placeholder="Username or Email" style="padding: 10px;" />
|
|
<input type="password" id="password" placeholder="Password" style="padding: 10px;" />
|
|
<button type="submit" style="padding: 10px;">Login</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import PocketBase from 'https://cdn.jsdelivr.net/npm/pocketbase@0.15.0';
|
|
const pb = new PocketBase('http://127.0.0.1:8090');
|
|
|
|
// Handle login form submission
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault(); // Prevent the default form submission
|
|
|
|
const usernameOrEmail = document.getElementById('userName').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
try {
|
|
// Authenticate user
|
|
const authData = await pb.collection('users').authWithPassword(usernameOrEmail, password);
|
|
|
|
console.log('Authentication successful!');
|
|
console.log('Is Auth Valid:', pb.authStore.isValid);
|
|
console.log('Auth Token:', pb.authStore.token);
|
|
console.log('User ID:', pb.authStore.model.id);
|
|
|
|
alert('Login successful!');
|
|
} catch (error) {
|
|
console.error('Login failed:', error);
|
|
alert('Login failed. Please check your credentials.');
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
<!-- <script> -->
|
|
|
|
<!-- // after the above you can also access the auth data from the authStore
|
|
|
|
// // Attach event listener to the form
|
|
// document.getElementById('loginForm').addEventListener('submit', function (e) {
|
|
// e.preventDefault(); // Prevent the form from reloading the page
|
|
|
|
// let userData = {
|
|
// "identity": document.getElementById('userName').value,
|
|
// "password": document.getElementById('password').value
|
|
// };
|
|
|
|
// fetch('http://192.168.1.197:8090/api/collections/users/auth-with-password', {
|
|
// method: 'POST',
|
|
// headers: {
|
|
// 'Content-Type': 'application/json'
|
|
// },
|
|
// body: JSON.stringify(userData)
|
|
// })
|
|
// .then(res => res.json())
|
|
// .then(data => {
|
|
// console.log(data);
|
|
// })
|
|
// .catch(error => {
|
|
// console.error(error);
|
|
// });
|
|
// }); -->
|
|
<!-- </script> -->
|
|
|
|
<?php
|
|
require_once('../.hta_footer.php');
|
|
?>
|