Add automatic login using console stored credentials

Fixes #86

src/main/webapp/modules/sign-in.html

@@ -6,11 +6,31 @@
     </div>
   </div>
 </div>
+
 <div class="row">
+  <div class="col-md-12 text-center">
+    <h3 class="sign-in-text">Sign in to your account</h3>    
+  </div>
+</div>
+<div class="row" ng-show="predefinedClients && !showLoginOther">
+  <div class="col-md-12 col-xs-12 text-center sign-in-users-list">
+    <div class="sign-in-users-list-scroll no-select" ng-click="prevUsers()" ng-class="{'sign-in-users-list-scroll-disabled': startUser === 0}" ng-show="predefinedClients.length > maxUsers"><i class="fa fa-chevron-left"></i></div>
+    <div ng-repeat="userClient in predefinedClients | orderBy:'login' | startFrom:startUser | limitTo:maxUsers" class="sign-in-user zoomIn animated clickable" ng-click="loginAs(userClient.login)">
+      <img src="resources/images/v2/user-blue.svg">
+      <h3>{{ userClient.login }}</h3>
+    </div>
+    <div class="sign-in-users-list-scroll no-select" ng-click="nextUsers()" ng-class="{'sign-in-users-list-scroll-disabled': startUser >= (predefinedClients.length - maxUsers)}" ng-show="predefinedClients.length > maxUsers"><i class="fa fa-chevron-right" class="sign-in-users-list-scroll"></i></div>
+  </div>
+  <div class="col-md-12 col-xs-12 text-center">
+    &nbsp;<br>
+    <a class="sign-in-link" href="" ng-click="showLoginOther = true">Sign in with another account</a>
+  </div>
+</div>
+
+<div class="row" ng-if="!predefinedClients || showLoginOther">
   <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12">
   <section class="login-form">
     <form role="login" name="loginForm" shake shakeit="shakeit">
-      <h3>Sign in to your account</h3>
       <div class="row">
         <div class="col-xs-12">
           <input type="text" name="username" placeholder="Username" class="form-control input-lg" ng-model="sip.username" ng-change="mirrorUsername()" required>
@@ -22,7 +42,7 @@ <h3>Sign in to your account</h3>
       <button type="submit" ng-click="connect()" ng-disabled="loginForm.$invalid">Sign in</button>
       <section style="color: #df3e00;" ng-show="registerFailed" ng-bind-html="loginError"></section>
       <section>
-        <a href="/#/numbers/clients">Forgot password?</a>
+        <a class="sign-in-link" href="/#/numbers/clients">Forgot password?</a>
       </section>
     </form>
   </section>

src/main/webapp/resources/css/olympus-v2.css

@@ -132,6 +132,10 @@
     border-radius: 4px 4px;
 }
 
+.chat-participant-block .avatar.contact-avatar i {
+    border-radius: 4px 4px;
+}
+
 .contact-space > div {
     cursor: pointer;
     font-size: 16px;

src/main/webapp/resources/css/olympus.css

@@ -121,17 +121,80 @@ form[role=login] > section {
   margin-top: 2em;
 }
 
-form[role=login] section a {
+.clickable {
+  cursor: pointer;
+}
+
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
+.sign-in-users-list {
+  margin: 25px 0;
+}
+
+.sign-in-user {
+  min-width: 150px;
+  color: #1f85ae;
+}
+
+.sign-in-user.ng-leave {
+  display: none;
+}
+
+.sign-in-users-list div {
+  display: inline-block;
+}
+
+.sign-in-users-list-scroll {
+  font-size: 5em;
+  vertical-align: text-bottom;
+  margin-bottom: 10px;
+  color: #1F85AE;
+  cursor: pointer;
+}
+
+.sign-in-users-list-scroll-disabled {
+  color: #E6E6E6;
+  cursor: auto;
+}
+
+a.sign-in-link {
   color: #a8a8a9;
 }
 
-form[role=login] h3 {
+.sign-in-text {
   font-size: 30px;
   font-weight: 300;
   font-family: lato;
   text-align: center;
   color: #6d6e70;
-  padding: 70px 0 12px 0;
+  padding: 50px 0 12px 0;
+}
+
+@media(max-width:768px) {
+  .sign-in-users-list-scroll {
+    font-size: 3em;
+  }
+
+  .sign-in-users-list {
+    margin: 25px 0;
+  }
+
+  .sign-in-user {
+    min-width: 100px;
+  }
+
+  .sign-in-user > img {
+    width: 50px;
+  }
+
 }
 
 form[role=login] input {

src/main/webapp/resources/js/controllers/sign-in.js

@@ -168,4 +168,47 @@ olyMod.controller('SignInCtrl', function ($scope, $rootScope, $location, $timeou
       });
   });
 
+  // Auto-login functionality, based on stored credentials
+
+  if (sessionStorage.sid && sessionStorage.auth_token) {
+    var auth_header = sessionStorage.sid + ":" + sessionStorage.auth_token;
+    auth_header = "Basic " + btoa(auth_header);
+    $http({
+      method: 'GET',
+      url: '/restcomm/2012-04-24/Accounts/' + sessionStorage.sid + '/Clients.json',
+      headers: {
+        'Authorization': auth_header
+      },  
+    }).then(
+      function successCallback(response) {
+        $scope.predefinedClients = response.data;
+      },
+      function errorCallback(response) {
+        // noop
+      });
+  }
+
+  $scope.loginAs = function(login) {
+    $scope.sip.username = login;
+    $scope.mirrorUsername();
+    angular.forEach($scope.predefinedClients, function(client) {
+      if (client.login === login) {
+        $scope.sip.password = client.password;
+      }
+    });
+    $timeout(function() {
+      $scope.connect();
+    });
+  }
+
+  $scope.startUser = 0;
+  $scope.maxUsers = 3;
+
+  $scope.nextUsers = function() {
+    $scope.startUser = Math.min($scope.predefinedClients.length - $scope.maxUsers, $scope.startUser + $scope.maxUsers);
+  }
+
+  $scope.prevUsers = function() {
+    $scope.startUser = Math.max(0, $scope.startUser - $scope.maxUsers);
+  }
 });