chore: fill in correct profile details

Author: abose

src/nls/root/strings.js

@@ -1583,5 +1583,8 @@ define({
     "OPEN_SIGN_IN_URL": "Open Sign In Page",
     "PROFILE_POP_TITLE": "{APP_NAME} Account",
     "PROFILE_SIGN_IN": "Sign in to your account",
-    "CONTACT_SUPPORT": "Contact support"
+    "CONTACT_SUPPORT": "Contact support",
+    "SIGN_OUT": "Sign out",
+    "ACCOUNT_DETAILS": "Account Details",
+    "AI_QUOTA_USED": "AI quota used"
 });

src/services/html/profile-popup.html

@@ -1,19 +1,20 @@
 <div class="profile-popup">
     <div class="popup-header">
         <div class="user-profile-header">
-            <div class="user-avatar">
+            <div class="user-avatar" style="background-color: {{avatarColor}};">
                 {{initials}}
             </div>
             <div class="user-info">
                 <div class="user-name">{{userName}}</div>
-                <div class="user-plan">{{planName}}</div>
+                <div class="user-email">{{email}}</div>
+                <div class="{{planClass}}">{{planName}}</div>
             </div>
         </div>
     </div>
     <div class="popup-body">
         <div class="quota-section">
             <div class="quota-header">
-                <span>{{quotaLabel}}</span>
+                <span>{{Strings.AI_QUOTA_USED}}</span>
                 <span>{{quotaUsed}} / {{quotaTotal}} {{quotaUnit}}</span>
             </div>
             <div class="progress-bar">
@@ -23,18 +24,18 @@
 
         <button id="phoenix-account-btn" class="btn dialog-button menu-button">
             <i class="fa fa-user"></i>
-            {{accountBtnText}}
+            {{Strings.ACCOUNT_DETAILS}}
         </button>
 
         <button id="phoenix-signout-btn" class="btn dialog-button menu-button signout">
             <i class="fa fa-sign-out-alt"></i>
-            {{signOutBtnText}}
+            {{Strings.SIGN_OUT}}
         </button>
 
         <div class="support-link">
             <button id="phoenix-support-btn" class="text-link">
                 <i class="fa fa-question-circle"></i>
-                {{supportBtnText}}
+                {{Strings.CONTACT_SUPPORT}}
             </button>
         </div>
     </div>

src/services/login.js

@@ -57,6 +57,10 @@ define(function (require, exports, module) {
         return isLoggedInUser;
     }
 
+    function getProfile() {
+        return userProfile;
+    }
+
     const ERR_RETRY_LATER = "retry_later";
     const ERR_INVALID = "invalid";
 
@@ -330,6 +334,7 @@ define(function (require, exports, module) {
     secureExports.isLoggedIn = isLoggedIn;
     secureExports.signInToAccount = signInToAccount;
     secureExports.signOutAccount = signOutAccount;
+    secureExports.getProfile = getProfile;
 
     // public exports
     exports.isLoggedIn = isLoggedIn;

src/services/profile-menu.js

@@ -41,26 +41,6 @@ define(function (require, exports, module) {
     // this is to handle document click events to close popup
     let documentClickHandler = null;
 
-    const defaultLoginData = {
-        welcomeTitle: "Welcome to Phoenix Code",
-        signInBtnText: "Sign in to your account",
-        supportBtnText: "Contact support"
-    };
-
-    const defaultProfileData = {
-        initials: "CA",
-        userName: "Charly A.",
-        planName: "Paid Plan",
-        quotaLabel: "AI quota used",
-        quotaUsed: "7,000",
-        quotaTotal: "10,000",
-        quotaUnit: "tokens",
-        quotaPercent: 70,
-        accountBtnText: "Account details",
-        supportBtnText: "Contact support",
-        signOutBtnText: "Sign out"
-    };
-
     function _handleSignInBtnClick() {
         closePopup(); // need to close the current popup to show the new one
         KernalModeTrust.loginService.signInToAccount();
@@ -201,19 +181,27 @@ define(function (require, exports, module) {
 
     /**
      * Shows the user profile popup when the user is logged in
-     * @param {Object} profileData - Data to populate the template (optional)
      */
-    function showProfilePopup(profileData) {
+    function showProfilePopup() {
         // If popup is already visible, just close it
         if (isPopupVisible) {
             closePopup();
             return;
         }
-
-        // Merge provided data with defaults
-        const templateData = $.extend({}, defaultProfileData, profileData || {});
-
-        closePopup();
+        const profileData = KernalModeTrust.loginService.getProfile();
+        const templateData = {
+            initials: profileData.profileIcon.initials,
+            avatarColor: profileData.profileIcon.color,
+            userName: profileData.firstName + " " + profileData.lastName,
+            email: profileData.email,
+            planClass: "user-plan-free",
+            planName: "Free Plan",
+            quotaUsed: "7,000",
+            quotaTotal: "10,000",
+            quotaUnit: "tokens",
+            quotaPercent: 70,
+            Strings: Strings
+        };
 
         // Render template with data
         const renderedTemplate = Mustache.render(profileTemplate, templateData);
@@ -255,18 +243,16 @@ define(function (require, exports, module) {
 
     /**
      * Toggle the profile popup based on the user's login status
-     * this function is called inside the src/extensionsIntegrated/Phoenix/main.js when user clicks on the profile icon
-     * @param {Object} data - Data to populate the templates (optional)
      */
-    function togglePopup(data) {
+    function togglePopup() {
         // check if the popup is already visible or not. if visible close it
         if (isPopupVisible) {
             closePopup();
             return;
         }
 
         if (KernalModeTrust.loginService.isLoggedIn()) {
-            showProfilePopup(data);
+            showProfilePopup();
         } else {
             showLoginPopup();
         }

src/styles/UserProfile.less

@@ -54,13 +54,24 @@
 
     .user-name {
         font-weight: @font-weight-semibold;
+        font-size: 16px;
         color: @bc-menu-text;
     }
 
-    .user-plan {
-        color: #3c3;
-        //color: #2b7d2b;
-        font-size: 16px;
+    .user-email {
+        font-size: 12px;
+        color: @bc-menu-text;
+    }
+
+    .user-plan-paid {
+        color: #2ea56c;
+        font-size: 12px;
+        font-weight: @font-weight-semibold;
+    }
+
+    .user-plan-free {
+        color: #3b82f6;
+        font-size: 12px;
     }
 
     .quota-section {
@@ -204,10 +215,19 @@
         color: @dark-bc-text-alt;
     }
 
+    .user-plan-paid {
+        color: #3c3;
+        font-size: 12px;
+    }
+
     .user-name {
         color: @dark-bc-menu-text;
     }
 
+    .user-email {
+        color: @dark-bc-menu-text;
+    }
+
     .progress-bar {
         background-color: @dark-bc-input-bg;
         border-color: @dark-bc-btn-border;