From 302d595f7c289387e53a0ef7df4d574ed4e25d70 Mon Sep 17 00:00:00 2001 From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com> Date: Wed, 2 Nov 2022 06:31:36 +0530 Subject: Transform to TS and refactored components w.r.t deletion if duplicated Input component (#729) --- src/@types/mobx-form.types.ts | 19 +- src/components/auth/ChangeServer.tsx | 7 +- src/components/auth/Invite.js | 198 ---- src/components/auth/Invite.tsx | 213 ++++ src/components/auth/Locked.js | 148 --- src/components/auth/Locked.tsx | 147 +++ src/components/auth/Login.tsx | 6 +- src/components/auth/Password.js | 127 --- src/components/auth/Password.tsx | 129 +++ src/components/auth/Signup.jsx | 206 ---- src/components/auth/Signup.tsx | 209 ++++ .../settings/services/EditServiceForm.js | 16 +- .../settings/settings/EditSettingsForm.jsx | 1131 ------------------- .../settings/settings/EditSettingsForm.tsx | 1136 ++++++++++++++++++++ src/components/settings/user/EditUserForm.js | 131 --- src/components/settings/user/EditUserForm.tsx | 133 +++ src/components/ui/ColorPickerInput.tsx | 18 +- src/components/ui/Input.tsx | 170 --- src/components/ui/input/index.tsx | 187 ++-- src/components/ui/input/styles.ts | 1 - src/containers/auth/LockedScreen.tsx | 19 +- src/containers/settings/EditSettingsScreen.tsx | 15 +- src/features/basicAuth/Component.js | 101 -- src/features/basicAuth/Component.tsx | 100 ++ src/features/basicAuth/store.ts | 12 +- src/features/publishDebugInfo/Component.tsx | 1 - src/i18n/locales/en-US.json | 3 +- 27 files changed, 2236 insertions(+), 2347 deletions(-) delete mode 100644 src/components/auth/Invite.js create mode 100644 src/components/auth/Invite.tsx delete mode 100644 src/components/auth/Locked.js create mode 100644 src/components/auth/Locked.tsx delete mode 100644 src/components/auth/Password.js create mode 100644 src/components/auth/Password.tsx delete mode 100644 src/components/auth/Signup.jsx create mode 100644 src/components/auth/Signup.tsx delete mode 100644 src/components/settings/settings/EditSettingsForm.jsx create mode 100644 src/components/settings/settings/EditSettingsForm.tsx delete mode 100644 src/components/settings/user/EditUserForm.js create mode 100644 src/components/settings/user/EditUserForm.tsx delete mode 100644 src/components/ui/Input.tsx delete mode 100644 src/features/basicAuth/Component.js create mode 100644 src/features/basicAuth/Component.tsx diff --git a/src/@types/mobx-form.types.ts b/src/@types/mobx-form.types.ts index c9932c053..2a984d3a6 100644 --- a/src/@types/mobx-form.types.ts +++ b/src/@types/mobx-form.types.ts @@ -9,29 +9,22 @@ export interface FormFieldOptions { export interface FormFields { fields: { - [key: string]: { - label?: string; - placeholder?: string; - options?: FormFieldOptions[]; - value?: string | boolean | number | null; - default?: string | boolean | number | null; - type?: string; // todo specifiy probably - disabled?: boolean; - validators?: any; // Not sure yet. - }; + [key: string]: Field; }; } -export interface Field extends Partial { +export interface Field extends Listeners { id?: string; - type?: string; + type?: string; // todo specifiy probably name?: string; - value: string | string[]; + value?: any; label?: string; placeholder?: string; disabled?: boolean; error?: GlobalError | string; options?: SelectOptions[]; + default?: string | boolean | number | null; + validators?: any; // Not sure yet. } export interface SelectOptions { diff --git a/src/components/auth/ChangeServer.tsx b/src/components/auth/ChangeServer.tsx index d8509f599..c49e52673 100644 --- a/src/components/auth/ChangeServer.tsx +++ b/src/components/auth/ChangeServer.tsx @@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { mdiArrowLeftCircle } from '@mdi/js'; import { noop } from 'lodash'; import Form from '../../lib/Form'; -import Input from '../ui/Input'; +import Input from '../ui/input/index'; import Select from '../ui/Select'; import Button from '../ui/button'; import Link from '../ui/Link'; @@ -128,7 +128,10 @@ class ChangeServer extends Component { )} + )} - )} - {scorePassword && ( -
- {/* */} - -
- )} - - {field.label && showLabel && ( - - )} - {field.error &&
{field.error}
} - - ); - } -} - -export default injectIntl(Input); diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 2a36d7aa9..cb26c0ea4 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx @@ -1,5 +1,4 @@ import { mdiEye, mdiEyeOff } from '@mdi/js'; -import Icon from '@mdi/react'; import classnames from 'classnames'; import { Component, @@ -7,9 +6,13 @@ import { InputHTMLAttributes, ReactElement, RefObject, + KeyboardEvent, } from 'react'; -import injectSheet, { WithStylesProps } from 'react-jss'; +import withStyles, { WithStylesProps } from 'react-jss'; import { noop } from 'lodash'; +import { observer } from 'mobx-react'; +import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; +import Icon from '../icon'; import { IFormField } from '../typings/generic'; import Error from '../error'; import Label from '../label'; @@ -17,6 +20,12 @@ import Wrapper from '../wrapper'; import { scorePasswordFunc } from './scorePassword'; import styles from './styles'; +const messages = defineMessages({ + passwordToggle: { + id: 'settings.app.form.passwordToggle', + defaultMessage: 'Password toggle', + }, +}); interface IData { [index: string]: string; } @@ -24,7 +33,8 @@ interface IData { interface IProps extends InputHTMLAttributes, IFormField, - WithStylesProps { + WithStylesProps, + WrappedComponentProps { focus?: boolean; prefix?: string; suffix?: string; @@ -40,8 +50,10 @@ interface IState { passwordScore: number; } -class InputComponent extends Component { - private inputRef: RefObject = createRef(); +@observer +class Input extends Component { + private inputElement: RefObject = + createRef(); constructor(props: IProps) { super(props); @@ -53,36 +65,40 @@ class InputComponent extends Component { } componentDidMount(): void { - const { focus, data = {} } = this.props; + const { focus = false, data = {} } = this.props; - if (this.inputRef && this.inputRef.current) { + if (this.inputElement && this.inputElement.current) { if (focus) { - this.inputRef.current.focus(); + this.inputElement.current.focus(); } - for (const key of Object.keys(data)) - this.inputRef.current!.dataset[key] = data[key]; + for (const key of Object.keys(data)) { + this.inputElement.current.dataset[key] = data[key]; + } } } onChange(e: React.ChangeEvent): void { - const { scorePassword, onChange } = this.props; + const { scorePassword, onChange = noop } = this.props; - if (onChange) { - onChange(e); - } + onChange(e); - if (this.inputRef && this.inputRef.current && scorePassword) { + if (scorePassword) { + console.log( + '--->', + e.target.value, + scorePasswordFunc(e.target.value as string), + ); this.setState({ - passwordScore: scorePasswordFunc(this.inputRef.current.value), + passwordScore: scorePasswordFunc(e.target.value), }); } } - onInputKeyPress(e: React.KeyboardEvent): void { + onInputKeyPress(e: KeyboardEvent): void { if (e.key === 'Enter') { - const { onEnterKey } = this.props; - onEnterKey && onEnterKey(); + const { onEnterKey = noop } = this.props; + onEnterKey(); } } @@ -113,10 +129,9 @@ class InputComponent extends Component { type = 'text', disabled = false, readOnly, + intl, } = this.props; - const { showPassword, passwordScore } = this.state; - const inputType = type === 'password' && showPassword ? 'text' : type; return ( @@ -125,79 +140,85 @@ class InputComponent extends Component { identifier="franz-input" noMargin={noMargin} > - + )} {error && } ); } } -export default injectSheet(styles, { injectTheme: true })(InputComponent); +export default injectIntl(withStyles(styles, { injectTheme: true })(Input)); diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts index 04c1b3991..ebae0e40d 100644 --- a/src/components/ui/input/styles.ts +++ b/src/components/ui/input/styles.ts @@ -49,7 +49,6 @@ export default (theme: Theme) => ({ }, passwordScore: { background: theme.inputScorePasswordBackground, - border: theme.inputBorder, borderTopWidth: 0, borderBottomLeftRadius: theme.borderRadiusSmall, borderBottomRightRadius: theme.borderRadiusSmall, diff --git a/src/containers/auth/LockedScreen.tsx b/src/containers/auth/LockedScreen.tsx index 611a0757c..a4cb43f73 100644 --- a/src/containers/auth/LockedScreen.tsx +++ b/src/containers/auth/LockedScreen.tsx @@ -12,16 +12,19 @@ interface IProps { stores?: RealStores; } +interface IState { + error: boolean; +} + @inject('stores', 'actions') @observer -class LockedScreen extends Component { - state = { - error: false, - }; - +class LockedScreen extends Component { constructor(props: StoresProps) { super(props); + this.state = { + error: false, + }; this.onSubmit = this.onSubmit.bind(this); this.unlock = this.unlock.bind(this); } @@ -43,9 +46,7 @@ class LockedScreen extends Component { }); } else { this.setState({ - error: { - code: 'invalid-credentials', - }, + error: true, }); } } @@ -71,7 +72,7 @@ class LockedScreen extends Component { unlock={this.unlock} useTouchIdToUnlock={useTouchIdToUnlock} isSubmitting={stores!.user.loginRequest.isExecuting} - error={this.state.error || {}} + error={this.state.error} /> diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx index 162d422ce..0d8a0a758 100644 --- a/src/containers/settings/EditSettingsScreen.tsx +++ b/src/containers/settings/EditSettingsScreen.tsx @@ -1,7 +1,7 @@ import { ipcRenderer } from 'electron'; import { Component, ReactElement } from 'react'; import { inject, observer } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; import { FormFields } from '../../@types/mobx-form.types'; import { StoresProps } from '../../@types/ferdium-components.types'; @@ -314,10 +314,10 @@ const messages = defineMessages({ }, }); -interface EditSettingsScreenProps extends StoresProps { - intl: any; -} +interface EditSettingsScreenProps extends StoresProps, WrappedComponentProps {} +@inject('stores', 'actions') +@observer class EditSettingsScreen extends Component { state = { lockedPassword: '', @@ -962,9 +962,6 @@ class EditSettingsScreen extends Component { } isSplitModeEnabled={this.props.stores.settings.app.splitMode} isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser} - isUsingCustomTodoService={ - this.props.stores.todos.isUsingCustomTodoService - } openProcessManager={() => this.openProcessManager()} isOnline={app.isOnline} serverURL={importExportURL()} @@ -974,6 +971,4 @@ class EditSettingsScreen extends Component { } } -export default injectIntl( - inject('stores', 'actions')(observer(EditSettingsScreen)), -); +export default injectIntl(EditSettingsScreen); diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js deleted file mode 100644 index acba5a90d..000000000 --- a/src/features/basicAuth/Component.js +++ /dev/null @@ -1,101 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; -import { observer } from 'mobx-react'; -import { defineMessages, injectIntl } from 'react-intl'; -import classnames from 'classnames'; - -import Modal from '../../components/ui/Modal'; -import Input from '../../components/ui/Input'; -import Button from '../../components/ui/button'; - -import { state, resetState, sendCredentials, cancelLogin } from './store'; -import Form from './Form'; - -import styles from './styles'; -import globalMessages from '../../i18n/globalMessages'; -import { H1 } from '../../components/ui/headline'; - -const messages = defineMessages({ - signIn: { - id: 'feature.basicAuth.signIn', - defaultMessage: 'Sign In', - }, -}); - -class BasicAuthModal extends Component { - static propTypes = { - classes: PropTypes.object.isRequired, - }; - - submit(e) { - e.preventDefault(); - - const values = Form.values(); - - sendCredentials(values.user, values.password); - resetState(); - } - - cancel() { - cancelLogin(); - this.close(); - } - - close() { - resetState(); - state.isModalVisible = false; - } - - render() { - const { classes } = this.props; - - const { isModalVisible, authInfo } = state; - - if (!authInfo) { - return null; - } - - const { intl } = this.props; - - return ( - -

{intl.formatMessage(messages.signIn)}

-

- http - {authInfo.port === 443 && 's'} - :// - {authInfo.host} -

-
- - -
-
-
- - ); - } -} -export default injectIntl( - injectSheet(styles, { injectTheme: true })(observer(BasicAuthModal)), -); 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 @@ +import { Component, FormEvent, ReactElement } from 'react'; +import injectSheet, { WithStylesProps } from 'react-jss'; +import { observer } from 'mobx-react'; +import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; +import classnames from 'classnames'; +import { noop } from 'lodash'; +import Modal from '../../components/ui/Modal'; +import Input from '../../components/ui/input/index'; +import Button from '../../components/ui/button'; +import { state, resetState, sendCredentials, cancelLogin } from './store'; +import Form from './Form'; +import styles from './styles'; +import globalMessages from '../../i18n/globalMessages'; +import { H1 } from '../../components/ui/headline'; + +const messages = defineMessages({ + signIn: { + id: 'feature.basicAuth.signIn', + defaultMessage: 'Sign In', + }, +}); + +interface IProps + extends WithStylesProps, + WrappedComponentProps {} + +@observer +class BasicAuthModal extends Component { + submit(e: FormEvent): void { + e.preventDefault(); + const values = Form.values(); + sendCredentials(values.user, values.password); + resetState(); + } + + cancel(): void { + cancelLogin(); + this.close(); + } + + close(): void { + resetState(); + state.isModalVisible = false; + } + + render(): ReactElement | null { + const { classes } = this.props; + const { isModalVisible, authInfo } = state; + + if (!authInfo) { + return null; + } + + const { intl } = this.props; + + return ( + +

{intl.formatMessage(messages.signIn)}

+

+ http + {authInfo.port === 443 && 's'} + :// + {authInfo.host} +

+
+ + +
+
+
+ + ); + } +} +export default injectIntl( + injectSheet(styles, { injectTheme: true })(BasicAuthModal), +); 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'; const debug = require('../../preload-safe-debug')('Ferdium:feature:basicAuth'); -const defaultState = { +interface IAuthInfo { + host: string; + port: number; +} +interface IDefaultState { + isModalVisible: boolean; + service: null; + authInfo: IAuthInfo | null; +} + +const defaultState: IDefaultState = { isModalVisible: true, service: null, authInfo: null, diff --git a/src/features/publishDebugInfo/Component.tsx b/src/features/publishDebugInfo/Component.tsx index e265902dd..3c6729ba0 100644 --- a/src/features/publishDebugInfo/Component.tsx +++ b/src/features/publishDebugInfo/Component.tsx @@ -163,7 +163,6 @@ class PublishDebugLogModal extends Component {

{intl.formatMessage(messages.published)}

- {/* TODO - [TS DEBT] need to check if take readOnly and use it */} )} diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 63face219..c34106044 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -62,7 +62,7 @@ "locked.password.label": "Password", "locked.submit.label": "Unlock", "locked.touchId": "Unlock with Touch ID", - "locked.touchIdPrompt": "unlock via Touch ID", + "locked.touchIdPrompt": "Unlock with Touch ID", "locked.unlockWithPassword": "Unlock with Password", "login.changeServer": "Change here!", "login.changeServerMessage": "You are using {serverNameParse} Server, do you want to switch?", @@ -448,6 +448,7 @@ "sidebar.openWorkspaceDrawer": "Open workspace drawer", "sidebar.splitModeToggle": "Split Mode Toggle", "sidebar.unmuteApp": "Enable notifications & audio", + "signup.company.label": "Company", "signup.email.label": "Email address", "signup.emailDuplicate": "A user with that email address already exists", "signup.firstname.label": "First Name", -- cgit v1.2.3-70-g09d2