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 | 6 |
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 | |||
@@ -47,104 +47,104 @@ Clipperz.PM.UI.Components.LoginForm = React.createClass({ | |||
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 | }); |