Cinemacloud/angular-material-login-form-model.markdown

## angular-material-login-form-model.markdown

      
    Raw
  

              angular-material-login-form-model.markdown
            
          
    Angular Material Login Form  ( Model )

A Pen by Mohamed Attia on CodePen.
License.

  
## index.html
<html lang="en" ng-app="LoginApp">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Angular Material style sheet -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>

<body ng-controller="navController as navController">

<!-- Login Button-->
<div>
<md-button layout-align-sm="left" class="md-fab md-primary" aria-label="Profile" ng-click="navController.showAdvanced($event)">
<md-icon><i class="material-icons">&#xE899;</i></md-icon>
</md-button>
</div>


<!--loginModal -->
<script type="text/ng-template" id="loginModal.tmpl.html">
<md-dialog aria-label="ITS - Portal LogIn" ng-controller="navController as navController">

<form ng-cloak name="loginform" autocomplete="off">

<md-toolbar>
<div class="md-toolbar-tools">
    <h2>Modal LogIn Form</h2>
    <span flex></span>
    <md-button class="md-icon-button" ng-click="close()">
        <i class="material-icons">highlight_off</i>
    </md-button>
</div>
</md-toolbar>

<md-dialog-content layout="row">

<div layout-padding>
    <img src="https://s22.postimg.org/pshxr4mnl/login.png" />
</div>

<div class="md-dialog-content">

    <md-input-container class="md-block">
        <label>User Name</label>
        <input type="text" ng-model="user.name" autocomplete="off">
    </md-input-container>

    <md-input-container class="md-block">
        <label>User Password</label>
        <input type="password" ng-model="user.password" autocomplete="nope">
    </md-input-container>

    <md-button class="md-raised md-primary md-button md-ink-ripple" ng-click="answer('LogIn')">
        LogIn
    </md-button>

    <md-button ng-click="answer('Cancel')">
        Cancel
    </md-button>

</div>
</md-dialog-content>

</form>
</md-dialog>
</script>

</body>

## script.js
angular.module("LoginApp", ['ngMaterial','modalModule'])


// modal module //
var modalModules = angular.module('modalModule',[]);

// modal Controller  //
modalModules.controller('navController', function ($mdDialog) {

    this.showAdvanced = function (ev) {
        $mdDialog.show({
            controller: navController2,
            templateUrl: 'loginModal.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: this.customFullscreen
        });

    };

    // modal con
    function navController2($scope, $mdDialog) {

        $scope.close = function () {
            $mdDialog.cancel();
        };
        $scope.hide = function () {
            $mdDialog.hide();
        };
        $scope.answer = function (answer) {
            $mdDialog.hide(answer);
        };
    }//end modal
});
	<html lang="en" ng-app="LoginApp">

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Angular Material requires Angular.js Libraries -->
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>

	<!-- Angular Material Library -->
	<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
	<!-- Angular Material style sheet -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
	</head>

	<body ng-controller="navController as navController">

	<!-- Login Button-->
	<div>
	<md-button layout-align-sm="left" class="md-fab md-primary" aria-label="Profile" ng-click="navController.showAdvanced($event)">
	<md-icon><i class="material-icons"></i></md-icon>
	</md-button>
	</div>


	<!--loginModal -->
	<script type="text/ng-template" id="loginModal.tmpl.html">
	<md-dialog aria-label="ITS - Portal LogIn" ng-controller="navController as navController">

	<form ng-cloak name="loginform" autocomplete="off">

	<md-toolbar>
	<div class="md-toolbar-tools">
	<h2>Modal LogIn Form</h2>
	<span flex></span>
	<md-button class="md-icon-button" ng-click="close()">
	<i class="material-icons">highlight_off</i>
	</md-button>
	</div>
	</md-toolbar>

	<md-dialog-content layout="row">

	<div layout-padding>
	<img src="https://s22.postimg.org/pshxr4mnl/login.png" />
	</div>

	<div class="md-dialog-content">

	<md-input-container class="md-block">
	<label>User Name</label>
	<input type="text" ng-model="user.name" autocomplete="off">
	</md-input-container>

	<md-input-container class="md-block">
	<label>User Password</label>
	<input type="password" ng-model="user.password" autocomplete="nope">
	</md-input-container>

	<md-button class="md-raised md-primary md-button md-ink-ripple" ng-click="answer('LogIn')">
	LogIn
	</md-button>

	<md-button ng-click="answer('Cancel')">
	Cancel
	</md-button>

	</div>
	</md-dialog-content>

	</form>
	</md-dialog>
	</script>

	</body>
	angular.module("LoginApp", ['ngMaterial','modalModule'])


	// modal module //
	var modalModules = angular.module('modalModule',[]);

	// modal Controller //
	modalModules.controller('navController', function ($mdDialog) {

	this.showAdvanced = function (ev) {
	$mdDialog.show({
	controller: navController2,
	templateUrl: 'loginModal.tmpl.html',
	parent: angular.element(document.body),
	targetEvent: ev,
	clickOutsideToClose: true,
	fullscreen: this.customFullscreen
	});

	};

	// modal con
	function navController2($scope, $mdDialog) {

	$scope.close = function () {
	$mdDialog.cancel();
	};
	$scope.hide = function () {
	$mdDialog.hide();
	};
	$scope.answer = function (answer) {
	$mdDialog.hide(answer);
	};
	}//end modal
	});