hub: add Install Secman Hub as Desktop App button, update icons

.gitignore

@@ -45,8 +45,9 @@ vendor
 .env.production.local
 .env.local
 
-# Builds, Secman CLI Core Lib, Cache and Tmp
+# Builds, Vercel Config, Secman CLI Core Lib, Cache and Tmp
 .cache
+.vercel
 dist
 scc/lib
 tmp

core/README.md

@@ -6,7 +6,7 @@
 
 ## Security
 
-**1. Secman uses The Advanced Encryption Standard (AES) encryption algorithm with Galois/Counter Mode (GCM) symmetric-key cryptographic mode. Passwords encrypted with AES can only be decrypted with the passphrase defined in the _config.yml_ file.**
+**1. Secman uses The Advanced Encryption Standard (AES) encryption algorithm with Galois/Counter Mode (GCM) symmetric-key cryptographic mode.**
 
 **2. Endpoints are protected with security middlewares against attacks like XSS.**
 

hub/README.md

@@ -19,7 +19,7 @@
 Visit [hub.secman.dev](https://hub.secman.dev)
 
 1. Wait until `App is available` is displayed in the status bar.
-2. Click the `Install Secman Hub As Desktop App` button.
+2. Click the `Install Secman Hub as Desktop App` button.
 3. When the installation is complete, refresh the page.
 
 ## Build & Run

hub/src/App.vue

@@ -7,6 +7,13 @@
       >
         <VIcon name="sm-logo" />
       </button>
+      <button
+        @click="installPWA"
+        v-tooltip="`Install Secman Hub as Desktop App`"
+        class="btn ml-1 trsn"
+      >
+        <VIcon name="install-pwa" size="14px" />
+      </button>
     </header>
     <!-- Content -->
     <RouterView />
@@ -28,6 +35,7 @@ export default {
   beforeMount() {
     window.addEventListener("beforeinstallprompt", (e) => {
       e.preventDefault();
+      this.installEvent = e;
       this.shown = true;
     });
 
@@ -41,18 +49,20 @@ export default {
     }
   },
 
-  installPWA() {
-    this.installEvent.prompt();
-    // then refresh the page
-    this.installEvent.userChoice.then((choiceResult) => {
-      if (choiceResult.outcome === "accepted") {
-        window.location.reload();
-      }
-    });
-  },
+  methods: {
+    installPWA() {
+      this.installEvent.prompt();
+      // then refresh the page
+      this.installEvent.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === "accepted") {
+          window.location.reload();
+        }
+      });
+    },
 
-  dismissPrompt() {
-    this.shown = false;
+    dismissPrompt() {
+      this.shown = false;
+    },
   },
 };
 </script>
