Merge pull request #374 from clemente-lab/Enhancement-MoreRobustUI

Enhancement more robust UI
clemente-lab · Mar 25, 2022 · c6e2e9c · c6e2e9c
2 parents 8296746 + 71c5c76
commit c6e2e9c
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 76 deletions.
diff --git a/mmeds/CSS/mmeds.js b/mmeds/CSS/mmeds.js
@@ -59,64 +59,106 @@ let length = document.getElementById("length");
 let match = document.getElementById("match");
 
 // When the user clicks outside of the password field, hide the message box
-myInput.onkeyup = function() {
-    // Validate lowercase letters
-    var lowerCaseCharacters = /[a-z]/g;
-    if(myInput.value.match(lowerCaseCharacters)) {
-        letter.classList.remove("invalid");
-        letter.classList.add("valid");
-    } else {
-        letter.classList.remove("valid");
-        letter.classList.add("invalid")
-    }
-
-    // Validate lowercase letters
-    var upperCaseCharacters = /[A-Z]/g;
-    if(myInput.value.match(upperCaseCharacters)) {
-        capital.classList.remove("invalid");
-        capital.classList.add("valid");
-    } else {
-        capital.classList.remove("valid");
-        capital.classList.add("invalid")
-    }
+if(myInput != null) {
+    myInput.onkeyup = function() {
+        // Validate lowercase letters
+        var lowerCaseCharacters = /[a-z]/g;
+        if(myInput.value.match(lowerCaseCharacters)) {
+            letter.classList.remove("invalid");
+            letter.classList.add("valid");
+        } else {
+            letter.classList.remove("valid");
+            letter.classList.add("invalid")
+        }
+
+        // Validate lowercase letters
+        var upperCaseCharacters = /[A-Z]/g;
+        if(myInput.value.match(upperCaseCharacters)) {
+            capital.classList.remove("invalid");
+            capital.classList.add("valid");
+        } else {
+            capital.classList.remove("valid");
+            capital.classList.add("invalid")
+        }
 
-    // Validate lowercase letters
-    var numbers = /[0-9]/g;
-    if(myInput.value.match(numbers)) {
-        num.classList.remove("invalid");
-        num.classList.add("valid");
-    } else {
-        num.classList.remove("valid");
-        num.classList.add("invalid")
+        // Validate lowercase letters
+        var numbers = /[0-9]/g;
+        if(myInput.value.match(numbers)) {
+            num.classList.remove("invalid");
+            num.classList.add("valid");
+        } else {
+            num.classList.remove("valid");
+            num.classList.add("invalid")
+        }
+
+        // Validate lowercase letters
+        var symbols = /[!@#$%^&*~`_+=-]/g;
+        if(myInput.value.match(symbols)) {
+            symbol.classList.remove("invalid");
+            symbol.classList.add("valid");
+        } else {
+            symbol.classList.remove("valid");
+            symbol.classList.add("invalid")
+        }
+
+        // Validate lowercase letters
+        if(myInput.value.length >= 10) {
+            length.classList.remove("invalid");
+            length.classList.add("valid");
+        } else {
+            length.classList.remove("valid");
+            length.classList.add("invalid")
+        }
     }
 
-    // Validate lowercase letters
-    var symbols = /[!@#$%^&*~`_+=-]/g;
-    if(myInput.value.match(symbols)) {
-        symbol.classList.remove("invalid");
-        symbol.classList.add("valid");
-    } else {
-        symbol.classList.remove("valid");
-        symbol.classList.add("invalid")
+    myInput2.onkeyup = function() {
+        // Validate matching passwords
+        if(myInput.value === myInput2.value) {
+            match.classList.remove("invalid");
+            match.classList.add("valid");
+        } else {
+            match.classList.remove("valid");
+            match.classList.add("invalid");
+        }
     }
+}
+// Password validation end
 
-    // Validate lowercase letters
-    if(myInput.value.length >= 10) {
-        length.classList.remove("invalid");
-        length.classList.add("valid");
-    } else {
-        length.classList.remove("valid");
-        length.classList.add("invalid")
+// Cookie compliancy begin
+// Cookies notification based on 
+//      https://html-online.com/articles/cookie-warning-widget-with-javascript/
+function GetCookie(name) {
+    var arg=name+"=";
+    var alen=arg.length;
+    var clen=document.cookie.length;
+    var i=0;
+    while (i<clen) {
+        var j=i+alen;
+        if (document.cookie.substring(i,j)==arg)
+            return "here";
+        i=document.cookie.indexOf(" ",i)+1;
+        if (i==0) break;
     }
+    return null;
 }
 
-myInput2.onkeyup = function() {
-    // Validate matching passwords
-    if(myInput.value === myInput2.value) {
-        match.classList.remove("invalid");
-        match.classList.add("valid");
+function testFirstCookie() {
+    var visit=GetCookie("cookieCompliancyAccepted");
+    if (visit==null) {
+        $("#myCookieConsent").fadeIn(400);   // Show warning
     } else {
-        match.classList.remove("valid");
-        match.classList.add("invalid");
-    }
+                // Already accepted
+    }        
 }
+
+$(document).ready(function(){
+    $("#cookieButton").click(function(){
+        console.log('Understood');
+        var expire=new Date();
+        expire=new Date(expire.getTime()+7776000000); // Check again after 90 days
+        document.cookie="cookieCompliancyAccepted=here; expires="+expire+";path=/";
+      $("#myCookieConsent").hide(400);
+    });
+    testFirstCookie();
+});
+// Cookie Compliancy END
diff --git a/mmeds/CSS/stylesheet.css b/mmeds/CSS/stylesheet.css
@@ -4,6 +4,7 @@
     text-align: left;
 }
 
+/*Password checking begin*/
 /* Add a green text color and a checkmark when the requirements are right */
 .valid {
     color: green;
@@ -25,3 +26,58 @@
     left: -6px;
     content: "✖";
 }
+/*Password checking end*/
+
+/*Cookie consent begin
+    Cookies notification based on
+        https://html-online.com/articles/cookie-warning-widget-with-javascript/
+*/
+#myCookieConsent {
+    z-index: 999;    
+    min-height: 20px;            
+    font-family: OpenSans, arial, "sans-serif";               
+    padding: 10px 20px;
+    background: rgba(0,0,0,0.6);
+    overflow: hidden;
+    position: fixed;
+    color: #FFF;
+    bottom: 0px;
+    right: 10px;
+    display: none;
+    left: 0;
+    text-align: center;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+#myCookieConsent div {
+    padding: 5px 0 0;                      
+}
+
+#myCookieConsent a {
+    color: #ffba55;                    
+    display: inline-block;                   
+    padding: 0 10px;                          
+}
+
+#myCookieConsent a:hover {
+    color: #fda016;                          
+}
+
+#myCookieConsent a#cookieButton {
+    display: inline-block;                                 
+    color: #000000;                          
+    font-size: 1.1em;                   
+    background: #ffba55;                     
+    text-decoration: none;                        
+    cursor: pointer;                          
+    padding: 2px 20px;                    
+    float: right;                      
+    border-radius: 20px;                 
+}
+
+#myCookieConsent a#cookieButton:hover {
+    background: #fda016;                                       
+    color: #000;                        
+}
+/*Cookie Consent End*/
diff --git a/mmeds/config.py b/mmeds/config.py
@@ -67,7 +67,6 @@
 # CONFIGURE SERVER GLOBALS #
 ############################
 
-
 # Configuration for the CherryPy server
 CONFIG = {
     'global': {
@@ -79,7 +78,6 @@
         'tools.sessions.on': True,
         'tools.sessions.timeout': 15,
         'tools.compress.gzip': True,
-        # 'environment' : 'production'
     },
     # Content in this directory will be made directly
     # available on the web server
@@ -155,6 +153,9 @@
     'query_select_specimen_page': (HTML_DIR / 'query_select_specimen_page.html', True),
     'query_generate_aliquot_id_page': (HTML_DIR / 'query_generate_aliquot_id_page.html', True),
     'query_generate_sample_id_page': (HTML_DIR / 'query_generate_sample_id_page.html', True),
+
+    # Error Pages
+    'error_page': (HTML_DIR / 'error_page.html', True),
 }
 
 # Predefined options for formatting webpages are set here
@@ -227,6 +228,9 @@
     'query_generate_sample_id_page': SERVER_PATH + 'query/generate_sample_id',
     'query_result_table': '',
 
+    # Error Pages
+    'error_page': SERVER_PATH + 'error/error_page',
+
     # Where to insert errors/warnings on a given page
     'error': '',
     'warning': '',
@@ -317,7 +321,7 @@
     'permutations',
     'type'
 ]
