#1515 tokenNotificaiton

src/_locales/en/token.json

@@ -0,0 +1,6 @@
+{
+  "tokenHeader": "Your token",
+  "tokenCopy": "Copy",
+  "tokenCopied": "Copied",
+  "tokenDescription": "Copy the token and paste it in the input field. The token will expire in 30 seconds."
+}

src/config.js

@@ -162,6 +162,12 @@ const config = {
         Title: browser.i18n.getMessage('infoTestTitle') || t.infoTestTitle,
         Message: browser.i18n.getMessage('infoTestMessage') || t.infoTestMessage
       }
+    },
+    Token: {
+      Header: browser.i18n.getMessage('tokenHeader') || t.tokenHeader,
+      Copy: browser.i18n.getMessage('tokenCopy') || t.tokenCopy,
+      Copied: browser.i18n.getMessage('tokenCopied') || t.tokenCopied,
+      Description: browser.i18n.getMessage('tokenDescription') || t.tokenDescription
     }
   }
 };

src/content/events/contentOnMessage.js

@@ -19,7 +19,7 @@
 
 const config = require('../../config');
 const loadFromLocalStorage = require('../../localStorage/loadFromLocalStorage');
-const { notification, inputToken, getTokenInput, showNotificationInfo, loadFonts, isInFrame, getActiveElement } = require('../functions');
+const { notification, inputToken, getTokenInput, showNotificationInfo, loadFonts, isInFrame, getActiveElement, tokenNotification } = require('../functions');
 const storeLog = require('../../partials/storeLog');
 
 const contentOnMessage = async (request, tabData) => {
@@ -57,10 +57,7 @@ const contentOnMessage = async (request, tabData) => {
       }
       
       if (!lastFocusedInput || !tokenInput) {
-        return notification({
-          title: 'Your token',
-          message: request.token
-        }); // @TODO: change to proper notification later
+        return tokenNotification(request.token);
       } else {
         return inputToken(request, tokenInput, tabData?.url);
       }

src/content/functions/index.js

@@ -38,4 +38,5 @@ exports.notification = require('./notification');
 exports.openOptionsPage = require('./openOptionsPage');
 exports.portSetup = require('./portSetup');
 exports.showNotificationInfo = require('./showNotificationInfo');
+exports.tokenNotification = require('./tokenNotification');
 exports.updateEventListener = require('./updateEventListener');

src/content/functions/tokenNotification.js

@@ -0,0 +1,120 @@
+//
+//  This file is part of the 2FAS Browser Extension (https://github.com/twofas/2fas-browser-extension)
+//  Copyright © 2023 Two Factor Authentication Service, Inc.
+//  Contributed by Grzegorz Zając. All rights reserved.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+//  GNU General Public License for more details.
+//
+//  You should have received a copy of the GNU General Public License
+//  along with this program. If not, see <https://www.gnu.org/licenses/>
+//
+
+const config = require('../../config');
+const isInFrame = require('./isInFrame');
+const { createElement, createSVGElement, createTextElement } = require('../../partials/DOMElements');
+const iconSrc = require('../../images/notification-logo.svg');
+const copySrc = require('../../images/copy-icon.svg');
+const S = require('../../selectors');
+
+const tokenNotification = token => {
+  if (isInFrame()) {
+    return false;
+  }
+
+  let n = {
+    container: document.querySelector(S.notification.container),
+    notification: null,
+    firstCol: null,
+    logo: null,
+    secondCol: null,
+    header: null,
+    h3: null,
+    tokenBox: null,
+    tokenText: null,
+    tokenIconContainer: null,
+    tokenIcon: null,
+    tokenButton: null,
+    tokenButtonText: null,
+    notificationText: null,
+    p: null
+  };
+
+  if (!n.container) {
+    n.container = createElement('div', 'twofas-be-notifications');
+    window.top.document.body.appendChild(n.container);
+  }
+
+  n.notification = createElement('div', 'twofas-be-notification');
+  n.firstCol = createElement('div', 'twofas-be-col');
+  n.logo = createSVGElement(iconSrc);
+
+  n.firstCol.appendChild(n.logo);
+  n.notification.appendChild(n.firstCol);
+
+  n.secondCol = createElement('div', 'twofas-be-col');
+  n.header = createElement('div', 'twofas-be-notification-header');
+  n.h3 = createTextElement('h3', config.Texts.Token.Header);
+
+  n.header.appendChild(n.h3);
+  n.secondCol.appendChild(n.header);
+
+  n.tokenBox = createElement('div', 'twofas-be-notification-token-box');
+  n.tokenText = createTextElement('p', token, 'twofas-be-notification-token-box-text');
+  n.tokenButton = createElement('button', 'twofas-be-notification-token-box-copy-button');
+  n.tokenButton.addEventListener('click', () => {
+    navigator.clipboard.writeText(token);
+    n.tokenButtonText.innerText = config.Texts.Token.Copied;
+
+    setTimeout(() => {
+      n.tokenButtonText.innerText = config.Texts.Token.Copy;
+    }, 1000);
+  });
+  n.tokenButtonText = createTextElement('span', config.Texts.Token.Copy);
+  n.tokenIconContainer = createElement('div', 'twofas-be-notification-token-box-copy-icon');
+  n.tokenIcon = createSVGElement(copySrc);
+
+  n.tokenButton.appendChild(n.tokenButtonText);
+  n.tokenIconContainer.appendChild(n.tokenIcon);
+  n.tokenButton.appendChild(n.tokenIconContainer);
+  n.tokenBox.appendChild(n.tokenText);
+  n.tokenBox.appendChild(n.tokenButton);
+  n.secondCol.appendChild(n.tokenBox);
+
+  n.notificationText = createElement('div', 'twofas-be-notification-text');
+  n.p = createTextElement('p', config.Texts.Token.Description);
+
+  n.notificationText.appendChild(n.p);
+  n.secondCol.appendChild(n.notificationText);
+  n.notification.appendChild(n.secondCol);
+  n.container.appendChild(n.notification);
+
+  setTimeout(() => n.notification.classList.add('visible'), 300);
+
+  window.addEventListener('beforeunload', () => {
+    n.notification.classList.remove('visible');
+
+    setTimeout(() => {
+      n.notification.classList.add('hidden');
+      n = null;
+    }, 300);
+  });
+
+  setTimeout(() => {
+    n.notification.classList.remove('visible');
+  }, 30300);
+
+  setTimeout(() => {
+    n.notification.classList.add('hidden');
+    n = null;
+  }, 30600);
+};
+
+module.exports = tokenNotification;

src/content/styles/content_script.scss

@@ -121,6 +121,80 @@
       }
     }
 