@@ -66,6 +76,21 @@ export default {
   padding-top: 4px;
 }
 
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: $color-gray-500;
+  color: $color-gray-300;
+}
+
+.btn:hover {
+  color: $color-secondary;
+}
+
 .app-header {
   width: 100vw;
   height: 56px;

hub/src/components/Icons.vue

@@ -67,6 +67,22 @@
         />
       </symbol>
 
+      <svg
+        id="install-pwa"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.15822 6.78375L9.77822 10.4037C9.80724 10.4329 9.84173 10.4559 9.87969 10.4717C9.91766 10.4874 9.95836 10.4956 9.99947 10.4956C10.0406 10.4956 10.0813 10.4874 10.1192 10.4717C10.1572 10.4559 10.1917 10.4329 10.2207 10.4037L13.8407 6.78375C13.8845 6.74004 13.9144 6.68431 13.9265 6.62362C13.9386 6.56293 13.9324 6.50001 13.9087 6.44284C13.885 6.38566 13.8449 6.33682 13.7934 6.30249C13.7419 6.26816 13.6814 6.24989 13.6195 6.25H10.937V0.9375C10.937 0.68886 10.8382 0.450403 10.6624 0.274587C10.4866 0.098772 10.2481 0 9.99947 0C9.75082 0 9.51237 0.098772 9.33655 0.274587C9.16074 0.450403 9.06197 0.68886 9.06197 0.9375V6.25H6.37947C6.31758 6.24989 6.25705 6.26816 6.20556 6.30249C6.15406 6.33682 6.11392 6.38566 6.09023 6.44284C6.06653 6.50001 6.06034 6.56293 6.07244 6.62362C6.08455 6.68431 6.1144 6.74004 6.15822 6.78375V6.78375Z"
+          fill="currentColor"
+        />
+        <path
+          d="M1.96625 3.21625C1.93725 3.24532 1.91426 3.27983 1.89861 3.31779C1.88295 3.35576 1.87493 3.39643 1.875 3.4375V12.8125C1.875 12.8954 1.90792 12.9749 1.96653 13.0335C2.02513 13.0921 2.10462 13.125 2.1875 13.125H17.8125C17.8954 13.125 17.9749 13.0921 18.0335 13.0335C18.0921 12.9749 18.125 12.8954 18.125 12.8125V3.4375C18.125 3.35462 18.0921 3.27513 18.0335 3.21653C17.9749 3.15792 17.8954 3.125 17.8125 3.125H14.0625C13.9394 3.125 13.8175 3.10075 13.7037 3.05364C13.59 3.00652 13.4866 2.93747 13.3996 2.85041C13.3125 2.76336 13.2435 2.66001 13.1964 2.54627C13.1492 2.43252 13.125 2.31061 13.125 2.1875C13.125 2.06439 13.1492 1.94248 13.1964 1.82873C13.2435 1.71499 13.3125 1.61164 13.3996 1.52459C13.4866 1.43753 13.59 1.36848 13.7037 1.32136C13.8175 1.27425 13.9394 1.25 14.0625 1.25H17.8125C18.3927 1.25 18.9491 1.48047 19.3593 1.8907C19.7695 2.30094 20 2.85734 20 3.4375V12.8125C20 13.3927 19.7695 13.9491 19.3593 14.3593C18.9491 14.7695 18.3927 15 17.8125 15H13.1537C13.2775 16.3013 13.8037 17.34 14.7687 18.4462C14.887 18.5819 14.9638 18.7487 14.9899 18.9267C15.0159 19.1048 14.9902 19.2866 14.9157 19.4504C14.8412 19.6143 14.7212 19.7532 14.5699 19.8507C14.4186 19.9481 14.2425 20 14.0625 20H5.9375C5.75754 20 5.58139 19.9481 5.4301 19.8507C5.2788 19.7532 5.15875 19.6143 5.08428 19.4504C5.00981 19.2866 4.98407 19.1048 5.01013 18.9267C5.03619 18.7487 5.11295 18.5819 5.23125 18.4462C6.19625 17.34 6.72125 16.3013 6.84625 15H2.1875C1.60734 15 1.05094 14.7695 0.640704 14.3593C0.230468 13.9491 0 13.3927 0 12.8125L0 3.4375C0 2.85734 0.230468 2.30094 0.640704 1.8907C1.05094 1.48047 1.60734 1.25 2.1875 1.25H5.9375C6.18614 1.25 6.4246 1.34877 6.60041 1.52459C6.77623 1.7004 6.875 1.93886 6.875 2.1875C6.875 2.43614 6.77623 2.6746 6.60041 2.85041C6.4246 3.02623 6.18614 3.125 5.9375 3.125H2.1875C2.14643 3.12493 2.10576 3.13295 2.06779 3.14861C2.02983 3.16426 1.99532 3.18725 1.96625 3.21625V3.21625ZM8.7275 15C8.65427 16.1015 8.32697 17.1711 7.77125 18.125H12.2287C11.673 17.1711 11.3457 16.1015 11.2725 15H8.7275Z"
+          fill="currentColor"
+        />
+      </svg>
+
       <symbol
         id="left-corner"
         viewBox="0 0 448 539"