Authentication improvements (#527)

* Improve authentication check and first run after log in.
* Add a minimum height to the browser action popup.
* Disable spellcheck on the dialog search field.
* Split non-store-specific functionality into separate files.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "briskine",
-  "version": "7.11.3",
+  "version": "7.11.5",
   "description": "Write everything faster.",
   "private": true,
   "type": "module",
@@ -41,7 +41,7 @@
   ],
   "license": "GPL-3.0-or-later",
   "devDependencies": {
-    "archiver": "^6.0.0",
+    "archiver": "^7.0.0",
     "chai": "^5.0.0",
     "copy-webpack-plugin": "^12.0.0",
     "css-loader": "^6.0.0",

src/content/dialog/dialog.js

@@ -502,7 +502,7 @@ function template({
       >
 
       <div class="dialog-search">
-        <input type="search" value="" placeholder="Search templates...">
+        <input type="search" value="" placeholder="Search templates..." spellcheck="false">
         <div class="dialog-search-icon">${unsafeSVG(iconSearch)}</div>
       </div>
 

src/popup/popup.css

@@ -19,6 +19,7 @@ html {
 }
 
 body {
+  min-height: 250px;
   background-color: var(--background-color);
 }
 

src/store/default-data.js

@@ -0,0 +1,162 @@
+/* globals ENV */
+import plainText from './plain-text.js'
+
+export const defaultSettings = {
+  dialog_enabled: true,
+  dialog_button: true,
+  dialog_shortcut: 'ctrl+space',
+
+  expand_enabled: true,
+  expand_shortcut: 'tab',
+
+  blacklist: [],
+  share_all: false,
+}
+
+export const defaultTags = [
+  {title: 'en', color: 'blue'},
+  {title: 'greetings', color: 'green'},
+  {title: 'followup'},
+  {title: 'closing'},
+  {title: 'personal'},
+].map((tag, index) => {
+  return {
+    ...tag,
+    id: String(index),
+  }
+})
+
+function filterDefaultTags (titles = []) {
+  return defaultTags
+    .filter((tag) => {
+      if (titles.length) {
+        return titles.includes(tag.title)
+      }
+      return true
+    })
+    .map((tag) => tag.id)
+}
+
+export function getDefaultTemplates () {
+  const defaultTemplates = [
+    {
+      title: 'Say Hello',
+      shortcut: 'h',
+      subject: '',
+      tags: filterDefaultTags(['en', 'greetings']),
+      body: '<div>Hello {{to.first_name}},</div><div></div>'
+    },
+    {
+      title: 'Nice talking to you',
+      shortcut: 'nic',
+      subject: '',
+      tags: filterDefaultTags(['en', 'followup']),
+      body: '<div>It was nice talking to you.</div>'
+    },
+    {
+      title: 'Kind Regards',
+      shortcut: 'kr',
+      subject: '',
+      tags: filterDefaultTags(['en', 'closing']),
+      body: '<div>Kind regards,</div><div>{{from.first_name}}.</div>'
+    },
+    {
+      title: 'My email',
+      shortcut: 'e',
+      subject: '',
+      tags: filterDefaultTags(['en', 'personal']),
+      body: '<div>{{from.email}}</div>'
+    }
+  ]
+
+  if (ENV === 'development') {
+    let allVarsBody = [ 'account', 'from', 'to', 'cc', 'bcc' ].map((field) => {
+      return `
+        <div>
+          <strong># ${field}</strong>
+        </div>
+        {{#each ${field}}}
+          <div>
+            {{@key}}: {{this}}
+          </div>
+        {{/each}}
+      `
+    }).join('')
+
+    allVarsBody += `
+      <div>subject: {{subject}}</div>
+      <div>next week: {{moment add='7;days' format='DD MMMM'}}</div>
+      <div>last week: {{moment subtract='7;days'}}</div>
+      <div>week number: {{moment week=''}}</div>
+      <div>choice: {{choice 'Hello, Hi, Hey'}}</div>
+      <div>domain: {{domain to.email}}</div>
+      <div><img src="https://www.briskine.com/images/briskine-promo.png" width="100" height="73"></div>
+    `
+
+    defaultTemplates.push({
+      title: 'allvars',
+      shortcut: 'allvars',
+      subject: 'Subject',
+      body: allVarsBody,
+      to: '[email protected]',
+      cc: '[email protected], [email protected]',
+      bcc: '[email protected]',
+      from: '[email protected]'
+    })
+
+    defaultTemplates.push({
+      title: 'broken',
+      shortcut: 'broken',
+      body: 'Hello {{to.first_name}'
+    })
+
+    defaultTemplates.push({
+      title: 'attachment',
+      shortcut: 'attachment',
+      body: 'attachment',
+      attachments: [
+        {
+          name: 'briskine.svg',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.doc',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.pdf',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.zip',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.mp3',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.webm',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.txt',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+        {
+          name: 'briskine.generic',
+          url: 'https://www.briskine.com/favicon.svg',
+        },
+      ]
+    })
+  }
+
+  return defaultTemplates
+    .map((template, index) => {
+      const id = String(index)
+      return Object.assign({
+        id: id,
+        _body_plaintext: plainText(template.body),
+      }, template)
+    })
+}

src/store/extension-data.js

@@ -0,0 +1,35 @@
+import browser from 'webextension-polyfill'
+
+import trigger from './store-trigger.js'
+
+const extensionDataKey = 'briskine'
+const defaultExtensionData = {
+  words: 0,
+  templatesLastUsed: {},
+  dialogSort: 'last_used',
+  dialogTags: true,
+  lastSync: Date.now(),
+}
+
+export function getExtensionData () {
+  return browser.storage.local.get(extensionDataKey)
+    .then((data) => {
+      return Object.assign({}, defaultExtensionData, data[extensionDataKey])
+    })
+}
+
+export function setExtensionData (params = {}) {
+  return browser.storage.local.get(extensionDataKey)
+    .then((data) => {
+      // merge existing data with defaults and new data
+      return Object.assign({}, defaultExtensionData, data[extensionDataKey], params)
+    })
+    .then((newData) => {
+      const dataWrap = {}
+      dataWrap[extensionDataKey] = newData
+
+      trigger('extension-data-updated', newData)
+
+      return browser.storage.local.set(dataWrap)
+    })
+}

src/store/open-popup.js

@@ -0,0 +1,18 @@
+/* globals MANIFEST */
+import browser from 'webextension-polyfill'
+
+const actionNamespace = (MANIFEST === '2') ? 'browserAction' : 'action'
+
+export async function openPopup () {
+  try {
+    await browser[actionNamespace].openPopup()
+  } catch (err) {
+    // browserAction.openPopup is not supported in all browsers yet.
+    // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/action/openPopup
+    // Open the action popup in a new tab.
+    const popupUrl = browser.runtime.getURL('popup/popup.html')
+    browser.tabs.create({
+      url: `${popupUrl}?source=tab`
+    })
+  }
+}

src/store/plain-text.js

@@ -0,0 +1,4 @@
+// naive html to text conversion
+export default function plainText (html = '') {
+  return html.replace(/(<[^>]*>)|(&nbsp;)/g, '').replace(/\s+/g, ' ').trim()
+}