Implement config saving, style login window

sprusr · sprusr · commit 784befc68266 · 2017-08-02T21:04:51.000+01:00
diff --git a/index.css b/index.css
@@ -1,32 +1,12 @@
-body {
-  margin: 0 auto;
-  box-sizing: border-box;
-  font-family: 'Helvetica Neue', Helvetica, sans-serif;
-  font-size: 14pt;
-}
-
-#personal-auth-form {
-  width: 400px;
-  margin: 0 auto;
-  text-align: center;
+html, body {
+  -webkit-app-region: drag;
 }
 
-input {
-  border: 2px solid rgb(85, 20, 145);
-  border-radius: 4px;
-  border-collapse: collapse;
-  margin: 0;
-  padding: 0;
-  height: 30px;
-}
-
-input[type="text"] {
-  width: 100%;
-  background-color: #fff;
+body {
+  background-color: rgb(62, 48, 111);
+  padding-top: 40px;
 }
 
-input[type="submit"] {
-  width: 20%;
-  background-color: rgb(85, 20, 145);
-  color: #fff;
+.container {
+  -webkit-app-region: no-drag;
 }
diff --git a/index.html b/index.html
@@ -1,15 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Starling Bank Personal Auth</title>
-  <link rel="stylesheet" href="./index.css" media="screen" charset="utf-8">
+  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="./index.css">
 </head>
 <body>
-  <form id="personal-auth-form">
-    <input type="text" id="access-token-input" placeholder="Personal Access Token...">
-    <input type="submit">
-  </form>
+  <div class="app-region"></div>
+  <div class="container">
+    <div id="error"></div>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h1 class="panel-title">Personal Auth</h1>
+      </div>
+      <div class="panel-body">
+        <p>You can get your personal auth token from the <a href="https://developer.starlingbank.com">Starling Bank developer portal</a>.</p>
+        <p>You'll be asked to create an account if you don't already have one, and tie it to your Starling account.</p>
+        <form id="personal-auth-form">
+          <div class="form-group">
+            <input type="text" id="access-token-input" placeholder="Token" class="form-control">
+          </div>
+          <input type="submit" class="form-control">
+        </form>
+      </div>
+    </div>
+  </div>
   <script>require('./index.js')</script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,9 +1,25 @@
+const $ = window.jQuery = window.$ = require('jquery')
+require('bootstrap')
+
 const {ipcRenderer, shell} = require('electron')
 
 const personalAuthForm = document.querySelector('#personal-auth-form')
 const accessTokenInput = document.querySelector('#access-token-input')
 
-personalAuthForm.addEventListener('submit', (e) => {
-  e.preventDefault()
-  ipcRenderer.send('personal-auth', accessTokenInput.value)
+$('#personal-auth-form').on('submit', (event) => {
+  event.preventDefault()
+  ipcRenderer.send('personal-auth-token', $('#access-token-input').val() || ' ')
+})
+
+$(document).on('click', 'a[href^="http"]', (event) => {
+  event.preventDefault()
+  shell.openExternal(event.target.href)
+})
+
+ipcRenderer.on('personal-auth-error', (event, error) => {
+  $('#error').html(`
+    <div class="alert alert-warning alert-dismissible" role="alert">
+      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+      <strong>Error</strong>: ${error}
+    </div>`)
 })
diff --git a/main.js b/main.js
@@ -1,31 +1,57 @@
 const {app, BrowserWindow, ipcMain, Tray, Menu} = require('electron')
 const path = require('path')
 const Starling = require('starling-developer-sdk')
+const storage = require('electron-json-storage')
 
 const assetsDirectory = path.join(__dirname, 'assets')
 
 let starling = undefined
 let tray = undefined
 let trayMenu = undefined
 let authWindow = undefined
-let displayInStatusbar = false
 
-// Don't show the app in the doc
+let config = {
+  starling: {}
+}
+
+// don't show the app in the dock
 app.dock.hide()
 
 app.on('ready', () => {
+  createSystemMenu()
   createTray()
+  loadConfig()
 })
 
-// Quit the app when the window is closed
-app.on('window-all-closed', () => {
-  app.quit()
-})
+const loadConfig = () => {
+  storage.get('starling', function(error, data) {
+    config.starling = {
+      accessToken: data.accessToken,
+      displayInStatusbar: data.displayInStatusbar || true
+    }
+
+    if (config.starling.accessToken) {
+      starling = new Starling({accessToken: config.starling.accessToken})
+      starling.getBalance().catch(() => {
+        starling = null
+        loadPreAuthTray()
+      }).then(() => {
+        loadTray()
+      })
+    } else {
+      loadPreAuthTray()
+    }
+  })
+}
 
 const createTray = () => {
   tray = new Tray(path.join(assetsDirectory, 'sbTemplate.png'))
+}
+
+const loadPreAuthTray = () => {
+  tray.setTitle('')
   trayMenu = Menu.buildFromTemplate([
-    {label: 'Enter Personal Auth Token...', click: doPersonalAuth},
+    {label: 'Enter personal auth token...', click: doPersonalAuth},
     {type: 'separator'},
     {label: 'Quit', role: 'quit'}
   ])
@@ -39,7 +65,6 @@ const loadTray = () => {
 
   updateTray()
   setInterval(updateTray, 30000)
-
 }
 
 const updateTray = () => {
@@ -48,44 +73,93 @@ const updateTray = () => {
   }
 
   starling.getBalance().then(({data}) => {
-    if (displayInStatusbar) {
+    if (config.starling.displayInStatusbar) {
       tray.setTitle(`£${data.effectiveBalance}`)
     } else {
       tray.setTitle('')
     }
 
     trayMenu = Menu.buildFromTemplate([
-      {type: 'checkbox', label: 'Display in statusbar', click: setDisplayInStatusbar, checked: displayInStatusbar},
+      {type: 'checkbox', label: 'Display in statusbar', click: setDisplayInStatusbar, checked: config.starling.displayInStatusbar},
       {type: 'separator'},
       {label: `Balance`, enabled: false},
       {label: `  - £${data.effectiveBalance}`, enabled: false},
       {type: 'separator'},
+      {label: 'Log out', click: logOut},
       {label: 'Quit', role: 'quit'}
     ])
     tray.setContextMenu(trayMenu)
-  });
+  })
 }
 
 const setDisplayInStatusbar = (item) => {
-  displayInStatusbar = item.checked
+  config.starling.displayInStatusbar = item.checked
   updateTray()
+  storage.set('starling', config.starling, (error) => {
+    //
+  })
 }
 
 const createAuthWindow = () => {
-  if (authWindow) {
+  if (authWindow && !authWindow.isDestroyed()) {
     authWindow.close()
   }
 
-  return new BrowserWindow({})
+  return new BrowserWindow({
+    width: 320,
+    height: 420,
+    titleBarStyle: 'hidden-inset',
+    resizable: false,
+    alwaysOnTop: true
+  })
 }
 
 const doPersonalAuth = () => {
   authWindow = createAuthWindow()
   authWindow.loadURL(`file://${path.join(__dirname, 'index.html')}`)
 }
 
-ipcMain.on('personal-auth', (event, token) => {
+ipcMain.on('personal-auth-token', (event, token) => {
   starling = new Starling({accessToken: token})
-  authWindow.hide()
-  loadTray()
+  starling.getBalance().then(({data}) => {
+    config.starling.accessToken = token
+    storage.set('starling', config.starling, function(error) {
+      authWindow.hide()
+      loadTray()
+    })
+  }).catch((error) => {
+    event.sender.send('personal-auth-error', 'Invalid auth token')
+  })
 })
+
+const logOut = () => {
+  config.starling.accessToken = null
+  storage.set('starling', config.starling, function(error) {
+    loadPreAuthTray()
+  })
+}
+
+// required to enable certain system functions such as clipboard
+const createSystemMenu = () => {
+  var template = [{
+    label: "StarlingBar",
+    submenu: [
+      { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
+      { type: "separator" },
+      { label: "Quit", accelerator: "Command+Q", click: function() { app.quit() }}
+    ]
+  }, {
+    label: "Edit",
+    submenu: [
+      { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
+      { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
+      { type: "separator" },
+      { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
+      { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
+      { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
+      { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
+    ]
+  }]
+
+  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
