From 9cff129807eff36e36b06a38aebc7077629c987a Mon Sep 17 00:00:00 2001
From: coletteli <73262125+coletteli@users.noreply.github.com>
Date: Thu, 13 Apr 2023 19:07:06 -0400
Subject: [PATCH 1/2] Update Homepage.svelte

---
 src/routes/Homepage.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/routes/Homepage.svelte b/src/routes/Homepage.svelte
index 46ee6b8..6600c3a 100644
--- a/src/routes/Homepage.svelte
+++ b/src/routes/Homepage.svelte
@@ -3,10 +3,12 @@
     import SessionStore from '../SessionStore';
     import InSession from './components/InSession.svelte';
     import ModalManager from './ModalManager.svelte';
-    import { logoutFromGoogle } from '../Firebase';
+    import { logoutFromGoogle, getGoogleUserDisplayName } from '../Firebase';
     import UserInfoStore from '../UserInfoStore';
     import { onMount } from 'svelte';
 
+
+
     /**
 	 * @type {string}
 	 */
@@ -45,6 +47,7 @@
             sessionActivity: ""
         });
     };
+    const displayName = getGoogleUserDisplayName();
 
     const logout = () => {
         SessionStore.set({
@@ -78,6 +81,17 @@
             }
         }
     }
+
+    const profileModal = () => {
+        SessionStore.set({
+            inSession: $SessionStore.inSession,
+            sessionLength: $SessionStore.sessionLength,
+            modalType: "customization",
+            counter: $SessionStore.counter+1,
+            sessionActivity: $SessionStore.sessionActivity
+        });
+    };
+
 </script>
 
 <style>
