Refactor user authentication and cookie management; add dashboard and update settings

This commit is contained in:
2025-04-04 18:33:30 +00:00
parent 54209c6d23
commit 337304b897
3 changed files with 100 additions and 208 deletions
@@ -1,17 +1,14 @@
// Initialize Userbase
userbase.init({ appId: '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc' }); // Replace with your Userbase app ID userbase.init({ appId: '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc' }); // Replace with your Userbase app ID
let currentUser; // Variable to hold the current user object
let isDatabaseOpen = false; // Flag to check if the database is open
document.getElementById('signup-form').addEventListener('submit', async (e) => { document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const username = document.getElementById('signup-username').value; // Email as username const username = document.getElementById('signup-username').value;
const password = document.getElementById('signup-password').value; const password = document.getElementById('signup-password').value;
try { try {
const user = await userbase.signUp({ username: username, password }); await userbase.signUp({ username, password });
alert('Signup successful!'); alert('Signup successful!');
window.location.href = 'dashboard.html';
} catch (error) { } catch (error) {
console.error('Signup error:', error); console.error('Signup error:', error);
alert('Signup failed: ' + error.message); alert('Signup failed: ' + error.message);
@@ -20,214 +17,20 @@ document.getElementById('signup-form').addEventListener('submit', async (e) => {
document.getElementById('login-form').addEventListener('submit', async (e) => { document.getElementById('login-form').addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const username = document.getElementById('login-username').value; // Email as username const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value; const password = document.getElementById('login-password').value;
try { try {
currentUser = await userbase.signIn({ await userbase.signIn({ username, password });
username: username,
password: password,
rememberMe: 'none' // Do not remember the session
});
alert('Login successful!'); alert('Login successful!');
document.getElementById('form-container').style.display = 'none';
document.getElementById('note-management').style.display = 'block';
// Open the Userbase database // Save cookies to browser after login
await openUserbaseDatabase(); document.cookie = `username=${username}; path=/`;
document.cookie = `session=${password}; path=/`;
window.location.href = 'dashboard.html';
} catch (error) { } catch (error) {
console.error('Login error:', error); console.error('Login error:', error);
alert('Login failed: ' + error.message); alert('Login failed: ' + error.message);
} }
}); });
// Function to check if user is logged in
async function checkUserLoggedIn() {
try {
currentUser = await userbase.getUser();
if (currentUser) {
document.getElementById('form-container').style.display = 'none';
document.getElementById('note-management').style.display = 'block';
// Open the Userbase database
await openUserbaseDatabase();
}
} catch (error) {
console.error('Error checking user login status:', error);
}
}
// Function to open Userbase database
async function openUserbaseDatabase() {
try {
await userbase.openDatabase({
databaseName: 'notes-database',
changeHandler: function (items) {
const notesList = document.getElementById('notes-list');
notesList.innerHTML = ''; // Clear existing notes
items.forEach(item => {
const noteItem = document.createElement('li');
noteItem.className = 'note-item';
noteItem.textContent = item.item.text;
// Create delete button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.style.marginLeft = '10px';
deleteButton.onclick = () => deleteNote(item.itemId); // Bind delete function
noteItem.appendChild(deleteButton);
notesList.appendChild(noteItem);
});
}
});
isDatabaseOpen = true;
console.log('Database opened successfully.');
} catch (error) {
isDatabaseOpen = false;
console.error('Error opening database:', error);
}
}
// Function to save note to Userbase
async function saveNote() {
if (!isDatabaseOpen) {
alert('Database is not open. Please try again later.');
return;
}
const noteText = document.getElementById('note-input').value;
if (!noteText) {
alert('Please enter a note to save.');
return;
}
try {
await userbase.insertItem({
databaseName: 'notes-database',
item: { text: noteText }
});
alert('Note saved successfully!');
document.getElementById('note-input').value = ''; // Clear input
} catch (error) {
console.error('Error saving note:', error);
alert('Failed to save note: ' + error.message);
}
}
// Function to delete a note from Userbase
async function deleteNote(itemId) {
if (!isDatabaseOpen) {
alert('Database is not open. Please try again later.');
return;
}
try {
await userbase.deleteItem({
databaseName: 'notes-database',
itemId: itemId
});
alert('Note deleted successfully!');
} catch (error) {
console.error('Error deleting note:', error);
alert('Failed to delete note: ' + error.message);
}
}
// Function to log out the user
async function logout() {
try {
await userbase.signOut(); // Sign out from Userbase
currentUser = null; // Clear current user
isDatabaseOpen = false; // Reset database open flag
document.getElementById('form-container').style.display = 'block'; // Show login/signup forms
document.getElementById('note-management').style.display = 'none'; // Hide note management
alert('Logged out successfully!');
} catch (error) {
console.error('Logout error:', error);
alert('Logout failed: ' + error.message);
}
}
// Function to save cookies to the cloud
document.getElementById('save-cookies-cloud').addEventListener('click', async () => {
if (!isDatabaseOpen) {
alert('Database is not open. Please try again later.');
return;
}
try {
// Clear existing items in the database
await userbase.openDatabase({
databaseName: 'notes-database',
changeHandler: async function (items) {
for (const item of items) {
await userbase.deleteItem({
databaseName: 'notes-database',
itemId: item.itemId
});
}
// Save cookies to the cloud
const cookies = document.cookie.split('; ').map(cookie => decodeURIComponent(cookie)).join('\n');
const chunkSize = 9000; // Set chunk size to be less than 10 KB
for (let i = 0; i < cookies.length; i += chunkSize) {
const chunk = cookies.substring(i, i + chunkSize);
await userbase.insertItem({
databaseName: 'notes-database',
item: { text: chunk }
});
}
}
});
} catch (error) {
console.error('Error saving cookies to cloud:', error);
alert('Failed to save cookies to cloud: ' + error.message);
}
});
// Function to load cookies from the cloud
document.getElementById('load-cookies-cloud').addEventListener('click', async () => {
if (!isDatabaseOpen) {
alert('Database is not open. Please try again later.');
return;
}
try {
await userbase.openDatabase({
databaseName: 'notes-database',
changeHandler: function (items) {
const cookies = items.map(item => item.item.text).join('\n');
document.cookie = cookies.split('\n').map(cookie => encodeURIComponent(cookie.trim())).join('; ');
alert('Cookies loaded from cloud successfully!');
}
});
} catch (error) {
console.error('Error loading cookies from cloud:', error);
alert('Failed to load cookies from cloud: ' + error.message);
}
});
// Function to display cookies
function displayCookies() {
const cookies = document.cookie.split('; ').map(cookie => decodeURIComponent(cookie)).join('\n');
document.getElementById('cookies-display').textContent = cookies;
document.getElementById('cookies-input').value = cookies;
}
// Function to save cookies from the textarea
document.getElementById('save-cookies').addEventListener('click', () => {
const cookies = document.getElementById('cookies-input').value.split('\n');
cookies.forEach(cookie => {
document.cookie = encodeURIComponent(cookie.trim());
});
alert('Cookies updated!');
displayCookies();
});
// Event listeners for buttons
document.getElementById('save-note').addEventListener('click', saveNote);
document.getElementById('logout-button').addEventListener('click', logout);
// Check if user is logged in when the page loads
window.onload = checkUserLoggedIn;
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<h1 class="text-center mb-4">Dashboard</h1>
<div class="card shadow-sm">
<div class="card-body text-center">
<button id="save-cookies" class="btn btn-primary mb-3">Save Cookies to Userbase</button>
<button id="load-cookies" class="btn btn-secondary mb-3">Load Cookies from Userbase</button>
<button id="logout" class="btn btn-danger">Logout</button>
</div>
</div>
</div>
<script src="dashboard.js"></script>
</body>
</html>
@@ -0,0 +1,67 @@
userbase.init({ appId: '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc' }); // Replace with your Userbase app ID
let cookiesData = []; // Store cookies data locally
async function openDatabase() {
try {
await userbase.openDatabase({
databaseName: 'cookies-database',
changeHandler: (items) => {
cookiesData = items;
}
});
} catch (error) {
console.error('Error opening database:', error);
}
}
// Save cookies to Userbase
document.getElementById('save-cookies').addEventListener('click', async () => {
try {
// Delete old cookies
for (const item of cookiesData) {
await userbase.deleteItem({ databaseName: 'cookies-database', itemId: item.itemId });
}
// Save new cookies
const cookies = document.cookie.split('; ').map(cookie => decodeURIComponent(cookie)).join('\n');
await userbase.insertItem({ databaseName: 'cookies-database', item: { text: cookies } });
alert('Cookies saved to Userbase successfully!');
} catch (error) {
console.error('Error saving cookies:', error);
alert('Failed to save cookies: ' + error.message);
}
});
// Load cookies from Userbase
document.getElementById('load-cookies').addEventListener('click', async () => {
try {
if (cookiesData.length > 0) {
const cookies = cookiesData[0].item.text.split('\n');
cookies.forEach(cookie => {
document.cookie = encodeURIComponent(cookie.trim());
});
alert('Cookies loaded successfully!');
} else {
alert('No cookies found in Userbase.');
}
} catch (error) {
console.error('Error loading cookies:', error);
alert('Failed to load cookies: ' + error.message);
}
});
// Logout
document.getElementById('logout').addEventListener('click', async () => {
try {
await userbase.signOut();
alert('Logged out successfully!');
window.location.href = 'index.html';
} catch (error) {
console.error('Logout error:', error);
alert('Logout failed: ' + error.message);
}
});
// Open the database on page load
openDatabase();