diff options
Diffstat (limited to 'src/features/basicAuth/Component.js')
-rw-r--r-- | src/features/basicAuth/Component.js | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js new file mode 100644 index 000000000..13395fb40 --- /dev/null +++ b/src/features/basicAuth/Component.js | |||
@@ -0,0 +1,102 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import injectSheet from 'react-jss'; | ||
4 | import { observer } from 'mobx-react'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import Modal from '../../components/ui/Modal'; | ||
8 | import Input from '../../components/ui/Input'; | ||
9 | import Button from '../../components/ui/Button'; | ||
10 | |||
11 | import { | ||
12 | state, | ||
13 | resetState, | ||
14 | sendCredentials, | ||
15 | cancelLogin, | ||
16 | } from '.'; | ||
17 | import Form from './Form'; | ||
18 | |||
19 | import styles from './styles'; | ||
20 | |||
21 | export default @injectSheet(styles) @observer class BasicAuthModal extends Component { | ||
22 | static propTypes = { | ||
23 | classes: PropTypes.object.isRequired, | ||
24 | } | ||
25 | |||
26 | submit(e) { | ||
27 | e.preventDefault(); | ||
28 | |||
29 | const values = Form.values(); | ||
30 | console.log('form submit', values); | ||
31 | |||
32 | sendCredentials(values.user, values.password); | ||
33 | resetState(); | ||
34 | } | ||
35 | |||
36 | cancel() { | ||
37 | cancelLogin(); | ||
38 | this.close(); | ||
39 | } | ||
40 | |||
41 | close() { | ||
42 | resetState(); | ||
43 | state.isModalVisible = false; | ||
44 | } | ||
45 | |||
46 | render() { | ||
47 | const { | ||
48 | classes, | ||
49 | } = this.props; | ||
50 | |||
51 | const { | ||
52 | isModalVisible, | ||
53 | authInfo, | ||
54 | } = state; | ||
55 | |||
56 | if (!authInfo) { | ||
57 | return null; | ||
58 | } | ||
59 | |||
60 | return ( | ||
61 | <Modal | ||
62 | isOpen={isModalVisible} | ||
63 | className={classes.modal} | ||
64 | close={this.cancel.bind(this)} | ||
65 | > | ||
66 | <h1>Sign in</h1> | ||
67 | <p> | ||
68 | http | ||
69 | {authInfo.port === 443 && 's'} | ||
70 | :// | ||
71 | {authInfo.host} | ||
72 | </p> | ||
73 | <form | ||
74 | onSubmit={this.submit.bind(this)} | ||
75 | className={classnames('franz-form', classes.form)} | ||
76 | > | ||
77 | <Input | ||
78 | field={Form.$('user')} | ||
79 | showLabel={false} | ||
80 | /> | ||
81 | <Input | ||
82 | field={Form.$('password')} | ||
83 | showLabel={false} | ||
84 | showPasswordToggle | ||
85 | /> | ||
86 | <div className={classes.buttons}> | ||
87 | <Button | ||
88 | type="button" | ||
89 | label="Cancel" | ||
90 | buttonType="secondary" | ||
91 | onClick={this.cancel.bind(this)} | ||
92 | /> | ||
93 | <Button | ||
94 | type="submit" | ||
95 | label="Sign In" | ||
96 | /> | ||
97 | </div> | ||
98 | </form> | ||
99 | </Modal> | ||
100 | ); | ||
101 | } | ||
102 | } | ||