Merge pull request #1604 from keepassxreboot/feature/show_link_to_guide

Show a link to the Getting Started Guide for new users

Author: Sami Vänttinen

keepassxc-browser/_locales/en/messages.json

@@ -343,6 +343,18 @@
         "message": "Please download the latest version from keepassxc.org",
         "description": "Popup warning message link when KeePassXC version is not up-to-date."
     },
+    "popupGettingStartedText": {
+        "message": "Are you a first time user? Please check our Getting Started Guide.",
+        "description": "Popup information message about Getting Started Guide."
+    },
+    "popupGettingStartedLinkText": {
+        "message": "Getting Started Guide - Setup Browser Integration",
+        "description": "Popup Getting Started Guide link text."
+    },
+    "popupGettingStartedHide": {
+      "message": "Hide and don't show again.",
+      "description": "Getting Started Guide alert close button title."
+  },
     "popupCheckingStatus": {
         "message": "Checking status...",
         "description": "Checking status message in popup."

keepassxc-browser/background/event.js

@@ -32,7 +32,8 @@ kpxcEvent.showStatus = async function(tab, configured, internalPoll) {
         encryptionKeyUnrecognized: keepass.isEncryptionKeyUnrecognized,
         associated: keepass.isAssociated(),
         error: errorMessage || null,
-        usernameFieldDetected: page.tabs[tab.id].usernameFieldDetected
+        usernameFieldDetected: page.tabs[tab.id].usernameFieldDetected,
+        showGettingStartedGuideAlert: page.settings.showGettingStartedGuideAlert,
     };
 };
 
@@ -202,6 +203,13 @@ kpxcEvent.getIsKeePassXCAvailable = async function() {
     return keepass.isKeePassXCAvailable;
 };
 
+kpxcEvent.hideGettingStartedGuideAlert = async function(tab) {
+    const settings = await kpxcEvent.onLoadSettings();
+    settings.showGettingStartedGuideAlert = false;
+
+    await kpxcEvent.onSaveSettings(tab, settings);
+};
+
 // All methods named in this object have to be declared BEFORE this!
 kpxcEvent.messageHandlers = {
     'add_credentials': keepass.addCredentials,
@@ -221,6 +229,7 @@ kpxcEvent.messageHandlers = {
     'get_status': kpxcEvent.onGetStatus,
     'get_tab_information': kpxcEvent.onGetTabInformation,
     'get_totp': keepass.getTotp,
+    'hide_getting_started_guide_alert': kpxcEvent.hideGettingStartedGuideAlert,
     'init_http_auth': kpxcEvent.initHttpAuth,
     'is_connected': kpxcEvent.getIsKeePassXCAvailable,
     'load_keyring': kpxcEvent.onLoadKeyRing,

keepassxc-browser/background/page.js

@@ -18,6 +18,7 @@ const defaultSettings = {
     downloadFaviconAfterSave: false,
     redirectAllowance: 1,
     saveDomainOnly: true,
+    showGettingStartedGuideAlert: true,
     showLoginFormIcon: true,
     showLoginNotifications: true,
     showNotifications: true,
@@ -118,6 +119,10 @@ page.initSettings = async function() {
             page.settings.saveDomainOnly = defaultSettings.saveDomainOnly;
         }
 
+        if (!('showGettingStartedGuideAlert' in page.settings)) {
+            page.settings.showGettingStartedGuideAlert = defaultSettings.showGettingStartedGuideAlert;
+        }
+
         if (!('showLoginFormIcon' in page.settings)) {
             page.settings.showLoginFormIcon = defaultSettings.showLoginFormIcon;
         }

keepassxc-browser/popups/popup.css

@@ -97,15 +97,17 @@ code {
     border-top: 0px;
 }
 
-#update-available {
+#popup-alerts {
     margin-top: 10px;
-    text-align: left;
+    text-align: start;
+}
+
+#update-available {
     display: none;
 }
 
-#update-available a:hover,
-#update-available a:active {
-    text-decoration: underline;
+#getting-started-guide {
+    display: none;
 }
 
 #lock-database-button {

keepassxc-browser/popups/popup.html

@@ -21,10 +21,19 @@
         <button id="btn-choose-credential-fields" class="btn btn-sm btn-warning"><i class="fa fa-list-alt" aria-hidden="true"></i> <span data-i18n="popupChooseCredentialsText"></span></button>
         <button id="lock-database-button" class="btn btn-sm btn-danger" data-i18n="[title]lockDatabase"><i class="fa fa-lock" aria-hidden="true"></i></button>
 
-        <div id="update-available" class="alert alert-warning">
-          <span data-i18n="popupUpdateAvailable"></span>
-          <br />
-          <a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
+        <div id="popup-alerts">
+          <div id="update-available" class="alert alert-warning">
+            <span data-i18n="popupUpdateAvailable"></span>
+            <br />
+            <a target="_blank" class="alert-link" href="https://keepassxc.org/download"><span data-i18n="popupDownloadNewVersion"></span></a>.
+          </div>
+
+          <div id="getting-started-guide" class="alert alert-info alert-dismissible">
+            <span data-i18n="popupGettingStartedText"></span>
+            <br />
+            <a target="_blank" class="alert-link" href="https://keepassxc.org/docs/KeePassXC_GettingStarted.html#_setup_browser_integration"><span data-i18n="popupGettingStartedLinkText"></span></a>
+            <button type="button" id="getting-started-alert-close-button" class="btn-close" data-bs-dismiss="alert" data-i18n="[title]popupGettingStartedHide"></button>
+          </div>
         </div>
       </div>
 

keepassxc-browser/popups/popup.js

@@ -16,10 +16,15 @@ function statusResponse(r) {
     $('#configured-and-associated').hide();
     $('#configured-not-associated').hide();
     $('#lock-database-button').hide();
+    $('#getting-started-guide').hide();
 
     if (!r.keePassXCAvailable) {
         $('#error-message').textContent = r.error;
         $('#error-encountered').show();
+
+        if (r.showGettingStartedGuideAlert) {
+            $('#getting-started-guide').show();
+        }
     } else if (r.keePassXCAvailable && r.databaseClosed) {
         $('#database-error-message').textContent = r.error;
         $('#database-not-opened').show();
@@ -114,6 +119,12 @@ const sendMessageToTab = async function(message) {
         $('#username-field-detected').hide();
     });
 
+    $('#getting-started-alert-close-button').addEventListener('click', async () => {
+        await browser.runtime.sendMessage({
+            action: 'hide_getting_started_guide_alert'
+        });
+    });
+
     statusResponse(await browser.runtime.sendMessage({
         action: 'get_status'
     }).catch((err) => {