From 4d0efd3ca50a771a92b37f0ee0b650739bf5bb71 Mon Sep 17 00:00:00 2001 From: mileswa1q22 Date: Thu, 30 Oct 2025 09:35:58 -0500 Subject: [PATCH] updated thes --- idk/index.html | 31 +++------ idk/profile.html | 172 +++++++++++++++++++++++++++++++++++++++++++++++ idk/script.js | 91 ++++++++++--------------- idk/style.css | 12 ++-- 4 files changed, 226 insertions(+), 80 deletions(-) create mode 100644 idk/profile.html diff --git a/idk/index.html b/idk/index.html index e1723323..2337e0f5 100644 --- a/idk/index.html +++ b/idk/index.html @@ -1,8 +1,10 @@ - - + + + + \ Userbase Authentication Demo @@ -29,29 +31,16 @@

Forgot Password?

- - - - - diff --git a/idk/profile.html b/idk/profile.html new file mode 100644 index 00000000..2fef5e22 --- /dev/null +++ b/idk/profile.html @@ -0,0 +1,172 @@ + + + + + + + + User Profile + + + +
+

User Profile

+ +
+

Your Information

+

Username:

+

User ID:

+

Email:

+

First Name:

+

Last Name:

+
+ + +

Update Profile

+ + + + + + + + + + +

+ + + + +

Back to Login/Signup

+
+ + + + + diff --git a/idk/script.js b/idk/script.js index 9c331576..af2d7c85 100644 --- a/idk/script.js +++ b/idk/script.js @@ -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 } }); diff --git a/idk/style.css b/idk/style.css index e48ff6d4..4f2efc4d 100644 --- a/idk/style.css +++ b/idk/style.css @@ -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; +}