diff options
author | jloup <jean-loup.jamet@trainline.com> | 2018-02-14 14:19:09 +0100 |
---|---|---|
committer | jloup <jean-loup.jamet@trainline.com> | 2018-02-14 14:19:09 +0100 |
commit | 7a9e5112eaaea58d55f181d3e5296e4ff839921c (patch) | |
tree | 968ed193f42a1fad759cc89ad2f8ad5b0091291e /cmd/web/js/otp.jsx | |
download | Front-7a9e5112eaaea58d55f181d3e5296e4ff839921c.tar.gz Front-7a9e5112eaaea58d55f181d3e5296e4ff839921c.tar.zst Front-7a9e5112eaaea58d55f181d3e5296e4ff839921c.zip |
initial commit
Diffstat (limited to 'cmd/web/js/otp.jsx')
-rw-r--r-- | cmd/web/js/otp.jsx | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/cmd/web/js/otp.jsx b/cmd/web/js/otp.jsx new file mode 100644 index 0000000..2717d9f --- /dev/null +++ b/cmd/web/js/otp.jsx | |||
@@ -0,0 +1,70 @@ | |||
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 | }); | ||