diff options
author | muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> | 2022-11-02 06:31:36 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-11-02 01:01:36 +0000 |
commit | 302d595f7c289387e53a0ef7df4d574ed4e25d70 (patch) | |
tree | 2385e59eaca9c78921d9b0b3681cfba1b3eef168 /src/features/basicAuth | |
parent | Re-enable editing of the address bar to manually access a different url withi... (diff) | |
download | ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.gz ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.tar.zst ferdium-app-302d595f7c289387e53a0ef7df4d574ed4e25d70.zip |
Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729)
Diffstat (limited to 'src/features/basicAuth')
-rw-r--r-- | src/features/basicAuth/Component.tsx (renamed from src/features/basicAuth/Component.js) | 45 | ||||
-rw-r--r-- | src/features/basicAuth/store.ts | 12 |
2 files changed, 33 insertions, 24 deletions
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.tsx index acba5a90d..e20f7641b 100644 --- a/src/features/basicAuth/Component.js +++ b/src/features/basicAuth/Component.tsx | |||
@@ -1,17 +1,14 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component, FormEvent, ReactElement } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import injectSheet, { WithStylesProps } from 'react-jss'; |
3 | import injectSheet from 'react-jss'; | ||
4 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
7 | 6 | import { noop } from 'lodash'; | |
8 | import Modal from '../../components/ui/Modal'; | 7 | import Modal from '../../components/ui/Modal'; |
9 | import Input from '../../components/ui/Input'; | 8 | import Input from '../../components/ui/input/index'; |
10 | import Button from '../../components/ui/button'; | 9 | import Button from '../../components/ui/button'; |
11 | |||
12 | import { state, resetState, sendCredentials, cancelLogin } from './store'; | 10 | import { state, resetState, sendCredentials, cancelLogin } from './store'; |
13 | import Form from './Form'; | 11 | import Form from './Form'; |
14 | |||
15 | import styles from './styles'; | 12 | import styles from './styles'; |
16 | import globalMessages from '../../i18n/globalMessages'; | 13 | import globalMessages from '../../i18n/globalMessages'; |
17 | import { H1 } from '../../components/ui/headline'; | 14 | import { H1 } from '../../components/ui/headline'; |
@@ -23,33 +20,31 @@ const messages = defineMessages({ | |||
23 | }, | 20 | }, |
24 | }); | 21 | }); |
25 | 22 | ||
26 | class BasicAuthModal extends Component { | 23 | interface IProps |
27 | static propTypes = { | 24 | extends WithStylesProps<typeof styles>, |
28 | classes: PropTypes.object.isRequired, | 25 | WrappedComponentProps {} |
29 | }; | ||
30 | 26 | ||
31 | submit(e) { | 27 | @observer |
28 | class BasicAuthModal extends Component<IProps> { | ||
29 | submit(e: FormEvent<HTMLFormElement>): void { | ||
32 | e.preventDefault(); | 30 | e.preventDefault(); |
33 | |||
34 | const values = Form.values(); | 31 | const values = Form.values(); |
35 | |||
36 | sendCredentials(values.user, values.password); | 32 | sendCredentials(values.user, values.password); |
37 | resetState(); | 33 | resetState(); |
38 | } | 34 | } |
39 | 35 | ||
40 | cancel() { | 36 | cancel(): void { |
41 | cancelLogin(); | 37 | cancelLogin(); |
42 | this.close(); | 38 | this.close(); |
43 | } | 39 | } |
44 | 40 | ||
45 | close() { | 41 | close(): void { |
46 | resetState(); | 42 | resetState(); |
47 | state.isModalVisible = false; | 43 | state.isModalVisible = false; |
48 | } | 44 | } |
49 | 45 | ||
50 | render() { | 46 | render(): ReactElement | null { |
51 | const { classes } = this.props; | 47 | const { classes } = this.props; |
52 | |||
53 | const { isModalVisible, authInfo } = state; | 48 | const { isModalVisible, authInfo } = state; |
54 | 49 | ||
55 | if (!authInfo) { | 50 | if (!authInfo) { |
@@ -76,9 +71,9 @@ class BasicAuthModal extends Component { | |||
76 | onSubmit={this.submit.bind(this)} | 71 | onSubmit={this.submit.bind(this)} |
77 | className={classnames('franz-form', classes.form)} | 72 | className={classnames('franz-form', classes.form)} |
78 | > | 73 | > |
79 | <Input field={Form.$('user')} showLabel={false} /> | 74 | <Input {...Form.$('user').bind()} showLabel={false} /> |
80 | <Input | 75 | <Input |
81 | field={Form.$('password')} | 76 | {...Form.$('password').bind()} |
82 | showLabel={false} | 77 | showLabel={false} |
83 | showPasswordToggle | 78 | showPasswordToggle |
84 | /> | 79 | /> |
@@ -89,7 +84,11 @@ class BasicAuthModal extends Component { | |||
89 | buttonType="secondary" | 84 | buttonType="secondary" |
90 | onClick={this.cancel.bind(this)} | 85 | onClick={this.cancel.bind(this)} |
91 | /> | 86 | /> |
92 | <Button type="submit" label={intl.formatMessage(messages.signIn)} /> | 87 | <Button |
88 | type="submit" | ||
89 | label={intl.formatMessage(messages.signIn)} | ||
90 | onClick={noop} | ||
91 | /> | ||
93 | </div> | 92 | </div> |
94 | </form> | 93 | </form> |
95 | </Modal> | 94 | </Modal> |
@@ -97,5 +96,5 @@ class BasicAuthModal extends Component { | |||
97 | } | 96 | } |
98 | } | 97 | } |
99 | export default injectIntl( | 98 | export default injectIntl( |
100 | injectSheet(styles, { injectTheme: true })(observer(BasicAuthModal)), | 99 | injectSheet(styles, { injectTheme: true })(BasicAuthModal), |
101 | ); | 100 | ); |
diff --git a/src/features/basicAuth/store.ts b/src/features/basicAuth/store.ts index e0ae8ba17..0fc289916 100644 --- a/src/features/basicAuth/store.ts +++ b/src/features/basicAuth/store.ts | |||
@@ -3,7 +3,17 @@ import { ipcRenderer } from 'electron'; | |||
3 | 3 | ||
4 | const debug = require('../../preload-safe-debug')('Ferdium:feature:basicAuth'); | 4 | const debug = require('../../preload-safe-debug')('Ferdium:feature:basicAuth'); |
5 | 5 | ||
6 | const defaultState = { | 6 | interface IAuthInfo { |
7 | host: string; | ||
8 | port: number; | ||
9 | } | ||
10 | interface IDefaultState { | ||
11 | isModalVisible: boolean; | ||
12 | service: null; | ||
13 | authInfo: IAuthInfo | null; | ||
14 | } | ||
15 | |||
16 | const defaultState: IDefaultState = { | ||
7 | isModalVisible: true, | 17 | isModalVisible: true, |
8 | service: null, | 18 | service: null, |
9 | authInfo: null, | 19 | authInfo: null, |