author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-08-30 15:56:53 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-08-30 21:23:42 (UTC) |
commit | 20bea94ab6b91c85b171dcf86baba0a64169d508 (patch) (unidiff) | |
tree | 6e38e91498dcdb861620eba1e237d1026fe79cc5 /frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js | |
parent | bde3c7b98523112ade9c5bbf7390c4ecb494cd2e (diff) | |
download | clipperz-20bea94ab6b91c85b171dcf86baba0a64169d508.zip clipperz-20bea94ab6b91c85b171dcf86baba0a64169d508.tar.gz clipperz-20bea94ab6b91c85b171dcf86baba0a64169d508.tar.bz2 |
First release of /delta version
Diffstat (limited to 'frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js b/frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js new file mode 100644 index 0000000..2b5b4a4 --- a/dev/null +++ b/frontend/delta/js/Clipperz/PM/UI/Components/LoginForm.js | |||
@@ -0,0 +1,150 @@ | |||
1 | /* | ||
2 | |||
3 | Copyright 2008-2013 Clipperz Srl | ||
4 | |||
5 | This file is part of Clipperz, the online password manager. | ||
6 | For further information about its features and functionalities please | ||
7 | refer to http://www.clipperz.com. | ||
8 | |||
9 | * Clipperz is free software: you can redistribute it and/or modify it | ||
10 | under the terms of the GNU Affero General Public License as published | ||
11 | by the Free Software Foundation, either version 3 of the License, or | ||
12 | (at your option) any later version. | ||
13 | |||
14 | * Clipperz is distributed in the hope that it will be useful, but | ||
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | ||
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | ||
17 | See the GNU Affero General Public License for more details. | ||
18 | |||
19 | * You should have received a copy of the GNU Affero General Public | ||
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | ||
21 | |||
22 | */ | ||
23 | |||
24 | Clipperz.PM.UI.Components.LoginForm = React.createClass({ | ||
25 | |||
26 | getDefaultProps: function () { | ||
27 | return { | ||
28 | mode: 'CREDENTIALS', | ||
29 | isNewUserRegistrationAvailable: false, | ||
30 | disabled: false, | ||
31 | template: Clipperz.PM.UI.Components.PageTemplate | ||
32 | } | ||
33 | }, | ||
34 | |||
35 | propTypes: { | ||
36 | mode: React.PropTypes.oneOf(['CREDENTIALS','PIN']), | ||
37 | isNewUserRegistrationAvailable:React.PropTypes.bool, | ||
38 | disabled: React.PropTypes.bool, | ||
39 | template: React.PropTypes.func | ||
40 | }, | ||
41 | |||
42 | getInitialState: function () { | ||
43 | return { | ||
44 | username: '', | ||
45 | passphrase: '', | ||
46 | pin: '' | ||
47 | }; | ||
48 | }, | ||
49 | |||
50 | //========================================================================= | ||
51 | |||
52 | handleChange: function (anEvent) { | ||
53 | varrefs = this.refs; | ||
54 | var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0]; | ||
55 | var newState = {}; | ||
56 | |||
57 | newState[refName] = event.target.value; | ||
58 | this.setState(newState); | ||
59 | }, | ||
60 | |||
61 | //========================================================================= | ||
62 | |||
63 | handleCredentialSubmit: function (event) { | ||
64 | event.preventDefault(); | ||
65 | |||
66 | this.refs['passphrase'].getDOMNode().blur(); | ||
67 | |||
68 | var credentials = { | ||
69 | 'username': this.refs['username'].getDOMNode().value, | ||
70 | 'passphrase': this.refs['passphrase'].getDOMNode().value | ||
71 | } | ||
72 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'doLogin', credentials); | ||
73 | }, | ||
74 | |||
75 | handleRegistrationLinkClick: function (event) { | ||
76 | event.preventDefault(); | ||
77 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'showRegistrationForm'); | ||
78 | }, | ||
79 | |||
80 | //------------------------------------------------------------------------- | ||
81 | |||
82 | shouldEnableLoginButton: function () { | ||
83 | var result; | ||
84 | |||
85 | return( | ||
86 | ((this.state['username'] != '') && (this.state['passphrase'] != '')) | ||
87 | || | ||
88 | (this.state['pin'] != '') | ||
89 | ) && !this.props['disabled']; | ||
90 | }, | ||
91 | |||
92 | |||
93 | loginForm: function () { | ||
94 | registrationLink =React.DOM.div({'className':'registrationLink'}, [ | ||
95 | React.DOM.a({'onClick':this.handleRegistrationLinkClick}, "Need an account") | ||
96 | ]); | ||
97 | returnReact.DOM.div({'className':'loginForm credentials'},[ | ||
98 | React.DOM.form({onChange: this.handleChange, onSubmit:this.handleCredentialSubmit}, [ | ||
99 | React.DOM.div(null,[ | ||
100 | React.DOM.label({'for':'name'}, "username"), | ||
101 | React.DOM.input({'type':'text', 'name':'name', 'ref':'username', 'placeholder':"username", 'key':'username', 'autoCapitalize':'none'}), | ||
102 | React.DOM.label({'for':'passphrase'}, "passphrase"), | ||
103 | React.DOM.input({'type':'password', 'name':'passphrase', 'ref':'passphrase', 'placeholder':"passphrase", 'key':'passphrase'}) | ||
104 | ]), | ||
105 | React.DOM.button({'type':'submit', 'disabled':!this.shouldEnableLoginButton(), 'className':'button'}, "login") | ||
106 | ]), | ||
107 | this.props.isNewUserRegistrationAvailable ? registrationLink : null | ||
108 | ]); | ||
109 | }, | ||
110 | |||
111 | handlePINSubmit: function (event) { | ||
112 | event.preventDefault(); | ||
113 | |||
114 | this.refs['pin'].getDOMNode().blur(); | ||
115 | |||
116 | var credentials = { | ||
117 | pin: this.refs['pin'].getDOMNode().value | ||
118 | } | ||
119 | |||
120 | MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'doLogin', credentials); | ||
121 | }, | ||
122 | |||
123 | pinForm: function () { | ||
124 | returnReact.DOM.div({'className':'loginForm pin'},[ | ||
125 | React.DOM.form({onChange: this.handleChange, onSubmit:this.handlePINSubmit}, [ | ||
126 | React.DOM.div(null,[ | ||
127 | React.DOM.label({'for':'pin'}, "pin"), | ||
128 | React.DOM.input({'type':'text', 'name':'pin', 'ref':'pin', placeholder:"PIN", 'key':'pin', 'autocapitalize':'none'}) | ||
129 | ]), | ||
130 | React.DOM.button({'type':'submit', 'disabled':this.props.disabled, 'className':'button'}, "login") | ||
131 | ]) | ||
132 | ]); | ||
133 | }, | ||
134 | |||
135 | setInitialFocus: function () { | ||
136 | if (this.props.mode == 'PIN') { | ||
137 | this.refs['pin'].getDOMNode().select(); | ||
138 | } else { | ||
139 | if (this.refs['username'].getDOMNode().value == '') { | ||
140 | this.refs['username'].getDOMNode().focus(); | ||
141 | } else{ | ||
142 | this.refs['passphrase'].getDOMNode().select(); | ||
143 | } | ||
144 | } | ||
145 | }, | ||
146 | |||
147 | render: function() { | ||
148 | returnnew this.props.template({'innerComponent': this.props.mode == 'PIN' ? this.pinForm() : this.loginForm()}); | ||
149 | } | ||
150 | }); | ||