chore: login working initial

Author: abose

src/config.json

@@ -7,6 +7,7 @@
         "how_to_use_url": "https://github.com/adobe/brackets/wiki/How-to-Use-Brackets",
         "docs_url": "https://docs.phcode.dev/",
         "support_url": "https://github.com/phcode-dev/phoenix/discussions",
+        "support_url_account": "https://account.phcode.io/?returnUrl=https%3A%2F%2Faccount.phcode.io%2F%23support",
         "suggest_feature_url": "https://github.com/phcode-dev/phoenix/discussions/categories/ideas",
         "report_issue_url": "https://github.com/phcode-dev/phoenix/issues/new/choose",
         "get_involved_url": "https://github.com/phcode-dev/phoenix/discussions/77",

src/nls/root/strings.js

@@ -1572,5 +1572,10 @@ define({
     "SIGNED_IN_OFFLINE_TITLE": "Offline - Cannot Sign In",
     "SIGNED_IN_OFFLINE_MESSAGE": "Please connect to the internet to sign in to {APP_NAME}.",
     "SIGNED_IN_FAILED_TITLE": "Cannot Sign In",
-    "SIGNED_IN_FAILED_MESSAGE": "Something went wrong while trying to sign in. Please try again."
+    "SIGNED_IN_FAILED_MESSAGE": "Something went wrong while trying to sign in. Please try again.",
+    "VALIDATION_CODE_TITLE": "Sign In Verification Code",
+    "VALIDATION_CODE_MESSAGE": "Please use this Verification code to sign in to your {APP_NAME} account:",
+    "COPY_VALIDATION_CODE": "Copy Code",
+    "VALIDATION_CODE_COPIED": "Copied",
+    "OPEN_SIGN_IN_URL": "Open Sign In Page"
 });

src/phoenix/trust_ring.js

