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