Login como modulo aparte

This commit is contained in:
Juan Ferrer Toribio 2016-11-04 11:03:40 +01:00
parent e1374fdd3f
commit 5bb13af69d
15 changed files with 111 additions and 138 deletions

View File

@ -35,5 +35,3 @@ export {NAME as SNACKBARMT,factory as snackbarmt} from './snackbar/snackbar.mt'
export {NAME as SPINNER,directive as SpinnerDirective} from './spinner/spinner'
export {NAME as SPINNERMT,factory as spinnermt} from './spinner/spinner.mt'
export {NAME as LOGIN, COMPONENT as LOGIN_COMPONENT} from './login/login';

View File

@ -1,25 +0,0 @@
<div class="vn-login">
<div class="box-wrapper">
<div class="box">
<form id="form" action="http://localhost:3000/login">
<div class="header">
<img src="image/banner.svg" alt=""/>
</div>
<div class="form-group">
<vn-textfield label="E-Mail" name="email"></vn-textfield>
</div>
<div class="form-group">
<vn-password label="Password" name="password"></vn-password>
</div>
<div>
<vn-check label="Do not close session" name="remember"></vn-check>
</div>
<div class="footer">
<vn-submit></vn-submit>
<vn-spinner id="spinner"></vn-spinner>
</div>
</form>
</div>
</div>
<vn-snackbar id="snackbar"/></vn-snackbar>
</div>

View File

@ -1,88 +0,0 @@
import {module} from '../module';
import template from './login.html';
import style from './login.scss';
export const COMPONENT = {
template: template,
controller: function () {
function $ (id) {
return document.getElementById (id);
}
var self = this;
$('form').onsubmit = function () {
self._onSubmit ();
return false;
};
this._onSubmit = function () {
var params = '';
var elements = $('form').elements;
for (var i = 0; i < elements.length; i++)
if (elements[i].name) {
if (params.length > 1)
params += '&';
params += elements[i].name +'='+
encodeURIComponent (elements[i].value);
}
var request = new XMLHttpRequest ();
request.open ('post', form.action, true);
request.setRequestHeader ('Content-Type',
'application/x-www-form-urlencoded');
request.onreadystatechange =
this._onLoginResponse.bind (this, request);
request.send (params);
$('spinner').firstChild.MaterialSpinner.start ();
};
this._onLoginResponse = function (request) {
$('spinner').firstChild.MaterialSpinner.stop ();
if (request.readyState !== 4)
return;
var data = null;
try {
var data = JSON.parse (request.responseText);
console.debug (data);
}
catch (e) {}
if (request.status == 200 && data)
{
sessionStorage.setItem ('token', data.accessToken);
window.location = 'index.html';
}
else
{
sessionStorage.setItem ('token', '');
var message;
switch (request.status)
{
case 401:
message = 'Invalid credentials';
break;
case 0:
message = 'Can\'t contact with server';
break;
default:
message = 'Something went wrong';
}
var snackbar = $('snackbar');
snackbar.firstChild.MaterialSnackbar.showSnackbar ({
message: message
});
}
}
}
};
module.component('vnLogin', COMPONENT);

View File

@ -1,4 +1,4 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="*[className]*" type="password" name="*[name]*" *[enabled]*>
<input class="*[className]*" type="password" name="*[name]*" ng-model="*[model]*" *[enabled]*>
<label class="mdl-textfield__label">*[label]*</label>
</div>

View File

@ -1,4 +1,4 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="*[className]*" type="*[type]*" name="*[name]*" *[enabled]*>
<input class="*[className]*" type="*[type]*" name="*[name]*" ng-model="*[model]*" *[enabled]*>
<label class="mdl-textfield__label">*[label]*</label>
</div>

View File

@ -1,12 +1,6 @@
import * as vendors from '@salix/vendor';
import * as core from '@salix/core';
//import {getModuleName,getVendorDependencies} from './util';
export const NAME = 'crud';
export const module = vendors.ng.module(NAME,[]);

1
@salix/login/index.js Normal file
View File

@ -0,0 +1 @@
export * from './src/login'

10
@salix/login/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "@salix/login",
"version": "0.0.0",
"description": "",
"main": "index.js",
"repository": {
"type": "git",
"url": "http://git.verdnatura.es:/salix"
}
}

View File

@ -0,0 +1,4 @@
export * from './module'
export {NAME as LOGIN, COMPONENT as LOGIN_COMPONENT} from './login/login'

View File

@ -0,0 +1,16 @@
<div class="vn-login">
<div class="box-wrapper">
<div class="box">
<form name="form" ng-submit="login.submit()">
<vn-textfield label="E-Mail" name="email" model="login.model.email"></vn-textfield>
<vn-password label="Password" name="password" model="login.model.password"></vn-password>
<vn-check label="Do not close session" name="remember"></vn-check>
<div class="footer">
<vn-submit></vn-submit>
<vn-spinner id="spinner"></vn-spinner>
</div>
</form>
</div>
</div>
<vn-snackbar id="snackbar"/></vn-snackbar>
</div>

View File

@ -0,0 +1,63 @@
import {module} from '../module'
import template from './login.html'
import style from './login.scss'
export const COMPONENT =
{
template: template,
controller: function ($http)
{
var self = this;
this.submit = function ()
{
$('spinner').firstChild.MaterialSpinner.start ();
var url = 'http://localhost:3000/login';
$http.post(url, this.model).then (
onLoginOk,
onLoginErr
);
};
function $ (id)
{
return document.getElementById (id);
}
function onLoginOk (response)
{
$('spinner').firstChild.MaterialSpinner.stop ();
sessionStorage.setItem ('token', response.data.accessToken);
window.location = 'index.html';
}
function onLoginErr (response)
{
$('spinner').firstChild.MaterialSpinner.stop ();
//self.model.password = '';
var message;
switch (response.status)
{
case 401:
message = 'Invalid credentials';
break;
case -1:
message = 'Can\'t contact with server';
break;
default:
message = 'Something went wrong';
}
var snackbar = $('snackbar');
snackbar.firstChild.MaterialSnackbar.showSnackbar ({
message: message
});
}
},
controllerAs:'login'
};
module.component('vnLogin', COMPONENT);

View File

@ -24,16 +24,16 @@
position: absolute;
top: 50%;
width: 100%;
height: 18em;
margin-top: -9em;
padding: 1em;
height: 20em;
margin-top: -10em;
padding: 2em;
background-color: white;
box-shadow: 0 0 .3em 0 rgba(1,1,1,.4);
border-radius: .1em;
}
.footer
{
margin-top: 1em;
margin-top: 1.5em;
margin-left: 3em;
text-align: center;
}
@ -43,5 +43,3 @@
}
}
@media (max-height: 50em){}

View File

@ -0,0 +1,6 @@
import * as vendors from '@salix/vendor';
import * as core from '@salix/core';
export const NAME = 'login';
export const module = vendors.ng.module(NAME,[core.NAME]);

View File

@ -4,16 +4,11 @@
<meta charset="UTF-8">
<title>Salix</title>
</head>
<body>
<vn-login id="login"></vn-login>
<body ng-app="login">
<vn-login></vn-login>
<script
type="text/javascript"
src="build/private/salix.routes.js">
</script>
<script
type="text/javascript"
src="build/public/salix.app.js"
selector="#login">
src="build/public/salix.login.js">
</script>
</body>
</html>

View File

@ -5,7 +5,8 @@ var path = require('path');
module.exports =
{
entry: {
'salix.app': ['@salix/app']
'salix.app': ['@salix/app'],
'salix.login': ['@salix/login']
},
output: {
path: path.join(__dirname, 'build', 'public'),