plumes
Version:
Flying-fast Metro future vision components
167 lines (136 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plumes - Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/public/plumes/plumes-plumes.css" type="text/css" />
<style type="text/css">
.example-mask {
z-index: 99998;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
</style>
</head>
<body>
<rv-require
name="pl-layout-platform"
src="../public/layouts/pl-layout-platform"
data-bind-onloaded="onloaded"
data-bind-beforerequire="beforerequire"
data-bind-apps="apps"
>
<rv-partial target="mask-title">
Login <span class="accent">example</span>
</rv-partial>
<rv-partial target="message-title">
Login <span class="accent">example</span>
</rv-partial>
<rv-partial target="content">
<rv-require
name="pl-login"
src="../public/login/pl-login"
ondemand="pl-login"
data-text-question="Who are you?"
data-text-username="Email"
data-text-userpassword="Password"
></rv-require>
</rv-partial>
</rv-require>
<div class="example-mask"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
<script type="text/javascript" src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
<script type="text/javascript" src="/public/plumes/plumes.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.Ractive.Plumes.bootstrap(function(page) {
page.set('apps', [{
name: 'Plumes',
select: function() {
window.location.href = 'index.html';
}
}, {
name: 'Example Login',
selected: true,
select: function() {
window.location.href = 'login.html';
}
}, {
name: 'Example Lists',
select: function() {
window.location.href = 'lists.html';
}
}]);
function _validateEmail(email) {
return /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(email);
}
page.set('beforerequire', function(Layout, callback) {
Layout.require('pl-login').then(function() {
$('.pl-layout-mask').remove();
var Login = Layout.findChild('name', 'pl-login');
Login.on('username', function(args) {
if (args.username && _validateEmail(args.username)) {
var src = 'https://www.gravatar.com/avatar/' + window.md5(args.username) + '.png?s=140';
$('<img/>')
.load(function() {
Login.set('avatar', src);
})
.attr('src', src);
return;
}
Login.set('avatar', '');
});
Login.on('login', function(args) {
if (!args.username || !args.userpassword) {
return Login.fire('error', {
message: 'The password entered is incorrect.'
});
}
Login.fire('logged', 'Welcome back <strong class="accent">' + args.username + '</strong>');
});
Login.on('forgot', function(args) {
if (!_validateEmail(args.username)) {
return Login.fire('forgotError', {
message: 'Please give a valid email address.'
});
}
Login.fire('forgotSuccess');
});
Login.on('forgotCode', function(args) {
if (!args.code) {
return Login.fire('forgotCodeError', {
message: 'Please give a valid code.'
});
}
Login.fire('forgotCodeSuccess');
});
Login.on('forgotPassword', function(args) {
if (!args.password || args.password != args.confirmPassword) {
return Login.fire('forgotPasswordError', {
message: 'Please give valid passwords.'
});
}
Login.fire('forgotPasswordSuccess', {
message: 'Your new password is registered.'
});
});
Login.on('closed', callback);
});
});
page.set('onloaded', function() {
$('.example-mask').remove();
});
page.require();
});
})();
</script>
</body>
</html>