Unclear message on incorrect credentials

app/components/authenticate/authenticate.component.html

@@ -18,7 +18,7 @@ <h1>VisualGit</h1>
 
     <br>
     <div>
-      <button type="submit" style="width:280px;" class="btn btn-success" (click)="switchToMainPanel()">Sign In</button>
+      <button id="signinbut" type="submit" style="width:280px;" class="btn btn-success" (click)="switchToMainPanel()">Sign In</button>
       <br>
     </div>
 

app/components/graphPanel/graph.panel.component.html

@@ -23,6 +23,9 @@ <h4 class="modal-title">Merge branches</h4>
           <button type="button" class="btn btn-primary" (click)="mergeBranches()" data-dismiss="modal">Yes</button>
           <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
         </div>
+        <div>
+          <img id="img" src='#'>
+        </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div>

app/misc/authenticate.ts

@@ -119,7 +119,22 @@ function getUserInfo(callback) {
   var ghme = client.me();
   ghme.info(function(err, data, head) {
     if (err) {
-      displayModal(err);
+        if (err == "Error: Bad credentials" || "Error: Requires authentication"){
+          $('#username').css('border-color', 'red');
+          $('#password').css('border-color', 'red');
+          var username = document.getElementById('username');
+          var password = document.getElementById('password');
+          username.classList.add('error');
+          password.classList.add('error');
+
+          // remove the class after the animation completes
+          setTimeout(function() {
+              username.classList.remove('error');
+              password.classList.remove('error');
+          }, 300);
+        }else{
+          displayModal(err);
+        }
     } else {
      // assigning the check box to a variable to check the value
     let rememberLogin: any = (<HTMLInputElement>document.getElementById("rememberLogin"));
@@ -238,6 +253,9 @@ function cloneRepo() {
   $('#repo-modal').modal('hide');
 
   switchToMainPanel();
+  let butt = document.getElementById("cloneButton");
+  butt.innerHTML = 'Clone';
+  butt.setAttribute('class', 'btn btn-primary');
 }
 
 function signInOrOut() {

app/misc/repo.ts

@@ -71,6 +71,11 @@ function downloadFunc(cloneURL, fullLocalPath) {
         updateProgressBar(0);
         console.log("Repo successfully cloned");
         displayModal("Drawing graph, please wait");
+
+        // var src = "pexels-photo-414612.jpeg"
+        // var docs = document.getElementById("img");
+        // docs.setAttribute("src", src);
+
         refreshAll(repository);
         updateModalText("Clone Successful, repository saved under: " + fullLocalPath);
         addCommand("git clone " + cloneURL + " " + fullLocalPath);

app/misc/router.ts

@@ -29,6 +29,9 @@ function checkSignedIn() {
     $('#repo-name').removeAttr("data-target");
   } else {
     // Ensure repo modal is connected
+    let butt = document.getElementById("cloneButton");
+    butt.innerHTML = 'Clone';
+    butt.setAttribute('class', 'btn btn-primary');
     $('#repo-name').attr("data-target", "#repo-modal");
   }
 }

stylesheets/styles.css

@@ -1,3 +1,15 @@
+.error {
+  position: relative;
+  animation: shake .1s linear;
+  animation-iteration-count: 3;
+}
+
+@keyframes shake {
+  0% { left: -5px; }
+  100% { right: -5px; }
+}
+
+
 p, h1 {
   color: #ccc;
   font-family: 'Montserrat', sans-serif;