-CONTACT_EMAIL = 'david.wallach@mssm.edu'
+CONTACT_EMAIL = 'adam.cantor@mssm.edu'
 MMEDS_EMAIL = '[email protected]'
 TEST_EMAIL = '[email protected]'
 SQL_DATABASE = 'mmeds_data1'

diff --git a/mmeds/html/auth_sign_up_page.html b/mmeds/html/auth_sign_up_page.html
@@ -1,4 +1,3 @@
-<link rel="stylesheet" href={stylesheet}>
 <div class='w3-container w3-card-4 w3-center'>
     <form class='w3-form w3-padding w3-threequarter' action='{sign_up_page}' method='post' enctype='multipart/form-data'>
         <h4 class="w3-center"> Register Account </h4>

diff --git a/mmeds/html/error_page.html b/mmeds/html/error_page.html
@@ -0,0 +1,6 @@
+<div class="w3-container">
+    <h2>{status}</h2>
+    <p>{message}</p>
+    <pre>{traceback}</pre>
+    <p>{version}</p>
+</div>
diff --git a/mmeds/html/logged_in_template.html b/mmeds/html/logged_in_template.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+        <link rel="stylesheet" href={stylesheet}>
         <script src="https://kit.fontawesome.com/7e4e0c6c2d.js" crossorigin="anonymous"></script>
         <title>Welcome to Mmeds</title>
     </head>
