Version checking feature complete

.env

@@ -1,15 +1,11 @@
 HOST=127.0.0.1
 PORT=3333
 NODE_ENV=development
-
 CACHE_VIEWS=false
+HASH_DRIVER=bcrypt
 
 APP_NAME=SesTemplateManager
 APP_URL=http://${HOST}:${PORT}
 APP_KEY=123456789
 
-CACHE_VIEWS=false
-
-HASH_DRIVER=bcrypt
-
 AWS_PROFILE_NAME=default

public/create-template.js

@@ -48,4 +48,6 @@ $(document).ready(function(){
       }
     });
   });
+
+  checkAppVersion();
 });

public/css/global.css

@@ -0,0 +1,10 @@
+#newVersionIndicator {
+  background: #e26262;
+  color: #313131;
+  width: 185px;
+  position: absolute;
+  top: 0;
+  left: 0px;
+  text-align: center;
+  border-radius: 0 0 5px 0;
+}

public/global.js

@@ -1,6 +1,33 @@
+const currentVersion = "v1.3";
+
 function populateTextSectionContent() {
   //Will strip template html of html tags leaving inner content for the template text field
   const htmlString = $('#templateHtml').val();
   const textContent = htmlString.replace(/<[^>]*>/g, "");
   $('#templateText').val(textContent);
 }
+
+async function checkAppVersion(){
+  const versionChecked = sessionStorage.getItem('versionChecked');
+  if (!versionChecked) {
+    await $.get(`https://api.github.com/repos/MattRuddick/ses-template-manager/tags`, (response) => {
+      try {
+        const latestVersion = response[0].name;
+        if (currentVersion !== latestVersion) {
+          sessionStorage.setItem('versionOutdated', 'true');
+          sessionStorage.setItem('latestVersion', latestVersion);
+        }
+      } catch {
+        console.warn('App version could not be checked.');
+      }
+    }).always(() => {
+      // still mark versionCheck as done even if request failed. failsafe should the repo/url/git endpoint structure change in the future
+      sessionStorage.setItem('versionChecked', 'true'); // indicates we have already checked the version
+    });
+  }
+
+  if (sessionStorage.getItem('versionOutdated')) {
+    const latestVersion = sessionStorage.getItem('latestVersion');
+    $('body').append(`<a id="newVersionIndicator" href="https://github.com/MattRuddick/ses-template-manager/releases/tag/${latestVersion}" target="_blank">New Version Available</a>`);
+  }
+}

public/index.js

@@ -5,14 +5,14 @@ $(document).ready(() => {
     $('#regionSelector').val(localStorage.getItem('region')); //always ensure the select region dropdown matches localstorage region
   }
 
-  //apply region select listener
+  // apply region select listener
   $('#regionSelector').change(function(){
     const regionName = $(this).val(); //get changed to selection
     localStorage.setItem('region', regionName);
     window.location.reload();
   });
 
-  //get templates and build table
+  // get templates and build table
   $.get(`/list-templates?region=${localStorage.getItem('region')}`, function (data) {
     const templatesArr = data.items.TemplatesMetadata;
 
@@ -67,6 +67,9 @@ $(document).ready(() => {
     $('#credentialsErrorModal .modal-body').append(`<p><strong>${response.responseJSON.code}</strong> <br> ${response.responseJSON.message} </p>`);
     $('#credentialsErrorModal').modal();
   });
+
+  // check project latest version
+  checkAppVersion();
 });
 
 function deleteTemplate(templateName) {

public/update-template.js

@@ -47,5 +47,7 @@ $(document).ready(() => {
       }
     });
   });
+
+  checkAppVersion();
 });
 

resources/views/create-template.edge

@@ -6,6 +6,7 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
     <script src="/global.js"></script>
     <script src="/create-template.js"></script>
+    <link rel="stylesheet" href="/css/global.css">
     <title>SES Template Manager - Create Template</title>
   </head>
 

resources/views/index.edge

@@ -7,6 +7,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js" integrity="sha512-rmZcZsyhe0/MAjquhTgiUcb4d9knaFc7b5xAfju483gbEXTkeJRUMIPk6s3ySZMYUHEcjKbjLjyddGWMrNEvZg==" crossorigin="anonymous"></script>
     <script src="/global.js"></script>
     <script src="/index.js"></script>
+    <link rel="stylesheet" href="/css/global.css">
     <title>SES Template Manager</title>
   </head>
 

resources/views/update-template.edge

@@ -6,6 +6,7 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
     <script src="/global.js"></script>
     <script src="/update-template.js"></script>
+    <link rel="stylesheet" href="/css/global.css">
     <title>SES Template Manager - Update Template</title>
   </head>