miles/moon-gaming
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated thes

Browse Source
This commit is contained in:
miles
2025-10-30 09:35:58 -05:00
committed by GitHub
parent a7f1adbf83
commit 4d0efd3ca5
4 changed files with 226 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
idk/index.html
+7 -20
View File
@@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script> <script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script>
<script src="https://unpkg.com/userbase-js@latest/dist/userbase-sdk.umd.js"></script>
<script src="script.js"></script>
<meta charset="UTF-8">\
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userbase Authentication Demo</title> <title>Userbase Authentication Demo</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
@@ -29,29 +31,16 @@
<p id="login-message" class="message"></p> <p id="login-message" class="message"></p>
<p><a href="#" id="forgot-password-link">Forgot Password?</a></p> <p><a href="#" id="forgot-password-link">Forgot Password?</a></p>
</form> </form>
<div id="logged-in-actions" style="display: none;">
<button id="go-to-profile-button">Go to Profile</button>
<button id="logout-button-main-page">Log Out</button>
</div> </div>
<div id="profile-section" style="display: none;">
<h2>Welcome, <span id="profile-username"></span>!</h2>
<h3>Your Profile</h3>
<p><strong>User ID:</strong> <span id="profile-userid"></span></p>
<p><strong>Email:</strong> <span id="profile-email"></span></p>
<h3>Update Profile</h3>
<form id="update-profile-form">
<label for="new-email">New Email:</label>
<input type="email" id="new-email" placeholder="Enter new email">
<button type="submit">Update Email</button>
<p id="update-profile-message" class="message"></p>
</form>
<button id="logout-button">Log Out</button>
</div> </div>
<div id="forgot-password-section" style="display: none;"> <div id="forgot-password-section" style="display: none;">
<h2>Forgot Password</h2> <h2>Forgot Password</h2>
<p>Enter your username to receive a temporary password.</p> <p>Enter your username to receive a temporary password.</p>
<form id="forgot-password-form">\ <form id="forgot-password-form">
<input type="text" id="forgot-username" placeholder="Username" required> <input type="text" id="forgot-username" placeholder="Username" required>
<button type="submit">Send Temporary Password</button> <button type="submit">Send Temporary Password</button>
<p id="forgot-password-message" class="message"></p> <p id="forgot-password-message" class="message"></p>
@@ -60,7 +49,5 @@
</div> </div>
</div> </div>
<script src="https://unpkg.com/userbase-js@latest/dist/userbase-sdk.umd.js"></script>
<script src="script.js"></script>
</body> </body>
</html> </html>
idk/profile.html
+172
View File
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script>
<script src="https://unpkg.com/userbase-js@latest/dist/userbase-sdk.umd.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link rel="stylesheet" href="style.css"> <!-- Link to your existing style.css -->
</head>
<body>
<div class="container">
<h1>User Profile</h1>
<div id="profile-info" class="profile-info">
<h2>Your Information</h2>
<p><strong>Username:</strong> <span id="display-username"></span></p>
<p><strong>User ID:</strong> <span id="display-userid"></span></p>
<p><strong>Email:</strong> <span id="display-email"></span></p>
<p><strong>First Name:</strong> <span id="display-first-name"></span></p>
<p><strong>Last Name:</strong> <span id="display-last-name"></span></p>
</div>
<form id="update-profile-form">
<h2>Update Profile</h2>
<label for="update-email">Email:</label>
<input type="email" id="update-email" name="email" placeholder="Enter new email" required>
<label for="update-first-name">First Name:</label>
<input type="text" id="update-first-name" name="first-name" placeholder="Enter first name">
<label for="update-last-name">Last Name:</label>
<input type="text" id="update-last-name" name="last-name" placeholder="Enter last name">
<button type="submit">Update Profile</button>
<p id="update-profile-message" class="message"></p>
</form>
<button id="logout-button" class="logout-button">Log Out</button>
<p class="back-link"><a href="index.html">Back to Login/Signup</a></p>
</div>
<script>
// IMPORTANT: Replace 'YOUR_APP_ID' with your actual Userbase App ID.
// You can find this in your Userbase dashboard.
const APP_ID = '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc';
// Initialize Userbase SDK
try {
userbase.init({ appId: APP_ID });
console.log('Userbase SDK initialized successfully on profile page.');
} catch (e) {
console.error('Failed to initialize Userbase SDK on profile page:', e);
alert('Failed to initialize Userbase SDK. Check your App ID and console for errors.');
}
// --- DOM Elements ---
const displayUsername = document.getElementById('display-username');
const displayUserId = document.getElementById('display-userid');
const displayEmail = document.getElementById('display-email');
const displayFirstName = document.getElementById('display-first-name');
const displayLastName = document.getElementById('display-last-name');
const updateProfileForm = document.getElementById('update-profile-form');
const updateEmailInput = document.getElementById('update-email');
const updateFirstNameInput = document.getElementById('update-first-name');
const updateLastNameInput = document.getElementById('update-last-name');
const updateProfileMessage = document.getElementById('update-profile-message');
const logoutButton = document.getElementById('logout-button');
// --- Helper Functions ---
function displayMessage(element, message, type) {
element.textContent = message;
element.className = `message ${type}`;
}
function clearMessages() {
updateProfileMessage.textContent = '';
updateProfileMessage.className = 'message';
}
async function fetchAndDisplayUserProfile() {
clearMessages();
try {
const session = await userbase.getSession();
if (session.user) {
const user = session.user;
console.log('User data on profile page:', user);
displayUsername.textContent = user.username;
displayUserId.textContent = user.userId;
displayEmail.textContent = user.email || 'N/A';
displayFirstName.textContent = user.profile?.firstName || 'N/A';
displayLastName.textContent = user.profile?.lastName || 'N/A';
// Pre-fill update form
updateEmailInput.value = user.email || '';
updateFirstNameInput.value = user.profile?.firstName || '';
updateLastNameInput.value = user.profile?.lastName || '';
} else {
console.log('No active session on profile page, redirecting to login.');
window.location.href = 'index.html'; // Redirect if not logged in
}
} catch (e) {
console.error('Error fetching user session on profile page:', e);
displayMessage(updateProfileMessage, `Error loading profile: ${e.message}`, 'error');
window.location.href = 'index.html'; // Redirect on error
}
}
// --- Event Handlers ---
// Load profile data on page load
document.addEventListener('DOMContentLoaded', fetchAndDisplayUserProfile);
// Update Profile
updateProfileForm.addEventListener('submit', async (e) => {
e.preventDefault();
clearMessages();
const newEmail = updateEmailInput.value || null; // Userbase expects null to remove email
const newFirstName = updateFirstNameInput.value || null;
const newLastName = updateLastNameInput.value || null;
try {
const updatedUser = await userbase.updateUser({
email: newEmail,
profile: {
firstName: newFirstName,
lastName: newLastName
}
});
displayMessage(updateProfileMessage, 'Profile updated successfully!', 'success');
// Re-display updated profile info
displayEmail.textContent = updatedUser.email || 'N/A';
displayFirstName.textContent = updatedUser.profile?.firstName || 'N/A';
displayLastName.textContent = updatedUser.profile?.lastName || 'N/A';
} catch (e) {
console.error('Update profile failed:', e);
displayMessage(updateProfileMessage, `Update failed: ${e.message}`, 'error');
}
});
// Logout
logoutButton.addEventListener('click', async () => {
clearMessages();
try {
await userbase.signOut();
console.log('Logged out successfully from profile page.');
window.location.href = 'index.html'; // Redirect to login page after logout
} catch (e) {
console.error('Logout failed:', e);
displayMessage(updateProfileMessage, `Logout failed: ${e.message}`, 'error');
}
});
// Listener for session changes (e.g., if a session expires or user logs in/out in another tab)
userbase.onUpdate((session) => {
if (session.user) {
console.log('User session updated on profile page:', session.user);
fetchAndDisplayUserProfile(); // Refresh profile data
} else {
console.log('User session ended on profile page.');
window.location.href = 'index.html'; // Redirect if session ends
}
});
</script>
</body>
</html>
idk/script.js
+37 -54
View File
@@ -6,17 +6,16 @@ const APP_ID = '7cd8e25b-723d-4af7-8bdf-ef558bd0dfcc';
// Initialize Userbase SDK // Initialize Userbase SDK
try { try {
userbase.init({ appId: APP_ID }); userbase.init({ appId: APP_ID });
console.log('Userbase SDK initialized successfully.'); console.log('Userbase SDK initialized successfully on index page.');
} catch (e) { } catch (e) {
console.error('Failed to initialize Userbase SDK:', e); console.error('Failed to initialize Userbase SDK on index page:', e);
alert('Failed to initialize Userbase SDK. Check your App ID and console for errors.'); alert('Failed to initialize Userbase SDK. Check your App ID and console for errors.');
} }
// --- DOM Elements --- // --- DOM Elements ---
const authSection = document.getElementById('auth-section'); const authSection = document.getElementById('auth-section');
const profileSection = document.getElementById('profile-section');
const forgotPasswordSection = document.getElementById('forgot-password-section'); const forgotPasswordSection = document.getElementById('forgot-password-section');
const loggedInActions = document.getElementById('logged-in-actions');
// Signup form // Signup form
const signupForm = document.getElementById('signup-form'); const signupForm = document.getElementById('signup-form');
@@ -30,17 +29,9 @@ const loginForm = document.getElementById('login-form');
const loginUsernameInput = document.getElementById('login-username'); const loginUsernameInput = document.getElementById('login-username');
const loginPasswordInput = document.getElementById('login-password'); const loginPasswordInput = document.getElementById('login-password');
const loginMessage = document.getElementById('login-message'); const loginMessage = document.getElementById('login-message');
const goToProfileButton = document.getElementById('go-to-profile-button');
const logoutButtonMainPage = document.getElementById('logout-button-main-page');
// Profile section
const profileUsernameSpan = document.getElementById('profile-username');
const profileUserIdSpan = document.getElementById('profile-userid');
const profileEmailSpan = document.getElementById('profile-email');
const logoutButton = document.getElementById('logout-button');
// Update Profile form
const updateProfileForm = document.getElementById('update-profile-form');
const newEmailInput = document.getElementById('new-email');
const updateProfileMessage = document.getElementById('update-profile-message');
// Forgot password // Forgot password
const forgotPasswordLink = document.getElementById('forgot-password-link'); const forgotPasswordLink = document.getElementById('forgot-password-link');
@@ -57,7 +48,7 @@ function displayMessage(element, message, type) {
} }
function clearMessages() { function clearMessages() {
[signupMessage, loginMessage, updateProfileMessage, forgotPasswordMessage].forEach(el => { [signupMessage, loginMessage, forgotPasswordMessage].forEach(el => {
el.textContent = ''; el.textContent = '';
el.className = 'message'; el.className = 'message';
}); });
@@ -65,8 +56,8 @@ function clearMessages() {
function showAuthSection() { function showAuthSection() {
authSection.style.display = 'block'; authSection.style.display = 'block';
profileSection.style.display = 'none';
forgotPasswordSection.style.display = 'none'; forgotPasswordSection.style.display = 'none';
loggedInActions.style.display = 'none'; // Hide logged-in actions
clearMessages(); clearMessages();
// Clear form fields // Clear form fields
signupForm.reset(); signupForm.reset();
@@ -74,20 +65,17 @@ function showAuthSection() {
forgotPasswordForm.reset(); forgotPasswordForm.reset();
} }
function showProfileSection(user) { function showLoggedInActions() {
authSection.style.display = 'none'; authSection.style.display = 'block'; // Keep login/signup forms visible for now, but hide them in practice
forgotPasswordSection.style.display = 'none'; loggedInActions.style.display = 'block'; // Show "Go to Profile" and "Logout"
profileSection.style.display = 'block'; signupForm.style.display = 'none';
loginForm.style.display = 'none';
clearMessages(); clearMessages();
profileUsernameSpan.textContent = user.username;
profileUserIdSpan.textContent = user.userId;
profileEmailSpan.textContent = user.email || 'N/A'; // 'N/A' if email is not set
newEmailInput.value = user.email || ''; // Pre-fill with current email
} }
function showForgotPasswordSection() { function showForgotPasswordSection() {
authSection.style.display = 'none'; authSection.style.display = 'none';
profileSection.style.display = 'none';
forgotPasswordSection.style.display = 'block'; forgotPasswordSection.style.display = 'block';
clearMessages(); clearMessages();
forgotPasswordForm.reset(); forgotPasswordForm.reset();
@@ -99,8 +87,8 @@ function showForgotPasswordSection() {
userbase.getSession() userbase.getSession()
.then(session => { .then(session => {
if (session.user) { if (session.user) {
console.log('User already logged in:', session.user); console.log('User already logged in. Redirecting to profile page.');
showProfileSection(session.user); window.location.href = 'profile.html'; // Redirect to profile page
} else { } else {
console.log('No active session.'); console.log('No active session.');
showAuthSection(); showAuthSection();
@@ -123,13 +111,15 @@ signupForm.addEventListener('submit', async (e) => {
const user = await userbase.signUp({ const user = await userbase.signUp({
username, username,
password, password,
email, // Email is optional email,
profile: { profile: {
// You can add other profile data here if needed // You can add other initial profile data here if needed during signup
} }
}); });
displayMessage(signupMessage, `Signup successful! Welcome, ${user.username}. You are now logged in.`, 'success'); displayMessage(signupMessage, `Signup successful! Welcome, ${user.username}. Redirecting to profile...`, 'success');
showProfileSection(user); setTimeout(() => {
window.location.href = 'profile.html'; // Redirect after a short delay
}, 1500);
} catch (e) { } catch (e) {
console.error('Signup failed:', e); console.error('Signup failed:', e);
displayMessage(signupMessage, `Signup failed: ${e.message}`, 'error'); displayMessage(signupMessage, `Signup failed: ${e.message}`, 'error');
@@ -145,44 +135,37 @@ loginForm.addEventListener('submit', async (e) => {
try { try {
const user = await userbase.signIn({ username, password }); const user = await userbase.signIn({ username, password });
displayMessage(loginMessage, `Login successful! Welcome, ${user.username}.`, 'success'); displayMessage(loginMessage, `Login successful! Welcome, ${user.username}. Redirecting to profile...`, 'success');
showProfileSection(user); setTimeout(() => {
window.location.href = 'profile.html'; // Redirect after a short delay
}, 1500);
} catch (e) { } catch (e) {
console.error('Login failed:', e); console.error('Login failed:', e);
displayMessage(loginMessage, `Login failed: ${e.message}`, 'error'); displayMessage(loginMessage, `Login failed: ${e.message}`, 'error');
} }
}); });
// Logout // Logout from main page button (if user logs in and then logs out without going to profile)
logoutButton.addEventListener('click', async () => { logoutButtonMainPage.addEventListener('click', async () => {
clearMessages(); clearMessages();
try { try {
await userbase.signOut(); await userbase.signOut();
console.log('Logged out successfully.'); console.log('Logged out successfully from main page.');
displayMessage(loginMessage, 'You have been logged out.', 'success'); displayMessage(loginMessage, 'You have been logged out.', 'success');
showAuthSection(); showAuthSection();
} catch (e) { } catch (e) {
console.error('Logout failed:', e); console.error('Logout failed:', e);
displayMessage(updateProfileMessage, `Logout failed: ${e.message}`, 'error'); displayMessage(loginMessage, `Logout failed: ${e.message}`, 'error');
} }
}); });
// Update Profile (Email)
updateProfileForm.addEventListener('submit', async (e) => {
e.preventDefault();
clearMessages();
const newEmail = newEmailInput.value || null; // Userbase expects null to remove email
try { // Go to Profile button
const user = await userbase.updateUser({ email: newEmail }); goToProfileButton.addEventListener('click', () => {
displayMessage(updateProfileMessage, 'Profile updated successfully!', 'success'); window.location.href = 'profile.html';
showProfileSection(user); // Re-fetch and display updated profile
} catch (e) {
console.error('Update profile failed:', e);
displayMessage(updateProfileMessage, `Update failed: ${e.message}`, 'error');
}
}); });
// Forgot Password link // Forgot Password link
forgotPasswordLink.addEventListener('click', (e) => { forgotPasswordLink.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
@@ -214,10 +197,10 @@ forgotPasswordForm.addEventListener('submit', async (e) => {
// Listener for session changes (e.g., if a session expires or user logs in/out in another tab) // Listener for session changes (e.g., if a session expires or user logs in/out in another tab)
userbase.onUpdate((session) => { userbase.onUpdate((session) => {
if (session.user) { if (session.user) {
console.log('User session updated:', session.user); console.log('User session updated on index page:', session.user);
showProfileSection(session.user); window.location.href = 'profile.html'; // Redirect if session starts in another tab
} else { } else {
console.log('User session ended.'); console.log('User session ended on index page.');
showAuthSection(); showAuthSection(); // Show auth forms if session ends
} }
}); });
idk/style.css
+8 -4
View File
@@ -1,5 +1,4 @@
style.css
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f4f4f4; background-color: #f4f4f4;
@@ -62,12 +61,13 @@ button:hover {
background-color: #0056b3; background-color: #0056b3;
} }
#logout-button { /* Specific styling for profile and main page logout buttons */
.logout-button, #logout-button-main-page {
background-color: #dc3545; background-color: #dc3545;
margin-top: 20px; margin-top: 20px;
} }
#logout-button:hover { .logout-button:hover, #logout-button-main-page:hover {
background-color: #c82333; background-color: #c82333;
} }
@@ -99,7 +99,11 @@ a:hover {
text-decoration: underline; text-decoration: underline;
} }
#profile-section p { .profile-info p { /* Added styling for profile.html info display */
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px 0; padding: 5px 0;
} }
#logged-in-actions button { /* Style for buttons appearing after login on main page */
margin-top: 10px;
}