Removing timeoutCountdownDialog from DOM

LesionTracker/client/components/app/app.html

@@ -19,7 +19,6 @@
             </div>
         </div>
     </div>
-    {{>timeoutCountdownDialog}}
     <div id="studylistTabs" class="tab-content">
         <div class="tab-pane active" id="studylistTab">
             <div class="studylistContainer">

Packages/ohif-core/client/components/bootstrap/dialog/info.html

@@ -6,7 +6,9 @@
       {{#each message in this.messages}}
         <div class="message">{{{message}}}</div>
       {{else}}
-        <div class="message">An error has ocurred.</div>
+        {{#let message=(choose this.message 'An error has ocurred.')}}
+            <div class="message">{{message}}</div>
+        {{/let}}
       {{/each}}
     </div>
   {{/dialogSimple}}

Packages/ohif-user-management/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html

@@ -1,10 +1,5 @@
 <template name="timeoutCountdownDialog">
-    <div id="timeoutCountdownDialog">
-        <div class="dialogHeader">
-            <h5>Your session is about to expire.</h5>
-        </div>
-        <div class="dialogContent">
-            <p>You will be logged out in {{timeLeft}}.</p>
-        </div>
-    </div>
-</template>
+    {{#dialogSimple title='Your session is about to expire'}}
+        <div>You will be logged out in {{timeLeft}}.</div>
+    {{/dialogSimple}}
+</template>

Packages/ohif-user-management/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js

@@ -1,39 +1,63 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
+import { Tracker } from 'meteor/tracker';
+import { OHIF } from 'meteor/ohif:core';
+
+Meteor.startup(() => {
+    const closeObserver = new Tracker.Dependency();
+    $.event.add(window, 'TriggerCloseTimeoutCountdownDialog', () => closeObserver.changed());
+    $.event.add(window, 'TriggerOpenTimeoutCountdownDialog', (event, timeLeft) => {
+        OHIF.ui.showDialog('timeoutCountdownDialog', {
+            timeLeft,
+            closeObserver
+        });
+    });
+});
+
 Template.timeoutCountdownDialog.helpers({
-    timeLeft: function() {
-        var timeLeft = Session.get('countdownDialogLeftTime');
-        var suffix = timeLeft > 1 ? 'seconds': 'second';
-        return timeLeft + suffix;
+    timeLeft() {
+        const timeLeft = Session.get('countdownDialogTimeLeft');
+        const suffix = timeLeft > 1 ? 'seconds': 'second';
+        return `${timeLeft} ${suffix}`;
     }
 });
 
-Template.timeoutCountdownDialog.onRendered(function() {
-    // Show countdown dialog
-    var timeoutCountdownInterval;
-    $(document).on('TriggerOpenTimeoutCountdownDialog', function(e, leftTime) {
-        // Show modal dialog
-        timeoutCountdownInterval = setInterval(function() {
-            // Set countdownDialogLeftTime session
-            Session.set('countdownDialogLeftTime', --leftTime);
+Template.timeoutCountdownDialog.onCreated(() => {
+    const instance = Template.instance();
+    const { timeLeft, closeObserver } = instance.data;
 
-            var dialog = $('#timeoutCountdownDialog');
-
-            // Show dialog
-            dialog.css('display', 'block');
-        }, 1000);
+    instance.close = callback => {
+        const $modal = instance.$('.modal');
+        $modal.on('hidden.bs.modal', () => callback()).modal('hide');
+    };
 
+    instance.autorun(computation => {
+        closeObserver.depend();
+        if (computation.firstRun) return;
+        instance.close(instance.data.promiseResolve);
     });
 
-    $(document).on('TriggerCloseTimeoutCountdownDialog', function() {
-        var dialog = $('#timeoutCountdownDialog');
+    Session.set('countdownDialogTimeLeft', timeLeft);
+});
 
-        // Close the dialog
-        dialog.css('display', 'none');
-
-        if (timeoutCountdownInterval) {
-            clearInterval(timeoutCountdownInterval);
+Template.timeoutCountdownDialog.onRendered(() => {
+    const instance = Template.instance();
+    let timeLeft = instance.data.timeLeft;
 
+    // Update countdownDialogTimeLeft session every second
+    instance.interval = setInterval(() => {
+        Session.set('countdownDialogTimeLeft', --timeLeft);
+        if (!timeLeft) {
             // Remove reviewer info for the user
             Meteor.call('removeUserFromReviewers', Meteor.userId());
+            instance.close(instance.data.promiseReject);
         }
-    });
+    }, 1000);
+});
+
+Template.timeoutCountdownDialog.onDestroyed(() => {
+    const instance = Template.instance();
+    clearInterval(instance.interval);
+    Session.delete('countdownDialogTimeLeft');
 });

Packages/ohif-user-management/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl

@@ -1,15 +0,0 @@
-#timeoutCountdownDialog
-  display: none
-  position: absolute
-  top: 0
-  bottom: 0
-  left: 0
-  right: 0
-  margin: auto
-  width: 20%
-  height: 15%
-  z-index: 100
-  border-radius: 5px
-  padding: 10px 20px 10px 20px
-  background-color: rgba(255,255,255,1)
-  outline: none

Packages/ohif-user-management/package.js

@@ -49,7 +49,6 @@ Package.onUse(function(api) {
     api.addFiles('client/components/hipaaLogPage/hipaaLogPage.js', 'client');
 
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.html', 'client');
-    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl', 'client');
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.js', 'client');
 
     api.addFiles('client/components/lastLoginModal/lastLoginModal.html', 'client');