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