Componente login

@salix/core/src/login/login.html

@@ -0,0 +1,25 @@
+<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>

@salix/core/src/login/login.js

@@ -0,0 +1,88 @@
+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);
+

@salix/core/src/login/login.scss

@@ -0,0 +1,47 @@
+
+.vn-login
+{
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	color: #333;
+	font-size: 1.1em;
+	font-weight: normal;
+	background-color: #EEE;
+
+	.box-wrapper
+	{
+		position: relative;
+		max-width: 20em;
+		margin: auto;
+		height: inherit;
+	}
+	.box
+	{
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		width: 100%;
+		height: 18em;
+		margin-top: -9em;
+		padding: 1em;
+		background-color: white;
+		box-shadow: 0 0 .3em 0 rgba(1,1,1,.4);
+		border-radius: .1em;
+	}
+	.footer
+	{
+		margin-top: 1em;
+		margin-left: 3em;
+		text-align: center;
+	}
+	input[type=submit]
+	{
+		display: inline;
+	}
+}
+
+@media (max-height: 50em){}
+

@salix/core/src/password/password.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'password';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/password/password.mt.html

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

@salix/core/src/password/password.mt.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import template from './password.mt.html';
+
+export const NAME = 'vnPasswordmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            label: 'Password',
+            name: 'password',
+            enabled: 'enabled',
+            className: 'mdl-textfield__input'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/snackbar/snackbar.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'snackbar';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/snackbar/snackbar.mt.html

@@ -0,0 +1,4 @@
+<div class="*[className]*">
+	<div class="mdl-snackbar__text"></div>
+	<button class="mdl-snackbar__action" type="button"></button>
+</div>

@salix/core/src/snackbar/snackbar.mt.js

@@ -0,0 +1,16 @@
+import {module} from '../module';
+import template from './snackbar.mt.html';
+
+export const NAME = 'vnSnackbarmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+        	message: 'Default message',
+            className: 'mdl-js-snackbar mdl-snackbar'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/spinner/spinner.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'spinner';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/spinner/spinner.mt.html

@@ -0,0 +1,2 @@
+<div class="*[className]*">
+</div>

@salix/core/src/spinner/spinner.mt.js

@@ -0,0 +1,15 @@
+import {module} from '../module';
+import template from './spinner.mt.html';
+
+export const NAME = 'vnSpinnermtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            className: 'mdl-spinner mdl-spinner--single-color mdl-js-spinner'
+        }
+    }
+}
+
+module.factory(NAME, factory);

@salix/core/src/submit/submit.js

@@ -0,0 +1,18 @@
+import {module} from '../module';
+import * as resolveFactory from '../resolveDefaultComponents';
+import * as util from '../util';
+
+const _NAME = 'submit';
+export const NAME = util.getName(_NAME);
+
+directive.$inject =[resolveFactory.NAME];
+export function directive (resolve){
+    return{
+        require:'E',
+        template: function(_,attr){
+           return resolve.getTemplate(_NAME, attr);
+        }
+    }
+}
+
+module.directive(NAME,directive);

@salix/core/src/submit/submit.mt.html

@@ -0,0 +1,2 @@
+<input type="submit" class="*[className]*" value="*[text]*" *[enabled]*>
+</input>

@salix/core/src/submit/submit.mt.js

@@ -0,0 +1,17 @@
+import {module} from '../module';
+import template from './submit.mt.html';
+
+export const NAME = 'vnSubmitmtFactory';
+
+export function factory() {
+    return {
+        template: template,
+        default: {
+            text: 'Submit',
+            className: 'mdl-button mdl-js-button mdl-button--raised',
+            enabled: 'true'
+        }
+    }
+}
+
+module.factory(NAME, factory);

login.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="UTF-8">
+    <title>Salix</title>    
+</head>
+<body>
+	<vn-login id="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">
+	</script>
+</body>
+</html>