@@ -235,7 +235,7 @@ async function removeCredential(credKey) {
 
 let _dismatled = false;
 async function dismantleKeyring() {
-    if(!_dismatled){
+    if(_dismatled){
         throw new Error("Keyring can only be dismantled once!");
         // and once dismantled, the next line should be reload page. this is a strict security posture requirement to
         // prevent extensions from stealing sensitive info from system key ring as once the trust in invalidated,

src/services/html/otp-dialog.html

@@ -0,0 +1,18 @@
+<div class="otp-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{Strings.VALIDATION_CODE_TITLE}}</h1>
+    </div>
+    <div class="modal-body">
+        <div class="validation-code-container">
+            <p>{{Strings.VALIDATION_CODE_MESSAGE}}</p>
+            <div class="validation-code" style="font-size: 24px; font-weight: bold; text-align: center; margin: 20px 0; padding: 10px; border-radius: 4px; letter-spacing: 2px; display: flex; justify-content: center; align-items: center;">
+                <span>{{validationCode}}</span>
+                <i class="fas fa-copy" data-button-id="copy" style="margin-left: 10px; cursor: pointer;" title="{{Strings.COPY_VALIDATION_CODE}}"></i>
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button class="btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
+        <button class="btn primary" data-button-id="open">{{Strings.OPEN_SIGN_IN_URL}}</button>
+    </div>
+</div>

src/services/login.js

@@ -24,7 +24,9 @@ define(function (require, exports, module) {
         DefaultDialogs = require("widgets/DefaultDialogs"),
         Strings = require("strings"),
         NativeApp = require("utils/NativeApp"),
-        ProfileMenu  = require("./profile-menu");
+        ProfileMenu  = require("./profile-menu"),
+        Mustache = require("thirdparty/mustache/mustache"),
+        otpDialogTemplate = require("text!./html/otp-dialog.html");
 
     const KernalModeTrust = window.KernalModeTrust;
     if(!KernalModeTrust){
@@ -42,6 +44,14 @@ define(function (require, exports, module) {
     // just used as trigger to notify different windows about user profile changes
     const PREF_USER_PROFILE_VERSION = "userProfileVersion";
 
+    EventDispatcher.makeEventDispatcher(exports);
+    EventDispatcher.makeEventDispatcher(secureExports);
+
+    const _EVT_PAGE_FOCUSED = "page_focused";
+    $(window).focus(function () {
+        exports.trigger(_EVT_PAGE_FOCUSED);
+    });
+
 
     function isLoggedIn() {
         return isLoggedInUser;
@@ -112,6 +122,7 @@ define(function (require, exports, module) {
         }
         // some error happened.
         if(resolveResponse.err === ERR_INVALID) { // the api key is invalid, we need to logout and tell user
+            isLoggedInUser = false;
             ProfileMenu.setNotLoggedIn();
             Dialogs.showModalDialog(
                 DefaultDialogs.DIALOG_ID_ERROR,
@@ -166,8 +177,79 @@ define(function (require, exports, module) {
         }
         const {appSessionID, validationCode} = appAuthSession;
         const appSignInURL = `${Phoenix.config.account_url}authorizeApp?appSessionID=${appSessionID}`;
-        // show a dialog here with the 6 letter validation code and a button to copy the validation code and another
-        // button to open the sign in code
+
+        // Show dialog with validation code
+        const dialogData = {
+            validationCode: validationCode,
+            Strings: Strings
+        };
+
+        const $template = $(Mustache.render(otpDialogTemplate, dialogData));
+        const dialog = Dialogs.showModalDialogUsingTemplate($template);
+
+        // Set timeout to close dialog after 5 minutes, as validity is only 5 mins
+        const closeTimeout = setTimeout(() => {
+            dialog.close();
+        }, 5 * 60 * 1000);
+
+        // Handle button clicks
+        $template.on('click', '[data-button-id="copy"]', function() {
+            Phoenix.app.copyToClipboard(validationCode);
+
+            // Show "Copied" feedback
+            const $validationCodeSpan = $template.find('.validation-code span');
+            const originalText = $validationCodeSpan.text();
+
+            // Replace validation code with "Copied" text
+            $validationCodeSpan.text(Strings.VALIDATION_CODE_COPIED);
+
+            // Restore original validation code after 1.5 seconds
+            setTimeout(() => {
+                $validationCodeSpan.text(originalText);
+            }, 1500);
+        });
+
+        $template.on('click', '[data-button-id="open"]', function() {
+            NativeApp.openURLInDefaultBrowser(appSignInURL);
+        });
+        $template.on('click', '[data-button-id="cancel"]', function() {
+            dialog.close();
+        });
+
+        let checking = false, checkAgain = false;
+        async function checkLoginStatus() {
+            if(checking) {
+                checkAgain = true;
+                return;
+            }
+            checking = true;
+            try {
+                const resolveResponse = await _resolveAPIKey(appSessionID, validationCode);
+                if(resolveResponse.userDetails) {
+                    // the user has validated the creds
+                    userProfile = resolveResponse.userDetails;
+                    ProfileMenu.setLoggedIn(userProfile.profileIcon.initials, userProfile.profileIcon.color);
+                    await KernalModeTrust.setCredential(KernalModeTrust.CRED_KEY_API, JSON.stringify(userProfile));
+                    checkAgain = false;
+                    isLoggedInUser = true;
+                    dialog.close();
+                }
+            } catch (e) {
+                console.error("Failed to check login status.", e);
+            }
+            checking = false;
+            if(checkAgain) {
+                checkAgain = false;
+                setTimeout(checkLoginStatus, 100);
+            }
+        }
+        exports.on(_EVT_PAGE_FOCUSED, checkLoginStatus);
+
+        // Clean up when dialog is closed
+        dialog.done(function() {
+            exports.off(_EVT_PAGE_FOCUSED, checkLoginStatus);
+            clearTimeout(closeTimeout);
+        });
         NativeApp.openURLInDefaultBrowser(appSignInURL);
     }
 
@@ -187,8 +269,6 @@ define(function (require, exports, module) {
 
     // no sensitive apis or events should be triggered from the public exports of this module as extensions
     // can read them. Always use KernalModeTrust.loginService for sensitive apis.
-    EventDispatcher.makeEventDispatcher(exports);
-    EventDispatcher.makeEventDispatcher(secureExports);
 
     // kernal exports
     secureExports.isLoggedIn = isLoggedIn;

src/services/profile-menu.js

@@ -13,7 +13,7 @@ define(function (require, exports, module) {
 
     function _createSVGIcon(initials, bgColor) {
         return `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="12" cy="12" r="12" fill="${bgColor}"/>
+            <circle cx="12" cy="12" r="10" fill="${bgColor}"/>
   <text x="50%" y="58%" text-anchor="middle" font-size="11" fill="#fff" font-family="Inter, sans-serif" dy=".1em">
     ${initials}</text>
         </svg>`;
@@ -74,11 +74,11 @@ define(function (require, exports, module) {
     }
 
     function _handleContactSupportBtnClick() {
-        Phoenix.app.openURLInDefaultBrowser(brackets.config.support_url);
+        Phoenix.app.openURLInDefaultBrowser(brackets.config.support_url_account);
     }
 
     function _handleAccountDetailsBtnClick() {
-        console.log("User clicked account details");
+        Phoenix.app.openURLInDefaultBrowser(brackets.config.account_url);
     }
 
     /**