diff options
Diffstat (limited to 'cmd/web/js/otp.jsx')
-rw-r--r-- | cmd/web/js/otp.jsx | 72 |
1 files changed, 40 insertions, 32 deletions
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx index a0ee5cc..aecf032 100644 --- a/cmd/web/js/otp.jsx +++ b/cmd/web/js/otp.jsx | |||
@@ -1,9 +1,10 @@ | |||
1 | var Api = require('./api.js').Api; | 1 | import Api from './api.js'; |
2 | var App = require('./app.js'); | 2 | import App from './app.js'; |
3 | var classNames = require('classnames'); | 3 | import classNames from 'classnames'; |
4 | import React from 'react'; | ||
4 | 5 | ||
5 | var OtpQrCode = React.createClass({ | 6 | class OtpQrCode extends React.Component { |
6 | render: function() { | 7 | render = () => { |
7 | return ( | 8 | return ( |
8 | <div> | 9 | <div> |
9 | <img src={this.props.img} /> | 10 | <img src={this.props.img} /> |
@@ -11,13 +12,15 @@ var OtpQrCode = React.createClass({ | |||
11 | </div> | 12 | </div> |
12 | ); | 13 | ); |
13 | } | 14 | } |
14 | }); | 15 | } |
15 | 16 | ||
16 | module.exports.OtpEnrollForm = React.createClass({ | 17 | class OtpEnrollForm extends React.Component { |
17 | getInitialState: function() { | 18 | constructor(props) { |
18 | return {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''}; | 19 | super(props); |
19 | }, | 20 | this.state = {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''}; |
20 | handleSubmit: function(e) { | 21 | } |
22 | |||
23 | handleSubmit = (e) => { | ||
21 | Api.Call('OTP_VALIDATE', {'pass': this.state.pass}, function(err, status, data) { | 24 | Api.Call('OTP_VALIDATE', {'pass': this.state.pass}, function(err, status, data) { |
22 | if (err) { | 25 | if (err) { |
23 | console.error(err, data); | 26 | console.error(err, data); |
@@ -31,40 +34,45 @@ module.exports.OtpEnrollForm = React.createClass({ | |||
31 | }.bind(this)); | 34 | }.bind(this)); |
32 | 35 | ||
33 | e.preventDefault(); | 36 | e.preventDefault(); |
34 | }, | 37 | } |
35 | handlePassChange: function(event) { | 38 | |
39 | handlePassChange = (event) => { | ||
36 | this.setState({'pass': event.target.value}); | 40 | this.setState({'pass': event.target.value}); |
37 | }, | 41 | } |
38 | hideMessage: function() { | 42 | |
43 | hideMessage = () => { | ||
39 | this.setState({'hideMsg': true}); | 44 | this.setState({'hideMsg': true}); |
40 | }, | 45 | } |
41 | displayMessage: function(msg, ok) { | 46 | |
47 | displayMessage = (msg, ok) => { | ||
42 | this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false}); | 48 | this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false}); |
43 | }, | 49 | } |
44 | render: function() { | 50 | |
51 | render = () => { | ||
45 | var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk}); | 52 | var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk}); |
46 | var qrCode = null; | 53 | var qrCode = null; |
47 | 54 | ||
48 | if (this.props.img) { | 55 | if (this.props.img) { |
49 | qrCode = ( | 56 | qrCode = |
50 | <div className='row justify-content-center'> | 57 | <div className="row justify-content-center"> |
51 | <OtpQrCode img={this.props.img} secret={this.props.secret} /> | 58 | <OtpQrCode img={this.props.img} secret={this.props.secret} /> |
52 | </div> | 59 | </div>; |
53 | ); | 60 | } |
54 | } | ||
55 | return ( | 61 | return ( |
56 | <div className='row otp-enroll'> | 62 | <div className="row otp-enroll"> |
57 | <div className='offset-4 col-4 col-xs-offset-1 col-xs-10 text-center'> | 63 | <div className="offset-4 col-4 col-xs-offset-1 col-xs-10 text-center"> |
58 | {qrCode} | 64 | {qrCode} |
59 | <div className='row justify-content-center'> | 65 | <div className="row justify-content-center"> |
60 | <form role='form' onSubmit={this.handleSubmit}> | 66 | <form role="form" onSubmit={this.handleSubmit}> |
61 | <input className='form-control' type='pass' placeholder='code' onChange={this.handlePassChange} /> | 67 | <input className="form-control" type="pass" placeholder="code" onChange={this.handlePassChange} /> |
62 | <input className='form-control submit' type='submit' value='Validate' /> | 68 | <input className="form-control submit" type="submit" value="Validate" /> |
63 | <div className={cName} ref='message'>{this.state.msg}</div> | 69 | <div className={cName}>{this.state.msg}</div> |
64 | </form> | 70 | </form> |
65 | </div> | 71 | </div> |
66 | </div> | 72 | </div> |
67 | </div> | 73 | </div> |
68 | ); | 74 | ); |
69 | } | 75 | } |
70 | }); | 76 | } |
77 | |||
78 | export default OtpEnrollForm; | ||