Update alert

app/scripts/comp/launcher.js

@@ -19,6 +19,9 @@ if (window.process && window.process.versions && window.process.versions.electro
         openDevTools: function() {
             this.req('remote').getCurrentWindow().openDevTools();
         },
+        getAppVersion: function() {
+            return this.remReq('app').getVersion();
+        },
         getSaveFileName: function(defaultPath, cb) {
             if (defaultPath) {
                 var homePath = this.remReq('app').getPath('userDesktop');

app/scripts/comp/updater.js

@@ -15,19 +15,27 @@ var Updater = {
     UpdateCheckFiles: ['index.html', 'app.js'],
     nextCheckTimeout: null,
     updateCheckDate: new Date(0),
+
     enabledAutoUpdate: function() {
         return Launcher && AppSettingsModel.instance.get('autoUpdate');
     },
+
     updateInProgress: function() {
         return UpdateModel.instance.get('status') === 'checking' ||
             ['downloading', 'extracting'].indexOf(UpdateModel.instance.get('updateStatus')) >= 0;
     },
+
     init: function() {
         var willCheckNow = this.scheduleNextCheck();
         if (!willCheckNow && this.enabledAutoUpdate()) {
             this.check();
         }
+        if (!Launcher && window.applicationCache) {
+            window.applicationCache.addEventListener('updateready', this.checkAppCacheUpdateReady.bind(this));
+            this.checkAppCacheUpdateReady();
+        }
     },
+
     scheduleNextCheck: function() {
         if (this.nextCheckTimeout) {
             clearTimeout(this.nextCheckTimeout);
@@ -45,10 +53,14 @@ var Updater = {
         console.log('Update check will happen in ' + Math.round(timeDiff / 1000) + 's');
         return timeDiff === this.MinUpdateTimeout;
     },
+
     check: function(startedByUser) {
         if (!Launcher || this.updateInProgress()) {
             return;
         }
+        if (this.checkManualDownload()) {
+            return;
+        }
         UpdateModel.instance.set('status', 'checking');
         var that = this;
         if (!startedByUser) {
@@ -106,6 +118,13 @@ var Updater = {
             }
         });
     },
+
+    checkManualDownload: function() {
+        if (+Launcher.getAppVersion().split('.')[1] <= 2) {
+            UpdateModel.instance.set({ updateStatus: 'ready', updateManual: true });
+        }
+    },
+
     update: function(startedByUser) {
         var ver = UpdateModel.instance.get('lastVersion');
         if (!Launcher || ver === RuntimeInfo.version) {
@@ -164,6 +183,14 @@ var Updater = {
                 cb();
             });
         });
+    },
+
+    checkAppCacheUpdateReady: function() {
+        if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+            try { window.applicationCache.swapCache(); } catch (e) { }
+            UpdateModel.instance.set('updateStatus', 'ready');
+            Backbone.trigger('update-app');
+        }
     }
 };
 

app/scripts/const/links.js

@@ -3,9 +3,9 @@
 var Links = {
     Repo: 'https://github.com/antelle/keeweb',
     Desktop: 'https://github.com/antelle/keeweb/releases/latest',
-    WebApp: 'http://localhost:8088/',
+    WebApp: 'http://antelle.github.io/keeweb/',
     License: 'https://github.com/antelle/keeweb/blob/master/MIT-LICENSE.txt',
-    UpdateDesktop: 'http://localhost:8088/releases/download/{ver}/UpdateDesktop.zip'
+    UpdateDesktop: 'https://github.com/antelle/keeweb/releases/download/{ver}/UpdateDesktop.zip'
 };
 
 module.exports = Links;

app/scripts/models/update-model.js

@@ -11,7 +11,8 @@ var UpdateModel = Backbone.Model.extend({
         lastCheckError: null,
         status: null,
         updateStatus: null,
-        updateError: null
+        updateError: null,
+        updateManual: false
     },
 
     initialize: function() {
@@ -33,8 +34,11 @@ var UpdateModel = Backbone.Model.extend({
 
     save: function() {
         var attr = _.clone(this.attributes);
-        delete attr.updateStatus;
-        delete attr.updateError;
+        Object.keys(attr).forEach(function(key) {
+            if (key.lastIndexOf('update', 0) === 0) {
+                delete attr[key];
+            }
+        });
         localStorage.updateInfo = JSON.stringify(attr);
     }
 });

app/scripts/views/app-view.js

@@ -105,9 +105,7 @@ var AppView = Backbone.View.extend({
     },
 
     updateApp: function() {
-        if (this.model.files.hasOpenFiles()) {
-            this.showUpdateBubble(); // TODO
-        } else {
+        if (!Launcher && !this.model.files.hasOpenFiles()) {
             window.location.reload();
         }
     },

app/scripts/views/footer-view.js

@@ -3,7 +3,8 @@
 var Backbone = require('backbone'),
     Keys = require('../const/keys'),
     KeyHandler = require('../comp/key-handler'),
-    GeneratorView = require('./generator-view');
+    GeneratorView = require('./generator-view'),
+    UpdateModel = require('../models/update-model');
 
 var FooterView = Backbone.View.extend({
     template: require('templates/footer.html'),
@@ -28,10 +29,15 @@ var FooterView = Backbone.View.extend({
         KeyHandler.onKey(Keys.DOM_VK_COMMA, this.toggleSettings, this, KeyHandler.SHORTCUT_ACTION);
 
         this.listenTo(this.model.files, 'update reset change', this.render);
+        this.listenTo(Backbone, 'update-app', this.render);
     },
 
     render: function () {
-        this.$el.html(this.template(this.model));
+        this.listenTo(Backbone, 'update-app', this.updateApp);
+        this.$el.html(this.template({
+            files: this.model.files,
+            updateAvailable: UpdateModel.instance.get('updateStatus') === 'ready'
+        }));
         return this;
     },
 

app/scripts/views/settings/settings-general-view.js

@@ -6,7 +6,8 @@ var Backbone = require('backbone'),
     Format = require('../../util/format'),
     AppSettingsModel = require('../../models/app-settings-model'),
     UpdateModel = require('../../models/update-model'),
-    RuntimeInfo = require('../../comp/runtime-info');
+    RuntimeInfo = require('../../comp/runtime-info'),
+    Links = require('../../const/links');
 
 var SettingsGeneralView = Backbone.View.extend({
     template: require('templates/settings/settings-general.html'),
@@ -17,6 +18,7 @@ var SettingsGeneralView = Backbone.View.extend({
         'change .settings__general-auto-update': 'changeAutoUpdate',
         'click .settings__general-update-btn': 'checkUpdate',
         'click .settings__general-restart-btn': 'restartApp',
+        'click .settings__general-download-update-btn': 'downloadUpdate',
         'click .settings__general-dev-tools-link': 'openDevTools'
     },
 
@@ -41,7 +43,8 @@ var SettingsGeneralView = Backbone.View.extend({
             autoUpdate: Updater.enabledAutoUpdate(),
             updateInProgress: Updater.updateInProgress(),
             updateInfo: this.getUpdateInfo(),
-            updateReady: UpdateModel.instance.get('updateStatus') === 'ready'
+            updateReady: UpdateModel.instance.get('updateStatus') === 'ready',
+            updateManual: UpdateModel.instance.get('updateManual')
         });
     },
 
@@ -99,7 +102,15 @@ var SettingsGeneralView = Backbone.View.extend({
     },
 
     restartApp: function() {
-        Launcher.requestRestart();
+        if (Launcher) {
+            Launcher.requestRestart();
+        } else {
+            window.location.reload();
+        }
+    },
+
+    downloadUpdate: function() {
+        Launcher.openLink(Links.Desktop);
     },
 
     changeExpandGroups: function(e) {

app/styles/areas/_footer.scss

@@ -41,4 +41,9 @@
     padding: $base-padding;
     font-size: 1.4em;
   }
+
+  &__update-icon {
+    @include th { color: action-color(); }
+    @include animation(shake 50s cubic-bezier(.36,.07,.19,.97) 0s infinite);
+  }
 }

app/styles/areas/_settings.scss

@@ -77,8 +77,6 @@
   }
   &__general-update-btn {
     width: 15em;
-  }
-  &__general-restart-btn {
-    margin-left: $small-spacing;
+    margin-right: $small-spacing;
   }
 }

app/styles/base/_colors.scss

@@ -57,6 +57,5 @@ $all-colors: (
 @each $col, $val in $all-colors {
   .#{$col}-color { color: #{$val}; }
 }
-.muted-color {
-  @include th { color: muted-color(); };
-}
+.muted-color { @include th { color: muted-color(); }; }
+.action-color { @include th { color: action-color(); }; }

app/styles/common/_fx.scss

@@ -25,3 +25,11 @@
     @include transform(rotateY(360deg));
   }
 }
+
+@include keyframes(shake) {
+  0%, 1%, 100% { @include transform(translate3d(0, 0, 0)); }
+  .1%, .9% { @include transform(translate3d(-1px, 0, 0)); }
+  .2%, .8% { @include transform(translate3d(2px, 0, 0)); }
+  .3%, .5%, .7% { @include transform(translate3d(-3px, 0, 0)); }
+  .4%, .6% { @include transform(translate3d(3px, 0, 0)); }
+}

app/templates/footer.html

@@ -9,7 +9,13 @@
     <div class="footer__db footer__db--dimmed footer__db--expanded footer__db-open"><i class="fa fa-plus"></i> Open / New</div>
     <!--<div class="footer__btn footer__btn-view"><i class="fa fa-list-ul"></i></div>-->
     <div class="footer__btn footer__btn-help"><i class="fa fa-question"></i></div>
-    <div class="footer__btn footer__btn-settings"><i class="fa fa-cog"></i></div>
+    <div class="footer__btn footer__btn-settings">
+        <% if (updateAvailable) { %>
+        <i class="fa fa-bell footer__update-icon"></i>
+        <% } else { %>
+        <i class="fa fa-cog"></i>
+        <% } %>
+    </div>
     <div class="footer__btn footer__btn-generate"><i class="fa fa-bolt"></i></div>
     <div class="footer__btn footer__btn-lock"><i class="fa fa-lock"></i></div>
 </div>

app/templates/settings/settings-general.html

@@ -1,5 +1,19 @@
 <div>
     <h1><i class="fa fa-cog"></i> General Settings</h1>
+    <% if (updateReady && !canAutoUpdate) { %>
+    <h2 class="action-color">Update</h2>
+    <div>New app version was released and downloaded.</div>
+    <div class="settings__general-update-buttons">
+        <button class="settings__general-restart-btn">Reload to update</button>
+    </div>
+    <% } else if (updateManual) { %>
+    <h2 class="action-color">Update</h2>
+    <div>New version has been released. It will check for updates and install them automatically
+        but auto-upgrading from your version is impossible.</div>
+    <div class="settings__general-update-buttons">
+        <button class="settings__general-download-update-btn">Download update</button>
+    </div>
+    <% } %>
     <h2>Appearance</h2>
     <div>
         <label for="settings__general-theme">Theme:</label>
@@ -13,7 +27,7 @@
         <input type="checkbox" class="settings__input input-base settings__general-expand" id="settings__general-expand" <%- expandGroups ? 'checked' : '' %> />
         <label for="settings__general-expand">Show entries from all subgroups</label>
     </div>
-    <% if (canAutoUpdate) { %>
+    <% if (canAutoUpdate && !updateManual) { %>
     <h2>Function</h2>
     <div>
         <input type="checkbox" class="settings__input settings__general-auto-update" id="settings__general-auto-update" <%- autoUpdate ? 'checked' : '' %> />