fliedonion/!AngularJS and Foundation login sample - summary.md

## !AngularJS and Foundation login sample - summary.md

      
    Raw
  

              !AngularJS and Foundation login sample - summary.md
            
          
Summary
Simple login form using angular.js and Foundation.


Env
angular-js Foundation


Note
Sample codes written using jsbin


## angular_foundation_login_sample.js
var app = angular.module('app', []);

app.controller('MainCtrl', function(UserLoginFactory){

  var vm = this;
  vm.login = login;
  vm.logout = logout;


  function login(username, password){
    UserLoginFactory.login(username, password).then(
      function(response){
        vm.text = "You are logged in.";
        vm.loginError = null;
        console.log('login' + response.data);
      },

      function(reponse){
        vm.loginError = reponse.data;
        console.log('error : ' + reponse.data);
      }
    );
  }

  function logout(){
    vm.text = null;
  }


});


app.factory('UserLoginFactory', function($q){

  return {
    login: loginDummy
  };

  // sample login
  // username == password then success.
  function loginDummy(username, password){
    var defer = $q.defer();

    var un = username;
    var pw = password;

    // dummy like simulate asynchrocous http call
    setTimeout(function(){

      if(!un || !pw){
        console.log('reject');
        defer.reject({status: 401, data: 'username and password must be specified.'});
        return;
      }

      if(un == pw){
        defer.resolve({ status: 200, data: 'authorized' });
        return;
      }

      defer.reject({ status: 401, data: "username not equal password."});
      return;
    }, 2000);


    return defer.promise;
  }
});

## index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div ng-app="app" ng-controller="MainCtrl as vm">
    <div ng-show="vm.text">
      <pre ng-bind="vm.text"></pre>
      <button ng-click="vm.logout()">logout</button>
    </div>

    <div ng-hide="vm.text">
      <form ng-submit="vm.login(vm.username, vm.password)">
        <fieldset>
          <div class="row">
            <label>username :</label>
            <input type="text" ng-model="vm.username">
          </div>
          <div class="row">
            <label>password</label>
            <input type="text" ng-model="vm.password">
          </div>
          <div class="row">
            <div class="right">
              <button type="submit">login</button>
            </div>
          </div>
          <div class="row" ng-hide="!vm.loginError">
            <span class="error">{{vm.loginError}}</span>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

</body>
</html>

Summary	Simple login form using angular.js and Foundation.
Env	`angular-js` `Foundation`
Note	Sample codes written using jsbin
	var app = angular.module('app', []);

	app.controller('MainCtrl', function(UserLoginFactory){

	var vm = this;
	vm.login = login;
	vm.logout = logout;


	function login(username, password){
	UserLoginFactory.login(username, password).then(
	function(response){
	vm.text = "You are logged in.";
	vm.loginError = null;
	console.log('login' + response.data);
	},

	function(reponse){
	vm.loginError = reponse.data;
	console.log('error : ' + reponse.data);
	}
	);
	}

	function logout(){
	vm.text = null;
	}


	});


	app.factory('UserLoginFactory', function($q){

	return {
	login: loginDummy
	};

	// sample login
	// username == password then success.
	function loginDummy(username, password){
	var defer = $q.defer();

	var un = username;
	var pw = password;

	// dummy like simulate asynchrocous http call
	setTimeout(function(){

	if(!un \|\| !pw){
	console.log('reject');
	defer.reject({status: 401, data: 'username and password must be specified.'});
	return;
	}

	if(un == pw){
	defer.resolve({ status: 200, data: 'authorized' });
	return;
	}

	defer.reject({ status: 401, data: "username not equal password."});
	return;
	}, 2000);


	return defer.promise;
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/normalize.min.css" rel="stylesheet" type="text/css" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div ng-app="app" ng-controller="MainCtrl as vm">
	<div ng-show="vm.text">
	<pre ng-bind="vm.text"></pre>
	<button ng-click="vm.logout()">logout</button>
	</div>

	<div ng-hide="vm.text">
	<form ng-submit="vm.login(vm.username, vm.password)">
	<fieldset>
	<div class="row">
	<label>username :</label>
	<input type="text" ng-model="vm.username">
	</div>
	<div class="row">
	<label>password</label>
	<input type="text" ng-model="vm.password">
	</div>
	<div class="row">
	<div class="right">
	<button type="submit">login</button>
	</div>
	</div>
	<div class="row" ng-hide="!vm.loginError">
	<span class="error">{{vm.loginError}}</span>
	</div>
	</fieldset>
	</form>
	</div>
	</div>

	</body>
	</html>