Login como modulo aparte
This commit is contained in:
parent
e1374fdd3f
commit
5bb13af69d
|
@ -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';
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,[]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
export * from './src/login'
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"name": "@salix/login",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://git.verdnatura.es:/salix"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
export * from './module'
|
||||
|
||||
export {NAME as LOGIN, COMPONENT as LOGIN_COMPONENT} from './login/login'
|
||||
|
|
@ -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>
|
|
@ -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);
|
||||
|
|
@ -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){}
|
||||
|
|
@ -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]);
|
||||
|
11
login.html
11
login.html
|
@ -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>
|
||||
|
|
|
@ -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'),
|
||||
|
|
Loading…
Reference in New Issue