+    &-token-box {
+      align-items: center !important;
+      display: flex !important;
+      flex-direction: row !important;
+      justify-content: space-between !important;
+      margin-bottom: 10px !important;
+
+      > p {
+        &.twofas-be-notification-token-box-text {
+          color: $color !important;
+          font-size: 32px !important;
+          font-weight: 700 !important;
+        }
+      }
+
+      > button {
+        &.twofas-be-notification-token-box-copy-button {
+          align-items: center !important;
+          appearance: none !important;
+          background-color: $theme-color !important;
+          border: 0 !important;
+          border-radius: 20px !important;
+          color: $color-2 !important;
+          cursor: pointer !important;
+          display: inline-flex !important;
+          flex-direction: row !important;
+          font-size: 12px !important;
+          font-weight: 600 !important;
+          height: 40px !important;
+          justify-content: space-between !important;
+          letter-spacing: .9px !important;
+          line-height: 40px !important;
+          padding: 0 5px 0 16px !important;
+          outline: none !important;
+          text-align: center !important;
+          text-decoration: none !important;
+          text-transform: uppercase !important;
+          transition: background-color .2s ease-in-out, color .2s ease-in-out !important;
+
+          &:hover {
+            background-color: color.adjust($theme-color, $lightness: -10%) !important;
+            color: $color-2 !important;
+          }
+      
+          &:active {
+            background-color: color.adjust($theme-color, $lightness: -20%) !important;
+            color: $color-2 !important;
+          }
+
+          > span {
+            flex-grow: 1 !important;
+            margin-right: 8px !important;
+          }
+
+          > .twofas-be-notification-token-box-copy-icon {
+            align-items: center !important;
+            background-color: $color-2 !important;
+            border-radius: 50% !important;
+            display: flex !important;
+            justify-content: center !important;
+            height: 32px !important;
+            width: 32px !important;
+
+            > svg {
+              height: 16px !important;
+              margin-right: 0 !important;
+              max-width: 100% !important;
+              width: auto !important;
+            }
+          }
+        }
+      }
+    }
+
     .twofas-be-col {
       flex-shrink: unset !important;
       font-family: 'Montserrat', sans-serif !important;

src/images/copy-icon.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="copy">
+<rect id="Rectangle 2" x="5.74951" y="1.25003" width="14.4997" height="14.4997" rx="1.25" stroke="#ED1C24" stroke-width="1.5"/>
+<path id="Rectangle 3" d="M1.00049 4.50011V18.4998C1.00049 19.6044 1.89592 20.4998 3.00049 20.4998H17.0002" stroke="#ED1C24" stroke-width="1.5"/>
+</g>
+</svg>