@@ -169,13 +183,15 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<img src="logout.png" alt="logout" class="logout_button" on:click={logout}>
+<img src="logout.png" alt="logout" class="logout_button" on:click={logout}> 
+<h1>Welcome, {displayName || "Guest"}!</h1>
 {#if $SessionStore.inSession}
     <InSession/>
 {:else}
     <div class="buffer"></div>
     <div class="big">
         <div class="left-side">
+            
             <button id='studyhouseStartButton' on:click={startSessionModal} class="button" disabled>Turn On The StudyHouse Extension</button>
             <br>
             <button id='seePreviousActivities' on:click={seeActivitiesModal} class="button">See Previous Activities</button>

From c6c7cfba7764156a042c0fffe31bcc090b6f3c6f Mon Sep 17 00:00:00 2001
From: coletteli <73262125+coletteli@users.noreply.github.com>
Date: Fri, 14 Apr 2023 00:41:32 -0400
Subject: [PATCH 2/2] MADE PROFILE MODAL YAY

---
 src/Firebase.js                           | 30 ++++++++++----
 src/routes/Homepage.svelte                |  6 +--
 src/routes/ModalManager.svelte            |  7 ++++
 src/routes/components/AboutModal.svelte   |  0
 src/routes/components/ProfileModal.svelte | 48 +++++++++++++++++++++++
 5 files changed, 81 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/components/AboutModal.svelte
 create mode 100644 src/routes/components/ProfileModal.svelte

diff --git a/src/Firebase.js b/src/Firebase.js
index 0f46104..ee0900e 100644
--- a/src/Firebase.js
+++ b/src/Firebase.js
@@ -39,6 +39,7 @@ async function loginWithGoogle() {
                     const newUserRef = collection(db, "userInfo");
                     await setDoc(doc(newUserRef, uid_str), {
                         "uid": uid_str,
+                        "name": user.displayName,
                         "coins": 0,
                         "rooms": ["Gray"],
                         "decorations": []
@@ -56,6 +57,8 @@ async function loginWithGoogle() {
                             // @ts-ignore
                             uid: doc.data().uid,
                             // @ts-ignore
+                            name: doc.data().name, // Add the user's name to the UserInfoStore
+                            // @ts-ignore
                             coins: doc.data().coins,
                             // @ts-ignore
                             rooms: doc.data().rooms,
@@ -168,10 +171,23 @@ async function buyRoom(room, price) {
     }
 }
 
-export {
-    loginWithGoogle,
-    logoutFromGoogle,
-    addActivity,
-    getActivities,
-    buyRoom
-}
\ No newline at end of file
+
+export const getGoogleUserDisplayName = () => {
+    const user = auth.currentUser;
+    if (user && user.providerData && user.providerData.length > 0) {
+      const providerData = user.providerData[0];
+      if (providerData.providerId === "google.com") {
+        return providerData.displayName;
+      }
+    }
+    return null;
+  };
+
+	export {
+		loginWithGoogle,
+		logoutFromGoogle,
+		addActivity,
+		getActivities,
+		buyRoom, 
+        auth
+	};
\ No newline at end of file
diff --git a/src/routes/Homepage.svelte b/src/routes/Homepage.svelte
index 6600c3a..569212e 100644
--- a/src/routes/Homepage.svelte
+++ b/src/routes/Homepage.svelte
@@ -86,7 +86,7 @@
         SessionStore.set({
             inSession: $SessionStore.inSession,
             sessionLength: $SessionStore.sessionLength,
-            modalType: "customization",
+            modalType: "profile",
             counter: $SessionStore.counter+1,
             sessionActivity: $SessionStore.sessionActivity
         });
@@ -184,7 +184,6 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <img src="logout.png" alt="logout" class="logout_button" on:click={logout}> 
-<h1>Welcome, {displayName || "Guest"}!</h1>
 {#if $SessionStore.inSession}
     <InSession/>
 {:else}
@@ -215,7 +214,8 @@
                 <img src="coin-icon.png" alt="coin-icon" class="coin-icon"> 
                 <div class="coin-value">{ $UserInfoStore.coins }</div>
             </div>
-            
+            <button id='profileButton' on:click={profileModal} class="button">Profile</button>
+            <br>
             <button class="button" on:click={customizationModal}>Customize Study House</button>
         </div>
     </div>
diff --git a/src/routes/ModalManager.svelte b/src/routes/ModalManager.svelte
index 84a7632..e2350f7 100644
--- a/src/routes/ModalManager.svelte
+++ b/src/routes/ModalManager.svelte
@@ -6,6 +6,8 @@
     import CustomizationModal from './components/CustomizationModal.svelte';
     import { writable } from 'svelte/store';
     import Modal from 'svelte-simple-modal';
+    import ProfileModal from './components/ProfileModal.svelte';
+
 
     const modal = writable(null);
     let currModal = "";
@@ -32,6 +34,11 @@
                 // @ts-ignore
                 modal.set(CustomizationModal);
             }
+            if ($SessionStore.modalType == "profile") {
+                // @ts-ignore
+                modal.set(ProfileModal);
+            }
+
             currModal = $SessionStore.modalType;
             counter = $SessionStore.counter;
         }
diff --git a/src/routes/components/AboutModal.svelte b/src/routes/components/AboutModal.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/components/ProfileModal.svelte b/src/routes/components/ProfileModal.svelte
new file mode 100644
index 0000000..f9d5764
--- /dev/null
+++ b/src/routes/components/ProfileModal.svelte
@@ -0,0 +1,48 @@
+<script>
+    import SessionStore from '../../SessionStore';
+    import { onMount } from 'svelte';
+    import { logoutFromGoogle, auth } from "../../Firebase";
+    import { writable } from 'svelte/store';
+  
+    const displayName = writable('');
+    const email = writable('');
+  
+    onMount(() => {
+      auth.onAuthStateChanged((user) => {
+        if (user) {
+          const name = user.displayName || '';
+          const userEmail = user.email || '';
+          displayName.set(name);
+          email.set(userEmail);
+        }
+      });
+    });
+    const logout = () => {
+        SessionStore.set({
+            inSession: false,
+            sessionLength: 0,
+            modalType: "",
+            counter: $SessionStore.counter+1,
+            sessionActivity: ""
+        });
+        logoutFromGoogle();
+    };
+  
+    export { displayName, email };
+  </script>
+  
+  <style>
+    .logout_button {
+        cursor: pointer;
+        width: 4rem;
+        display: -webkit-box;
+        margin-left: auto;
+    }
+  </style>
+  
+  <div class="modal-content">
+    <h1>Welcome, {$displayName || "Guest"}!</h1>
+    <p>Your email address is {$email}</p>
+    <img src="logout.png" alt="logout" class="logout_button" on:click={logout} on:keydown={(e) => {if (e.key === 'Enter') logout();}}> 
+  </div>
+  
\ No newline at end of file