Angular JS and Bootstrap 3 Login Form Demo.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div class="row text-left"> <div class="col-md-6 col-md-offset-3"> <form role="form" name="loginForm" ng-submit="login()" ng-class="{submitted:submitted}" novalidate> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" name="username" id="username" ng-model="credentials.username" placeholder="Username" required /> <span class="error" ng-show="(loginForm.username.$dirty || submitted) && loginForm.username.$error.required">This is a required field.</span> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" name="password" id="password" ng-model="credentials.password" placeholder="Password" required /> <span class="error" ng-show="(loginForm.password.$dirty || submitted) && loginForm.password.$error.required">This is a required field.</span> </div> <div class="form-group"> <button type="submit" class="btn btn-primary pull-right" value="Login" title="Login">Login</button> <!-- ng-disabled="!loginForm.$valid" --> </div> <p><a href="/forgot">Forgot password</a></p> </form> </div> </div> |
login.js ng-controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
define(['app'], function (app) { 'use strict'; app.controller('Login', ['$scope', '$auth', '$location' , function ($scope, $auth, $location) { $scope.submitted = false; $scope.login = function () { if ($scope.loginForm.$valid) { // Submit as normal console.log('submitting form...'); $auth.login($scope.credentials); } else { console.log('form invalid!'); $scope.submitted = true; } } }); |
form.less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
form { input { &.ng-invalid { &.ng-dirty { border: 1px solid red; } } &.ng-valid { border: 1px solid green; } } span { &.error { padding: 5px; display: inline-block; font-size: 0.8em; color: red; } } &.submitted { input { &.ng-invalid { border: 1px solid red; } } } } |
simple and nice login form.