diff --git a/WebGames-master/WebGames-master/assets/save-to-cloud-2.png b/WebGames-master/WebGames-master/assets/save-to-cloud-2.png new file mode 100644 index 00000000..3aafc2b0 Binary files /dev/null and b/WebGames-master/WebGames-master/assets/save-to-cloud-2.png differ diff --git a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/app.js b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/app.js index 742508e5..7d35af77 100644 --- a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/app.js +++ b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/app.js @@ -1,6 +1,9 @@ // Initialize Userbase 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) => { e.preventDefault(); const username = document.getElementById('signup-username').value; // Email as username @@ -8,7 +11,6 @@ document.getElementById('signup-form').addEventListener('submit', async (e) => { try { const user = await userbase.signUp({ username: username, password }); - document.cookie = `user=${user.username}; path=/;`; alert('Signup successful!'); } catch (error) { console.error('Signup error:', error); @@ -22,117 +24,225 @@ document.getElementById('login-form').addEventListener('submit', async (e) => { const password = document.getElementById('login-password').value; try { - const user = await userbase.signIn({ username: username, password }); - document.cookie = `user=${user.username}; path=/;`; + currentUser = await userbase.signIn({ + username: username, + password: password, + rememberMe: 'none' // Do not remember the session + }); alert('Login successful!'); document.getElementById('form-container').style.display = 'none'; document.getElementById('note-management').style.display = 'block'; + + // Open the Userbase database + await openUserbaseDatabase(); } catch (error) { console.error('Login error:', error); 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() { - const note = document.getElementById('note-input').value; - if (!note) { + 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 { - const user = await userbase.getCurrentUser(); // Get the current user - await userbase.insert({ - database: 'user_notes', - item: { userId: user.userId, text: note } + await userbase.insertItem({ + databaseName: 'notes-database', + item: { text: noteText } }); alert('Note saved successfully!'); document.getElementById('note-input').value = ''; // Clear input - loadNotes(); // Reload notes after saving } catch (error) { console.error('Error saving note:', error); alert('Failed to save note: ' + error.message); } } -// Function to load notes from Userbase -async function loadNotes() { - try { - const user = await userbase.getCurrentUser(); // Get the current user - const result = await userbase.query({ - database: 'user_notes', - filter: { userId: user.userId } - }); - const notesList = document.getElementById('notes-list'); - notesList.innerHTML = ''; // Clear existing notes - - if (result.length > 0) { - result.forEach(note => { - const noteItem = document.createElement('li'); - noteItem.className = 'note-item'; - noteItem.textContent = note.text; - - // Create delete button - const deleteButton = document.createElement('button'); - deleteButton.textContent = 'Delete'; - deleteButton.style.marginLeft = '10px'; - deleteButton.onclick = () => deleteNote(note.id); // Bind delete function - - noteItem.appendChild(deleteButton); - notesList.appendChild(noteItem); - }); - } else { - alert('No notes found for this user.'); - } - } catch (error) { - console.error('Error loading notes:', error); - alert('Failed to load notes: ' + error.message); - } -} - // Function to delete a note from Userbase -async function deleteNote(noteId) { +async function deleteNote(itemId) { + if (!isDatabaseOpen) { + alert('Database is not open. Please try again later.'); + return; + } + try { - await userbase.delete(noteId); + await userbase.deleteItem({ + databaseName: 'notes-database', + itemId: itemId + }); alert('Note deleted successfully!'); - loadNotes(); // Reload notes after deletion } catch (error) { console.error('Error deleting note:', error); alert('Failed to delete note: ' + error.message); } } -// Function to get user metadata -async function getUserMetadata(userId, accessToken) { +// Function to log out the user +async function logout() { try { - const response = await fetch(`https://v1.userbase.com/v1/admin/users/${userId}`, { - method: 'GET', - headers: { - 'Authorization': `Bearer ${accessToken}` - } - }); - - if (!response.ok) { - throw new Error('Failed to fetch user metadata'); - } - - const userData = await response.json(); - console.log('User Metadata:', userData); - alert(`User Metadata Retrieved: ${JSON.stringify(userData)}`); + 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('Error fetching user metadata:', error); - alert('Error fetching user metadata: ' + error.message); + console.error('Logout error:', error); + alert('Logout failed: ' + error.message); } } -// Example usage of getUserMetadata -document.getElementById('get-user-metadata').addEventListener('click', async () => { - const userId = 'USER_ID'; // Replace with the actual user ID - const accessToken = 'ACCESS_TOKEN'; // Replace with the actual access token - await getUserMetadata(userId, accessToken); +// 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 +async function loadCookiesFromCloud() { + try { + // Ensure the database is open + if (!isDatabaseOpen) { + await openUserbaseDatabase(); + } + + // Clear existing cookies + document.cookie.split(";").forEach((cookie) => { + document.cookie = cookie.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); + }); + + // Fetch cookies from the cloud + const items = await userbase.getDatabaseItems({ databaseName: 'notes-database' }); + let cookiesFromCloud = ''; + items.forEach(item => { + cookiesFromCloud += item.item.text; + }); + + // Save cookies to the page + document.cookie = `userCookies=${cookiesFromCloud}; path=/`; + + // Display the cookies on the page + document.getElementById('cookies-display').innerText = cookiesFromCloud; + // Alert the user that the cookies have been loaded + alert('Cookies loaded from cloud!'); + } catch (error) { + console.error('Error loading cookies from cloud:', error); + alert('Failed to load cookies from cloud: ' + error.message); + } +} + +// Add event listener to the "Load Cookies from Cloud" button +document.getElementById('load-cookies-cloud').addEventListener('click', loadCookiesFromCloud); + +// 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('load-notes').addEventListener('click', loadNotes); \ No newline at end of file +document.getElementById('logout-button').addEventListener('click', logout); + +// Check if user is logged in when the page loads +window.onload = checkUserLoggedIn; diff --git a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html index 2a4243eb..c9718867 100644 --- a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html +++ b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html @@ -3,13 +3,13 @@ - acawnts + Notes Management - +
-

Userbase Note Management

+

Notes Management

Sign Up

@@ -24,7 +24,15 @@
+
- + \ No newline at end of file diff --git a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/styles.css b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/styles.css index 0c334492..26bef55c 100644 --- a/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/styles.css +++ b/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/styles.css @@ -57,4 +57,16 @@ button:hover { padding: 10px; margin: 5px 0; border-radius: 4px; -} \ No newline at end of file +} + +.note-item button { + background-color: #d9534f; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.note-item button:hover { + background-color: #c9302c; +} diff --git a/index.html b/index.html index a1cd1030..c75ce058 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + diff --git a/script2.js b/script2.js index 0ca4be3f..8ffffd8f 100644 --- a/script2.js +++ b/script2.js @@ -80,8 +80,8 @@ const mainContentData = [ link: "/Contact.html", }, { - name: "login", - image: "/images.png", + name: "save to cloud", + image: "/WebGames-master/WebGames-master/assets/save-to-cloud-2.png", link: "/WebGames-master/WebGames-master/userlogins-for-fun-miles-main/index.html", }, ];