]>
Commit | Line | Data |
---|---|---|
989fb5c7 | 1 | import Api from './api.js'; |
2 | import App from './app.js'; | |
3 | import classNames from 'classnames'; | |
4 | import React from 'react'; | |
7a9e5112 | 5 | |
989fb5c7 | 6 | class OtpQrCode extends React.Component { |
7 | render = () => { | |
7a9e5112 | 8 | return ( |
9 | <div> | |
10 | <img src={this.props.img} /> | |
11 | <p>{this.props.secret}</p> | |
12 | </div> | |
13 | ); | |
14 | } | |
989fb5c7 | 15 | } |
7a9e5112 | 16 | |
989fb5c7 | 17 | class OtpEnrollForm extends React.Component { |
18 | constructor(props) { | |
19 | super(props); | |
20 | this.state = {'hideMsg': true, 'msg': '', 'msgOk': false, 'pass': ''}; | |
21 | } | |
22 | ||
23 | handleSubmit = (e) => { | |
7a9e5112 | 24 | Api.Call('OTP_VALIDATE', {'pass': this.state.pass}, function(err, status, data) { |
25 | if (err) { | |
26 | console.error(err, data); | |
27 | this.displayMessage(App.errorCodeToMessage(err.code), false); | |
28 | return; | |
29 | } | |
30 | ||
31 | this.displayMessage('OK', true); | |
32 | this.props.onSuccess(data.token); | |
33 | ||
34 | }.bind(this)); | |
35 | ||
36 | e.preventDefault(); | |
989fb5c7 | 37 | } |
38 | ||
39 | handlePassChange = (event) => { | |
7a9e5112 | 40 | this.setState({'pass': event.target.value}); |
989fb5c7 | 41 | } |
42 | ||
43 | hideMessage = () => { | |
7a9e5112 | 44 | this.setState({'hideMsg': true}); |
989fb5c7 | 45 | } |
46 | ||
47 | displayMessage = (msg, ok) => { | |
7a9e5112 | 48 | this.setState({'msg': msg, 'msgOk': ok, 'hideMsg': false}); |
989fb5c7 | 49 | } |
50 | ||
51 | render = () => { | |
7a9e5112 | 52 | var cName = classNames('form-message', {'hidden': this.state.hideMsg, 'message-ok': this.state.msgOk}); |
53 | var qrCode = null; | |
54 | ||
55 | if (this.props.img) { | |
989fb5c7 | 56 | qrCode = |
57 | <div className="row justify-content-center"> | |
ee902062 | 58 | <p>Please setup 2FA (Google Authenticator, Authy)</p> |
7a9e5112 | 59 | <OtpQrCode img={this.props.img} secret={this.props.secret} /> |
989fb5c7 | 60 | </div>; |
61 | } | |
7a9e5112 | 62 | return ( |
989fb5c7 | 63 | <div className="row otp-enroll"> |
a6820180 | 64 | <div className="offset-1 col-10 box offset-md-4 col-md-4 text-center"> |
7a9e5112 | 65 | {qrCode} |
989fb5c7 | 66 | <div className="row justify-content-center"> |
67 | <form role="form" onSubmit={this.handleSubmit}> | |
a6820180 | 68 | <label className="w-100 text-left"><strong>Code</strong></label> |
69 | <input className="form-control" type="pass" onChange={this.handlePassChange} /> | |
989fb5c7 | 70 | <input className="form-control submit" type="submit" value="Validate" /> |
71 | <div className={cName}>{this.state.msg}</div> | |
7a9e5112 | 72 | </form> |
73 | </div> | |
74 | </div> | |
75 | </div> | |
76 | ); | |
77 | } | |
989fb5c7 | 78 | } |
79 | ||
80 | export default OtpEnrollForm; |