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>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<title>Userbase Authentication Demo</title>
<link rel="stylesheet" href="style.css">
@@ -29,29 +31,16 @@
<p id="login-message" class="message"></p>
<p><a href="#" id="forgot-password-link">Forgot Password?</a></p>
</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 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 id="forgot-password-section" style="display: none;">
<h2>Forgot Password</h2>
<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>
<button type="submit">Send Temporary Password</button>
<p id="forgot-password-message" class="message"></p>
@@ -60,7 +49,5 @@
</div>
</div>
<script src="https://unpkg.com/userbase-js@latest/dist/userbase-sdk.umd.js"></script>
<script src="script.js"></script>
</body>
</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
try {
userbase.init({ appId: APP_ID });
console.log('Userbase SDK initialized successfully.');
console.log('Userbase SDK initialized successfully on index page.');
} 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.');
}
// --- DOM Elements ---
const authSection = document.getElementById('auth-section');
const profileSection = document.getElementById('profile-section');
const forgotPasswordSection = document.getElementById('forgot-password-section');
const loggedInActions = document.getElementById('logged-in-actions');
// 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 loginPasswordInput = document.getElementById('login-password');
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
const forgotPasswordLink = document.getElementById('forgot-password-link');
@@ -57,7 +48,7 @@ function displayMessage(element, message, type) {
}
function clearMessages() {
[signupMessage, loginMessage, updateProfileMessage, forgotPasswordMessage].forEach(el => {
[signupMessage, loginMessage, forgotPasswordMessage].forEach(el => {
el.textContent = '';
el.className = 'message';
});
@@ -65,8 +56,8 @@ function clearMessages() {
function showAuthSection() {
authSection.style.display = 'block';
profileSection.style.display = 'none';
forgotPasswordSection.style.display = 'none';
loggedInActions.style.display = 'none'; // Hide logged-in actions
clearMessages();
// Clear form fields
signupForm.reset();
@@ -74,20 +65,17 @@ function showAuthSection() {
forgotPasswordForm.reset();
}
function showProfileSection(user) {
authSection.style.display = 'none';
forgotPasswordSection.style.display = 'none';
profileSection.style.display = 'block';
function showLoggedInActions() {
authSection.style.display = 'block'; // Keep login/signup forms visible for now, but hide them in practice
loggedInActions.style.display = 'block'; // Show "Go to Profile" and "Logout"
signupForm.style.display = 'none';
loginForm.style.display = 'none';
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() {
authSection.style.display = 'none';
profileSection.style.display = 'none';
forgotPasswordSection.style.display = 'block';
clearMessages();
forgotPasswordForm.reset();
@@ -99,8 +87,8 @@ function showForgotPasswordSection() {
userbase.getSession()
.then(session => {
if (session.user) {
console.log('User already logged in:', session.user);
showProfileSection(session.user);
console.log('User already logged in. Redirecting to profile page.');
window.location.href = 'profile.html'; // Redirect to profile page
} else {
console.log('No active session.');
showAuthSection();
@@ -123,13 +111,15 @@ signupForm.addEventListener('submit', async (e) => {
const user = await userbase.signUp({
username,
password,
email, // Email is optional
email,
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');
showProfileSection(user);
displayMessage(signupMessage, `Signup successful! Welcome, ${user.username}. Redirecting to profile...`, 'success');
setTimeout(() => {
window.location.href = 'profile.html'; // Redirect after a short delay
}, 1500);
} catch (e) {
console.error('Signup failed:', e);
displayMessage(signupMessage, `Signup failed: ${e.message}`, 'error');
@@ -145,44 +135,37 @@ loginForm.addEventListener('submit', async (e) => {
try {
const user = await userbase.signIn({ username, password });
displayMessage(loginMessage, `Login successful! Welcome, ${user.username}.`, 'success');
showProfileSection(user);
displayMessage(loginMessage, `Login successful! Welcome, ${user.username}. Redirecting to profile...`, 'success');
setTimeout(() => {
window.location.href = 'profile.html'; // Redirect after a short delay
}, 1500);
} catch (e) {
console.error('Login failed:', e);
displayMessage(loginMessage, `Login failed: ${e.message}`, 'error');
}
});
// Logout
logoutButton.addEventListener('click', async () => {
// Logout from main page button (if user logs in and then logs out without going to profile)
logoutButtonMainPage.addEventListener('click', async () => {
clearMessages();
try {
await userbase.signOut();
console.log('Logged out successfully.');
console.log('Logged out successfully from main page.');
displayMessage(loginMessage, 'You have been logged out.', 'success');
showAuthSection();
} catch (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 {
const user = await userbase.updateUser({ email: newEmail });
displayMessage(updateProfileMessage, 'Profile updated successfully!', 'success');
showProfileSection(user); // Re-fetch and display updated profile
} catch (e) {
console.error('Update profile failed:', e);
displayMessage(updateProfileMessage, `Update failed: ${e.message}`, 'error');
}
// Go to Profile button
goToProfileButton.addEventListener('click', () => {
window.location.href = 'profile.html';
});
// Forgot Password link
forgotPasswordLink.addEventListener('click', (e) => {
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)
userbase.onUpdate((session) => {
if (session.user) {
console.log('User session updated:', session.user);
showProfileSection(session.user);
console.log('User session updated on index page:', session.user);
window.location.href = 'profile.html'; // Redirect if session starts in another tab
} else {
console.log('User session ended.');
showAuthSection();
console.log('User session ended on index page.');
showAuthSection(); // Show auth forms if session ends
}
});
idk/style.css
+8 -4
View File
@@ -1,5 +1,4 @@
style.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
@@ -62,12 +61,13 @@ button:hover {
background-color: #0056b3;
}
#logout-button {
/* Specific styling for profile and main page logout buttons */
.logout-button, #logout-button-main-page {
background-color: #dc3545;
margin-top: 20px;
}
#logout-button:hover {
.logout-button:hover, #logout-button-main-page:hover {
background-color: #c82333;
}
@@ -99,7 +99,11 @@ a:hover {
text-decoration: underline;
}
#profile-section p {
.profile-info p { /* Added styling for profile.html info display */
margin-bottom: 10px;
padding: 5px 0;
}
#logged-in-actions button { /* Style for buttons appearing after login on main page */
margin-top: 10px;
}