Angular Login

Blueprint for login screens using angularjs.

by Korah Babu Varghese

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div id="loginContainer" ng-app="login">
    <form id="loginForm" login >
        <div id="loginHeader">
            <h3> Login </h3>
        </div>
        <input type='text' ng-model='username' enter-next placeholder=" Username" required/>                    
        <br>
        <input type='password' ng-model='password' placeholder=" Password" required>
        <br>
         <div id="loginFooter">
             <input type='submit' />
         </div>
    </form>
</div>

CSS

#loginForm input:focus {
    outline: 2px solid rgba(0, 0, 0, .1);
}

#loginForm .ng-dirty.ng-valid {
    border:1px solid green;
}

#loginForm .ng-dirty.ng-invalid {
    border:1px solid Red;
}

#loginContainer {
    width: 50%;
    margin:5% 0 0 25%;
    background-color: #e5ebff;
}

#loginFooter, #loginHeader{
    padding:3%;
    background-color: #363636;
}

#loginHeader {
    border-bottom: 1px solid #c9c8c5;
    text-align: left;
    color: white;
}

#loginHeader > h3 {
    font-size:2em;
    font-family: Garamond;
    font-weight: 900;
    letter-spacing: 5px;
}

#loginFooter {
    text-align: right;
}

#loginForm > input:not([type='submit']){
    margin: 5% 0 5% 3.5%;
    border: 1px solid #ededed;
    border-radius: 1px;
    padding: 4%;
    width: 85%;
}

#loginFooter > input[type='submit'] {
    padding: 2% 4% 2% 4%;
    cursor: pointer;
    border:1px solid white !important;
    text-decoration:none !important;
    font-family:helvetica !important;
    color:white !important;
    background:url(../images/btn_hover.png) repeat-x !important;
}

#loginFooter > input[type='submit']:hover {
    border:1px solid #7A7A7A !important;
    color: #7A7A7A !important;
}

JavaScript

var app = angular.module('login', []);

app.directive('enterNext', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {

      elem.bind('keydown', function(e) {
        var code = e.keyCode || e.which;
        if (code === 13) {
          e.preventDefault();
          elem.nextAll('input').first().focus();
        }
      });
        
    }
  }
})
.directive('login', function($http, $rootScope) {
  return {
    restrict: 'A',
 	link: function(scope, elem, attrs) {

 	  elem.bind('submit', function() {

		var user_data = {
		  "username": scope.username,
		  "password": scope.password,
		};
        
        alert("You just logged in");

      });

 	}
  }
 });