@@ -60,13 +61,18 @@ <h5>Dashboard</h5>
             {warning}
             {success}
             {body}
+            <div id="myCookieConsent">
+                <a id="cookieButton">Understood</a>
+                    <div>This&nbsp;website is&nbsp;using&nbsp;cookies. <a href="https://site.ieee.org/gdpr/digital-guidelines/cookie-compliance/">More&nbsp;details</a></div>
+            </div>
             <!-- Footer -->
             <footer class="w3-container w3-padding-16 w3-light-grey">
                 <h4> Copyright Clemente Lab 2021</h4>
                 <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
             </footer>
 
             <!-- End page content -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src={javascript}> </script>
     </body>
 </html>
diff --git a/mmeds/html/logged_out_template.html b/mmeds/html/logged_out_template.html
@@ -7,6 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+        <link rel="stylesheet" href={stylesheet}>
         <script src="https://kit.fontawesome.com/7e4e0c6c2d.js" crossorigin="anonymous"></script>
         <title>MMEDS Server</title>
     </head>
@@ -77,12 +78,17 @@ <h4>Users</h4>
         {success}
         {body}
         <hr>
+        <div id="myCookieConsent">
+            <a id="cookieButton">Understood</a>
+                <div>This&nbsp;website is&nbsp;using&nbsp;cookies. <a href="https://site.ieee.org/gdpr/digital-guidelines/cookie-compliance/">More&nbsp;details</a></div>
+        </div>
         <!-- Footer -->
         <footer class="w3-container w3-padding-16 w3-light-grey">
             <h4> Copyright Clemente Lab 2021</h4>
             <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
         </footer>
         <!-- End page content -->'
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src={javascript}> </script>
     </body>
 </html>