Angular Material Login

angular-material-login.markdown

Angular Material Login

A Pen by Bhadresh on CodePen.

License.

index.html

<div ng-app="App" ng-controller="AppCtrl" layout="row" layout-fill ng-cloak>
    <section layout="column" flex layout-align="center center" class="login">
        <md-card class="md-whiteframe-4dp">
            <md-toolbar>
                <div layout="column" layout-padding layout-align="center center">
                    <div>
                        <md-icon class="logo">home</md-icon>
                    </div>
                    <div class="md-headline md-padding">Login</div>
                </div>
            </md-toolbar>
            <md-card-content>
                <form name="login">
                    <md-input-container class="md-block">
                        <label for="email">Email</label>
                        <input type="email" name="email" ng-model="vm.email" required />
                    </md-input-container>
                    <md-input-container class="md-block">
                        <label for="password">Password</label>
                        <input type="password" name="password" ng-model="vm.password" required />
                    </md-input-container>
                    <md-input-container class="md-block">
                        <div layout="row" layout-align="center center">
                            <md-button class="md-raised md-accent" flex="50">Login</md-button>
                        </div>
                    </md-input-container>
                </form>
            </md-card-content>
        </md-card>
    </section>
</div>

script.js

angular
    .module('App', ['ngMaterial'])
    .config(function($mdThemingProvider) {
        $mdThemingProvider
            .theme('default')
            .primaryPalette('blue')
            .accentPalette('pink');
    })
    .controller('AppCtrl', function($scope, $mdSidenav) {
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };
    });

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

style.css

body {
    background-color: #EEEEEE;
}

.login md-card {
    width: 400px;
}

.login .logo {
    font-size: 48px;
    width: 48px;
    height: 48px;
}

styles

<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />