]>
Commit | Line | Data |
---|---|---|
1 | var Api = require('./api.js').Api; | |
2 | var App = require('./app.js'); | |
3 | var classNames = require('classnames'); | |
4 | ||
5 | var OtpQrCode = React.createClass({ | |
6 | render: function() { | |
7 | return ( | |
8 | <div> | |
9 | <img src={this.props.img} /> | |
10 | <p>{this.props.secret}</p> | |
11 | </div> | |
12 | ); | |
13 | } | |
14 | }); | |
15 | ||
16 | module.exports.OtpEnrollForm = React.createClass({ | |
17 | getInitialState: function() { | |
18 | return {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''}; | |
19 | }, | |
20 | handleSubmit: function(e) { | |
21 | Api.Call('OTP_VALIDATE', {'pass': this.state.pass}, function(err, status, data) { | |
22 | if (err) { | |
23 | console.error(err, data); | |
24 | this.displayMessage(App.errorCodeToMessage(err.code), false); | |
25 | return; | |
26 | } | |
27 | ||
28 | this.displayMessage('OK', true); | |
29 | this.props.onSuccess(data.token); | |
30 | ||
31 | }.bind(this)); | |
32 | ||
33 | e.preventDefault(); | |
34 | }, | |
35 | handlePassChange: function(event) { | |
36 | this.setState({'pass': event.target.value}); | |
37 | }, | |
38 | hideMessage: function() { | |
39 | this.setState({'hideMsg': true}); | |
40 | }, | |
41 | displayMessage: function(msg, ok) { | |
42 | this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false}); | |
43 | }, | |
44 | render: function() { | |
45 | var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk}); | |
46 | var qrCode = null; | |
47 | ||
48 | if (this.props.img) { | |
49 | qrCode = ( | |
50 | <div className='row justify-content-center'> | |
51 | <OtpQrCode img={this.props.img} secret={this.props.secret} /> | |
52 | </div> | |
53 | ); | |
54 | } | |
55 | return ( | |
56 | <div className='row otp-enroll justify-content-center'> | |
57 | <div className='col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10'> | |
58 | {qrCode} | |
59 | <div className='row justify-content-center'> | |
60 | <form role='form' onSubmit={this.handleSubmit}> | |
61 | <input className='form-control' type='pass' placeholder='pass' onChange={this.handlePassChange} /> | |
62 | <input className='form-control submit' type='submit' value='Validate' /> | |
63 | <div className={cName} ref='message'>{this.state.msg}</div> | |
64 | </form> | |
65 | </div> | |
66 | </div> | |
67 | </div> | |
68 | ); | |
69 | } | |
70 | }); |