-
Notifications
You must be signed in to change notification settings - Fork 10
/
login-box.html
129 lines (111 loc) · 3.43 KB
/
login-box.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">
<!--
This element can be used for general purpose login boxes (identification
and password).
##### Example
<login-box></login-box>
@element login-box
@blurb Login box
@status alpha
@homepage https://github.com/Adracus/login-box
-->
<polymer-element name="login-box" attributes="heading identification">
<template>
<script type="text/javascript" src="web-animations.js"></script>
<link rel="stylesheet" href="login-box.css" />
<h2>{{heading}}</h2>
<content select="[top]"></content>
<content select="[identifierHeading]"></content>
<paper-input id="identifierInput" value="{{identifier}}" label="{{identification}}"></paper-input>
<content select="[passwordHeading]"></content>
<paper-input id="passwordInput" value="{{password}}" label="Password" type="password"></paper-input>
<paper-button id="submitbutton" raised on-click="{{validate}}">{{submit}}</paper-button>
<content select="[bottom]"></content>
</template>
<script>
Polymer('login-box', {
/**
* The `heading` attribute sets an initial heading
*
* @attribute heading
* @type string
* @default 'Login'
*/
heading: 'Login',
/**
* The `submit` attribute sets an initial submit
*
* @attribute submit
* @type string
* @default 'Login'
*/
submit: 'Login',
/**
* The `identification` attribute sets an initial identification.
*
* @attribute identification
* @type string
* @default 'Username'
*/
identification: 'Username',
/**
* The `identifier` attribute sets an initial identifier.
*
* @attribute identifier
* @type string
* @default ''
*/
identifier: "",
/**
* The `password` attribute sets an initial password.
*
* @attribute password
* @type string
* @default ''
*/
password: "",
validate: function() {
this.$.identifierInput.invalid = !!!this.identifier;
this.$.passwordInput.invalid = !!!this.password;
if (!this.password || !this.password) return this.shake();
this.fireLoginTry();
},
/**
* The `shake` method will shake this element (negative behaviour).
*
* @method shake
*/
shake: function() {
var animation = new Animation(this, [
{transform: "translateX(-10px)"},
{transform: "translateX(10px)"}
], {
direction: "alternate", duration: 50, iterations: 3
});
document.timeline.play(animation);
},
/**
* The `login-box-login-try` event is fired whenever we
* call fireLoginTry
*
* @event login-box-login-try
* @param {Object} detail
* @param {string} detail.identifier The identifying value (e.g. username)
* @param {string} detail.password The password value
*/
/**
* The `fireLoginTry` method will fire the login try event.
*
* @method fireLoginTry
*/
fireLoginTry: function() {
this.fire('login-box-login-try', {
identifier: this.identifier,
password: this.password
});
}
});
</script>
</polymer-element>