Skip to content

Instantly share code, notes, and snippets.

@Dviejopomata

Dviejopomata/app.js

Created March 14, 2017 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Dviejopomata/2f5d9049d21cd13d7e13b050fc38f5aa to your computer and use it in GitHub Desktop.
Save Dviejopomata/2f5d9049d21cd13d7e13b050fc38f5aa to your computer and use it in GitHub Desktop.
Download ZIP
interceptor
Raw
app.js
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<body>
<div ng-app="app" class="container">
<div ng-controller="Principal">
<h4>Login</h4>
<form name="form" ng-submit="login()">
<div class="form-group" ng-class="{'has-error':form.usuario.$invalid}">
<label for="usuario" class="control-label">Usuario *</label>
<input type="text" class="form-control" name="usuario" ng-model="usuario" required>
<span ng-show="form.usuario.$invalid" class="help-block">El usuario es requerido</span>
</div>
<div class="form-group" ng-class="{'has-error':form.password.$invalid}">
<label for="password" class="control-label">Password *</label>
<input type="text" class="form-control" name="password" ng-model="password" required>
<span ng-show="form.usuario.$invalid" class="help-block">La password es requerida</span>
</div>
<p ng-show="usuarioValid === false && form.$submitted" class="text-danger">La combinacion de usuario/password no existe.</p>
<button class="btn btn-primary" type="submit">Entrar</button>
</form>
</div>
</div>
<script>
var app = angular.module('app', []);
app.constant('apiConfig', {
host: "localhost",
port: 3000
})
app.factory("api", ["apiConfig", "$http", (apiConfig, $http) => {
return {
post: (url, data, baseUrl = '/api') => {
return $http.post("http://" + apiConfig.host + ":" + apiConfig.port + baseUrl + url, data, {
withCredentials: true,
transformRequest: (obj) => {
var str = Object.keys(obj)
.map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]))
.join("&");
return str;
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}
}
}]);
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('HeaderAuthInterceptor');
});
app.factory('HeaderAuthInterceptor', ['$q', '$location', (config) => {
return {
'request': (config) => {
var token = JSON.parse(localStorage.getItem('token_auth'));
if (token) {
config.headers.Authorization = `Bearer ${token.access_token}`;
}
return config;
}
};
}]);
app.controller("Principal", ['$scope', '$http',
function ($scope, api) {
$scope.login = () => {
if ($scope.form.$valid) {
$http.post("http://localhost:3000/oauth/token", 'usuario=' + $scope.usuario + "&password=" + $scope.password, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then((response) => {
$scope.usuarioValid = true;
}).catch((error) => {
$scope.usuarioValid = false;
});
}
};
}]);
</script>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment