UNPKG

4.67 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>Plumes - Login</title>
6
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <link rel="stylesheet" href="/public/plumes/plumes-plumes.css" type="text/css" />
9 <style type="text/css">
10 .example-mask {
11 z-index: 99998;
12 position: fixed;
13 top: 0;
14 left: 0;
15 right: 0;
16 bottom: 0;
17 background: #fff;
18 }
19 </style>
20</head>
21<body>
22
23 <rv-require
24 name="pl-layout-platform"
25 src="../public/layouts/pl-layout-platform"
26
27 data-bind-onloaded="onloaded"
28 data-bind-beforerequire="beforerequire"
29 data-bind-apps="apps"
30 >
31 <rv-partial target="mask-title">
32 Login <span class="accent">example</span>
33 </rv-partial>
34 <rv-partial target="message-title">
35 Login <span class="accent">example</span>
36 </rv-partial>
37 <rv-partial target="content">
38
39 <rv-require
40 name="pl-login"
41 src="../public/login/pl-login"
42 ondemand="pl-login"
43
44 data-text-question="Who are you?"
45 data-text-username="Email"
46 data-text-userpassword="Password"
47 ></rv-require>
48
49 </rv-partial>
50 </rv-require>
51
52 <div class="example-mask"></div>
53
54 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
55 <script type="text/javascript" src="http://cdn.ractivejs.org/latest/ractive.js"></script>
56 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ractive-require/0.5.4/ractive-require.js"></script>
57 <script type="text/javascript" src="http://www.myersdaily.org/joseph/javascript/md5.js"></script>
58 <script type="text/javascript" src="/public/plumes/plumes.js"></script>
59
60 <script type="text/javascript">
61 (function() {
62 'use strict';
63
64 window.Ractive.Plumes.bootstrap(function(page) {
65
66 page.set('apps', [{
67 name: 'Plumes',
68 select: function() {
69 window.location.href = 'index.html';
70 }
71 }, {
72 name: 'Example Login',
73 selected: true,
74 select: function() {
75 window.location.href = 'login.html';
76 }
77 }, {
78 name: 'Example Lists',
79 select: function() {
80 window.location.href = 'lists.html';
81 }
82 }]);
83
84 function _validateEmail(email) {
85 return /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i.test(email);
86 }
87
88 page.set('beforerequire', function(Layout, callback) {
89 Layout.require('pl-login').then(function() {
90 $('.pl-layout-mask').remove();
91
92 var Login = Layout.findChild('name', 'pl-login');
93
94 Login.on('username', function(args) {
95 if (args.username && _validateEmail(args.username)) {
96 var src = 'https://www.gravatar.com/avatar/' + window.md5(args.username) + '.png?s=140';
97
98 $('<img/>')
99 .load(function() {
100 Login.set('avatar', src);
101 })
102 .attr('src', src);
103
104 return;
105 }
106
107 Login.set('avatar', '');
108 });
109
110 Login.on('login', function(args) {
111 if (!args.username || !args.userpassword) {
112 return Login.fire('error', {
113 message: 'The password entered is incorrect.'
114 });
115 }
116
117 Login.fire('logged', 'Welcome back <strong class="accent">' + args.username + '</strong>');
118 });
119
120 Login.on('forgot', function(args) {
121 if (!_validateEmail(args.username)) {
122 return Login.fire('forgotError', {
123 message: 'Please give a valid email address.'
124 });
125 }
126
127 Login.fire('forgotSuccess');
128 });
129
130 Login.on('forgotCode', function(args) {
131 if (!args.code) {
132 return Login.fire('forgotCodeError', {
133 message: 'Please give a valid code.'
134 });
135 }
136
137 Login.fire('forgotCodeSuccess');
138 });
139
140 Login.on('forgotPassword', function(args) {
141 if (!args.password || args.password != args.confirmPassword) {
142 return Login.fire('forgotPasswordError', {
143 message: 'Please give valid passwords.'
144 });
145 }
146
147 Login.fire('forgotPasswordSuccess', {
148 message: 'Your new password is registered.'
149 });
150 });
151
152 Login.on('closed', callback);
153 });
154 });
155
156 page.set('onloaded', function() {
157 $('.example-mask').remove();
158 });
159
160 page.require();
161 });
162
163 })();
164</script>
165</body>
166</html>