Fix 496

src/css/notifications.min.css

@@ -0,0 +1,34 @@
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400);
+.notification {
+width: 300px;
+height: 80px;
+position: absolute;
+bottom: 10px;
+right: -300px;
+background: #ecf0f1;
+margin-bottom: 10px;
+font-family: 'Open Sans', sans-serif;
+font-size: 16px;
+padding: 0 15px;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+box-sizing: border-box;
+line-height: 80px;
+border-left: 5px solid
+}
+.notification-info {
+border-left-color: #3498db;
+color: #3498db
+}
+.notification-success {
+border-left-color: #0a632f;
+color: #06883c
+}
+.notification-warning {
+border-left-color: #e67e22;
+color: #e67e22
+}
+.notification-error {
+border-left-color: #e74c3c;
+color: #e74c3c
+}

src/js/login.js

@@ -70,11 +70,11 @@ cPass.addEventListener("submit", (e)=>{
 				jsonp: "callback",
 				crossDomain: true,
 		        success: (response) => {
-					alert(response.message);
+                    displayNotification("success","Password changed",2000)
 					cPass.style.display = "none";
 		        },
 		        error : () => {
-		            console.log(loginEP);
+                    displayNotification("error","Password not changed",2000)
 		        }
 		    });
 		});

src/js/options.js

@@ -37,8 +37,10 @@ if(micAccess) {
             audio: true
         }, (stream) => {
             stream.getTracks().forEach(track => track.stop());
+            displayNotification("success", " Mic Access Granted", 1000);
         }, () => {
             console.log("no access");
+            displayNotification("error", " No Access", 1000);
         });
     });
 }
@@ -77,31 +79,31 @@ if(getVoice) {
 if(submitThemeColor) {
     submitThemeColor.addEventListener("click",()=>{
 			localStorage.setItem("theme",theme);
-			alert("Success");
-      });
+            displayNotification("info", "Theme successfully changed", 1000);
+        });
 }
 
 if(submitMsgPaneColor) {
     submitMsgPaneColor.addEventListener("click",()=>{
 			localStorage.setItem("msgTheme",msgTheme);
-			alert("Success");
-      });
+            displayNotification("warning", " Message Pane Color Changed", 1000);
+        });
 }
 if(submitSusiVoice) {
     submitSusiVoice.addEventListener("click",()=>{
  			localStorage.setItem("voice",voice);
- 			alert("Success");
-      });
+             displayNotification("success", "Voice successfully changed", 1000);
+            });
 }
 if(backgroundChange) {
     backgroundChange.addEventListener("submit", (e) => {
         e.preventDefault();
         theValue = backUrl.value;
         if (!theValue) {
-            alert("Error: No value specified");
+            displayNotification("error", " Error Background Not Changed", 1000);
         } else {
             localStorage.setItem("theValue", theValue);
-            alert("Successfully stored");
+            displayNotification("warning", " Background successfully changed", 1000);
         }
     });
 }
@@ -111,14 +113,17 @@ restore.addEventListener("click", ()=>{
         userItems = ["theValue", "voice", "msgTheme", "theme"];
         userItems.forEach(item => {
             localStorage.removeItem(item);
+
         });
+        displayNotification("warning", " Restored Settings", 1000);
+
     }
 });
 
 localimage.addEventListener("change",()=>{
     var tmppath = URL.createObjectURL(localimage.files[0]);
     localStorage.setItem("theValue",tmppath);
-    alert("Image Updated");
+    displayNotification("success", " Image Updates", 1000);
 });
 
 themeColorPicker.on("change", function(color){

src/login.html

@@ -4,6 +4,7 @@
     <title>SUSI Login Portal</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="css/login.css">
+    <link rel="stylesheet" type="text/css" href="css/notifications.min.css">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 </head>
 <body>
@@ -62,7 +63,10 @@
                     </div>
                     <form id="cPass" style="display:none;">
                         <div class="form-group">
-                            <input type="password" class="form-control fmargin" id="cpassword" placeholder="Password">
+                            <input type="email" class="form-control fmargin" id="cemail" placeholder="Email">
+                        </div>
+                        <div class="form-group">
+                            <input type="password" class="form-control fmargin" id="cpassword" placeholder="Current Password">
                         </div>
                         <div class="form-group">
                             <input type="password" class="form-control fmargin" id="newPassword" placeholder="New Password">
@@ -88,5 +92,7 @@
     <script src="jquery/jquery-3.2.1.min.js"></script>
     <script src="bootstrap/bootstrap.min.js"></script>
     <script src="js/login.js"></script>
+    <script src="js/notifications.min.js"></script>
+
 </body>
 </html>

src/options.html

@@ -8,7 +8,9 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="css/options.css">
     <link rel="stylesheet" type="text/css" href="css/ldcp.css"/>
+    <link rel="stylesheet" type="text/css" href="css/notifications.min.css"/>
     <script type="text/javascript" src="js/ldcp.min.js"></script>
+    <script type="text/javascript" src="js/notifications.min.js"></script>
 </head>
 <body>
     <div class="container">