Refactor user authentication and cookie management; add dashboard and update settings
This commit is contained in:
@@ -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();
|
||||||
Reference in New Issue
Block a user