Add minimumCompatibleVersion and update refresh modal to show more detail informations

lib/config.js

@@ -78,11 +78,13 @@ function getserverurl() {
 }
 
 var version = '0.4.2';
+var minimumCompatibleVersion = '0.4.2';
 var maintenance = true;
 var cwd = path.join(__dirname, '..');
 
 module.exports = {
     version: version,
+    minimumCompatibleVersion: minimumCompatibleVersion,
     maintenance: maintenance,
     debug: debug,
     urlpath: urlpath,

lib/realtime.js

@@ -708,7 +708,10 @@ function connection(socket) {
 
     //check version
     socket.on('version', function () {
-        socket.emit('version', config.version);
+        socket.emit('version', {
+            version: config.version,
+            minimumCompatibleVersion: config.minimumCompatibleVersion
+        });
     });
 
     //received cursor focus

public/js/index.js

@@ -629,15 +629,23 @@ function idleStateChange() {
     updateTitleReminder();
 }
 
-function setNeedRefresh() {
+function setRefreshModal(status) {
     $('#refreshModal').modal('show');
+    $('#refreshModal').find('.modal-body > div').hide();
+    $('#refreshModal').find('.' + status).show();
+}
+
+function setNeedRefresh() {
     needRefresh = true;
     editor.setOption('readOnly', true);
     socket.disconnect();
     showStatus(statusType.offline);
 }
 
-loginStateChangeEvent = setNeedRefresh;
+loginStateChangeEvent = function () {
+    setRefreshModal('user-state-changed');
+    setNeedRefresh();
+};
 
 //visibility
 var wasFocus = false;
@@ -1978,8 +1986,7 @@ socket.on('error', function (data) {
 });
 var retryOnDisconnect = false;
 var retryTimer = null;
-socket.on('maintenance', function (data) {
-    if (data == version)
+socket.on('maintenance', function () {
     retryOnDisconnect = true;
 });
 socket.on('disconnect', function (data) {
@@ -1992,7 +1999,7 @@ socket.on('disconnect', function (data) {
         editor.setOption('readOnly', true);
     if (retryOnDisconnect && !retryTimer) {
         retryTimer = setInterval(function () {
-            socket.connect();
+            if (!needRefresh) socket.connect();
         }, 1000);
     }
 });
@@ -2013,8 +2020,14 @@ socket.on('connect', function (data) {
         socket.id = socket.nsp + '#' + socket.id;
 });
 socket.on('version', function (data) {
-    if (data != version)
+    if (version != data.version) {
+        if (version < data.minimumCompatibleVersion) {
+            setRefreshModal('incompatible-version');
             setNeedRefresh();
+        } else {
+            setRefreshModal('new-version');
+        }
+    }
 });
 function updateLastInfo(data) {
     //console.log(data);

public/views/body.ejs

@@ -56,25 +56,6 @@
         </div>
     </div>
 </div>
-<!-- refresh modal -->
-<div class="modal fade" id="refreshModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
-                </button>
-                <h4 class="modal-title" id="myModalLabel">This page need refresh</h4>
-            </div>
-            <div class="modal-body">
-                <h5>This page have a mismatch client version or incorrect user state or errors.</h5>
-                <strong>Please refresh this page.</strong>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" id="refreshModalRefresh">Refresh</button>
-            </div>
-        </div>
-    </div>
-</div>
 <!-- locked modal -->
 <div class="modal fade locked-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-sm">
@@ -234,6 +215,7 @@
         </div>
     </div>
 </div>
+<%- include refresh-modal %>
 <%- include signin-modal %>
 <%- include help-modal %>
 <%- include revision-modal %>

public/views/refresh-modal.ejs

@@ -0,0 +1,32 @@
+<!-- refresh modal -->
+<div class="modal fade" id="refreshModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="myModalLabel">This page need refresh</h4>
+            </div>
+            <div class="modal-body">
+                <div class="incompatible-version">
+                    <h5>You have an incompatible client version.</h5>
+                    <strong>Refresh to update.</strong>
+                </div>
+                <div class="new-version" style="display:none;">
+                    <h5>New version available!</h5>
+                    <a href="<%- url %>/s/release-notes" target="_blank">See releases notes here</a>
+                    <br>
+                    <strong>Refresh to enjoy new features.</strong>
+                </div>
+                <div class="user-state-changed" style="display:none;">
+                    <h5>Your user state has changed.</h5>
+                    <strong>Refresh to load new user state.</strong>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <a class="btn btn-danger" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=KDGS4PREHX6QQ&lc=US&item_name=HackMD&amount=5%2e00&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" target="_blank"><i class="fa fa-coffee"></i> Buy us coffee</a>
+                <button type="button" class="btn btn-primary" id="refreshModalRefresh">Refresh</button>
+            </div>
+        </div>
+    </div>
+</div>