improved animation

erwindon · Jul 7, 2019 · afcc24b · afcc24b
1 parent 6e98933
commit afcc24b
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 61 deletions.
diff --git a/saltgui/index.html b/saltgui/index.html
@@ -66,7 +66,7 @@ <h1 class='logo'>SaltGUI</h1>
       <div class='route' id='page-login'>
         <form method='post' id='login-form'>
           <h1>SaltGUI</h1>
-          <div class='notice-wrapper'>
+          <div id='notice-wrapper'>
           </div>
           <input id='username' type='text' placeholder='Username' autofocus />
           <input id='password' type='password' placeholder='Password' />

diff --git a/saltgui/static/scripts/routes/Login.js b/saltgui/static/scripts/routes/Login.js
@@ -14,40 +14,55 @@ export class LoginRoute extends Route {
     this.registerEventListeners();
   }
 
+  registerEventListeners() {
+    const submit = document.getElementById("login-form");
+    submit.addEventListener("submit", this.onLogin);
+  }
+
+  showNoticeText(pBackgroundColour, pText) {
+    // create a new child every time to restart the animation
+    const noticeDiv = Route._createDiv("", pText);
+    noticeDiv.id = "notice";
+    noticeDiv.style.backgroundColor = pBackgroundColour;
+    const noticeWrapperDiv = document.getElementById("notice-wrapper");
+    noticeWrapperDiv.replaceChild(noticeDiv, noticeWrapperDiv.firstChild);
+  }
+
   onShow() {
-    const eauthSelector = this.pageElement.querySelector("#login-form #eauth");
+    const eauthSelector = document.getElementById("eauth");
     const eauthValue = window.localStorage.getItem("eauth");
     eauthSelector.value = eauthValue ? eauthValue : "pam";
 
-    let reason = decodeURIComponent(Utils.getQueryParam("reason"));
-    if(!reason || reason === "undefined") return;
-    if(reason === "no-session") reason = "Not logged in!";
-    if(reason === "expired-session") reason = "Session expired!";
-    if(reason === "logout") reason = "Logout!";
-    const noticeDiv = this.pageElement.querySelector(".notice-wrapper");
-
-    const reasonDiv = Route._createDiv("notice", reason);
-    reasonDiv.style.backgroundColor = "black";
-    noticeDiv.replaceChild(reasonDiv, noticeDiv.firstChild);
-    noticeDiv.className = "notice-wrapper";
-    noticeDiv.focus(); //Used to trigger a reflow (to restart animation)
-    noticeDiv.className = "notice-wrapper show";
-  }
-
-  registerEventListeners() {
-    const submit = this.pageElement.querySelector("#login-form");
-    submit.addEventListener("submit", this.onLogin);
+    const reason = decodeURIComponent(Utils.getQueryParam("reason"));
+    switch(reason){
+    case null:
+    case "":
+    case "undefined":
+      break;
+    case "no-session":
+      this.showNoticeText("#F44336", "Not logged in");
+      break;
+    case "expired-session":
+      this.showNoticeText("#F44336", "Session expired");
+      break;
+    case "logout":
+      this.showNoticeText("gray", "Logout");
+      break;
+    default:
+      // should not occur
+      this.showNoticeText("#F44336", reason);
+    }
   }
 
   onLogin(pSubmitEvent) {
     pSubmitEvent.preventDefault();
     if(this.loginPending) return; //Don't continue if waiting on a request
 
-    const userNameField = this.pageElement.querySelector("#username");
+    const userNameField = document.getElementById("username");
     const userName = userNameField.value;
-    const passWordField = this.pageElement.querySelector("#password");
+    const passWordField = document.getElementById("password");
     const passWord = passWordField.value;
-    const eauthField = this.pageElement.querySelector("#eauth");
+    const eauthField = document.getElementById("eauth");
     const eauth = eauthField.value;
 
     this.toggleForm(false);
@@ -58,22 +73,14 @@ export class LoginRoute extends Route {
   onLoginSuccess() {
     this.toggleForm(true);
 
-    const noticeDiv = this.pageElement.querySelector(".notice-wrapper");
-
-    const success = Route._createDiv("notice", "Please wait...");
-    success.style.backgroundColor = "#4CAF50";
-    noticeDiv.replaceChild(success, noticeDiv.firstChild);
-
-    const userNameField = this.pageElement.querySelector("#username");
+    const userNameField = document.getElementById("username");
     userNameField.disabled = true;
-    const passWordField = this.pageElement.querySelector("#password");
+    const passWordField = document.getElementById("password");
     passWordField.disabled = true;
-    const eauthField = this.pageElement.querySelector("#eauth");
+    const eauthField = document.getElementById("eauth");
     eauthField.disabled = true;
 
-    noticeDiv.className = "notice-wrapper";
-    noticeDiv.focus(); //Used to trigger a reflow (to restart animation)
-    noticeDiv.className = "notice-wrapper show";
+    this.showNoticeText("#4CAF50", "Please wait...");
 
     //we need these functions to populate the dropdown boxes
     const wheelConfigValuesPromise = this.router.api.getWheelConfigValues();
@@ -124,15 +131,7 @@ export class LoginRoute extends Route {
   onLoginFailure() {
     this.toggleForm(true);
 
-    const noticeDiv = this.pageElement.querySelector(".notice-wrapper");
-
-    const authFailed = Route._createDiv("notice", "Authentication failed");
-    authFailed.style.backgroundColor = "#F44336";
-
-    noticeDiv.replaceChild(authFailed, noticeDiv.firstChild);
-    noticeDiv.className = "notice-wrapper";
-    noticeDiv.focus(); //Used to trigger a reflow (to restart animation)
-    noticeDiv.className = "notice-wrapper show";
+    this.showNoticeText("#F44336", "Authentication failed");
   }
 
   toggleForm(pAllowSubmit) {

diff --git a/saltgui/static/scripts/routes/Minions.js b/saltgui/static/scripts/routes/Minions.js
@@ -25,8 +25,9 @@ export class MinionsRoute extends PageRoute {
         myThis._updateMinions(pData);
       }, pData2 => {
         const pData = {"return":[{}]};
-        for(const k of pData1.return[0].data.return.minions)
-          pData.return[0][k] = JSON.stringify(pData2);
+        if(pData1)
+          for(const k of pData1.return[0].data.return.minions)
+            pData.return[0][k] = JSON.stringify(pData2);
         myThis._updateMinions(pData);
       });
     }, pData => {

diff --git a/saltgui/static/stylesheets/login.css b/saltgui/static/stylesheets/login.css
@@ -63,29 +63,41 @@
   width: 25px;
 }
 
-.notice-wrapper {
-  height: 0;
-  overflow-y: hidden;
+#notice-wrapper {
   margin-bottom: 15px;
 }
 
-.notice-wrapper.show {
+#notice {
+  height: 0;
+  overflow-y: hidden;
+  color: white;
+  padding: 0;
+  border-radius: 2px;
+  text-align: center;
+  font-size: 15px;
   animation-name: show-notice;
   animation-iteration-count: 1;
   animation-duration: 5s;
 }
 
 @keyframes show-notice {
-  0% { height: 0; }
-  20% { height: 38px; }
-  80% { height: 38px; }
-  100% { height: 0; }
-}
+  0% {
+    height: 0;
+    padding: 0;
+  }
 
-.notice {
-  color: white;
-  padding: 9px 0;
-  border-radius: 2px;
-  text-align: center;
-  font-size: 15px;
+  20% {
+    height: 38px;
+    padding: 9px 0;
+  }
+
+  80% {
+    height: 38px;
+    padding: 9px 0;
+  }
+
+  100% {
+    height: 0;
+    padding: 0;
+  }
 }