diff --git a/web/settings/password-change-modal.css b/web/settings/password-change-modal.css --- a/web/settings/password-change-modal.css +++ b/web/settings/password-change-modal.css @@ -9,30 +9,11 @@ display: flex; flex-direction: column; } -div.resized-modal-body { - min-height: 250px; -} div.modal-body p { padding: 1px 3px 4px 3px; font-size: 14px; text-align: center; } -div.modal-body p.form-pre-footer { - padding-top: 5px; - font-size: 12px; - font-style: italic; -} -div.modal-body textarea { - margin: 3px; -} -div.modal-body textarea { - font-size: 14px; - padding: 1px; - width: 175px; -} -div.large-modal-container div.modal-body textarea { - width: 275px; -} div.modal-body p.confirm-account-password { color: #777777; margin-bottom: 4px; @@ -51,9 +32,6 @@ padding-left: 6px; align-self: center; } -div.modal-body div.form-footer div.modal-form-error ol { - padding-left: 20px; -} div.modal-body div.form-title { display: inline-block; text-align: right; @@ -76,67 +54,6 @@ div.modal-body div.form-content input { margin-bottom: 4px; } -div.modal-body div.form-subtitle { - font-size: 12px; - padding-left: 4px; - font-style: italic; -} - -div.form-text { - display: flex; - align-items: baseline; -} -div.form-text > div.form-title { - vertical-align: initial; - flex-shrink: 0; -} -div.form-text > div.form-content { - margin-left: 3px; - margin-bottom: 3px; - word-break: break-word; -} - -div.form-text > div.form-float-title { - float: left; - text-align: right; - padding-right: 5px; - font-size: 14px; - font-weight: 600; - width: 110px; -} -div.form-text > div.form-float-content { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; - padding: 1px 20px 3px 4px; - margin-top: 5px; -} - -.italic { - font-style: italic; - color: var(--fg); -} - -ul.tab-panel { - background-color: var(--modal-bg); - padding-left: 10px; - padding-top: 5px; -} -ul.tab-panel > li { - display: inline-block; - list-style-type: none; - font-size: 13px; - font-weight: 600; - cursor: pointer; - padding: 3px 10px 3px 10px; -} -ul.tab-panel > li > a { - color: #555555; -} -ul.tab-panel > li.delete-tab > a { - color: #ff0000 !important; -} div.user-settings-current-password { padding-top: 4px; diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js --- a/web/settings/password-change-modal.js +++ b/web/settings/password-change-modal.js @@ -1,25 +1,14 @@ // @flow -import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import { - deleteAccountActionTypes, - deleteAccount, changeUserPasswordActionTypes, changeUserPassword, - logOut, - logOutActionTypes, } from 'lib/actions/user-actions'; -import { preRequestUserStateSelector } from 'lib/selectors/account-selectors'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; -import type { LogOutResult } from 'lib/types/account-types'; -import { type PreRequestUserState } from 'lib/types/session-types'; -import { - type PasswordUpdate, - type CurrentUserInfo, -} from 'lib/types/user-types'; +import { type PasswordUpdate } from 'lib/types/user-types'; import { type DispatchActionPromise, useDispatchActionPromise, @@ -33,43 +22,10 @@ import { useSelector } from '../redux/redux-utils'; import css from './password-change-modal.css'; -type TabType = 'general' | 'delete'; -type TabProps = { - +name: string, - +tabType: TabType, - +selected: boolean, - +onClick: (tabType: TabType) => void, -}; -class Tab extends React.PureComponent { - render() { - const { selected, name, tabType } = this.props; - const classNamesForTab = classNames({ - [css['current-tab']]: selected, - [css['delete-tab']]: selected && tabType === 'delete', - }); - return ( -
  • - {name} -
  • - ); - } - - onClick = () => { - return this.props.onClick(this.props.tabType); - }; -} - type Props = { - +currentUserInfo: ?CurrentUserInfo, - +preRequestUserState: PreRequestUserState, +inputDisabled: boolean, +dispatchActionPromise: DispatchActionPromise, - +deleteAccount: ( - password: string, - preRequestUserState: PreRequestUserState, - ) => Promise, +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise, - +logOut: (preRequestUserState: PreRequestUserState) => Promise, +clearModal: () => void, }; type State = { @@ -77,7 +33,6 @@ +confirmNewPassword: string, +currentPassword: string, +errorMessage: string, - +currentTabType: TabType, }; class PasswordChangeModal extends React.PureComponent { @@ -91,7 +46,6 @@ confirmNewPassword: '', currentPassword: '', errorMessage: '', - currentTabType: 'general', }; } @@ -100,101 +54,45 @@ this.newPasswordInput.focus(); } - get username() { - return this.props.currentUserInfo && !this.props.currentUserInfo.anonymous - ? this.props.currentUserInfo.username - : undefined; - } - - onLogOut = (event: SyntheticEvent) => { - event.preventDefault(); - this.props.dispatchActionPromise(logOutActionTypes, this.logOut()); - }; - - logOut = async () => { - await this.props.logOut(this.props.preRequestUserState); - this.props.clearModal(); - }; - render() { const { inputDisabled } = this.props; - let mainContent = null; - if (this.state.currentTabType === 'general') { - mainContent = ( -
    -
    -
    Username
    -
    {this.username}
    + const mainContent = ( +
    +
    New password
    +
    +
    +
    -
    New password
    -
    -
    - -
    -
    - -
    -
    +
    - ); - } else if (this.state.currentTabType === 'delete') { - mainContent = ( -

    - Your account will be permanently deleted. There is no way to reverse - this. -

    - ); - } +
    + ); - let buttons = null; - if (this.state.currentTabType === 'delete') { - buttons = ( - - ); - } else { - buttons = ( - <> - - - - ); - } + const buttons = ( + + ); let errorMsg; if (this.state.errorMessage) { @@ -205,22 +103,6 @@ return ( -
      - - -
    {mainContent} @@ -258,10 +140,6 @@ this.currentPasswordInput = currentPasswordInput; }; - setTab = (tabType: TabType) => { - this.setState({ currentTabType: tabType }); - }; - onChangeNewPassword = (event: SyntheticEvent) => { const target = event.target; invariant(target instanceof HTMLInputElement, 'target not input'); @@ -289,7 +167,6 @@ newPassword: '', confirmNewPassword: '', errorMessage: 'empty password', - currentTabType: 'general', }, () => { invariant(this.newPasswordInput, 'newPasswordInput ref unset'); @@ -302,7 +179,6 @@ newPassword: '', confirmNewPassword: '', errorMessage: "passwords don't match", - currentTabType: 'general', }, () => { invariant(this.newPasswordInput, 'newPasswordInput ref unset'); @@ -349,7 +225,6 @@ confirmNewPassword: '', currentPassword: '', errorMessage: 'unknown error', - currentTabType: 'general', }, () => { invariant(this.newPasswordInput, 'newPasswordInput ref unset'); @@ -360,77 +235,26 @@ throw e; } } - - onDelete = (event: SyntheticEvent) => { - event.preventDefault(); - this.props.dispatchActionPromise( - deleteAccountActionTypes, - this.deleteAction(), - ); - }; - - async deleteAction() { - try { - const response = await this.props.deleteAccount( - this.state.currentPassword, - this.props.preRequestUserState, - ); - this.props.clearModal(); - return response; - } catch (e) { - const errorMessage = - e.message === 'invalid_credentials' - ? 'wrong password' - : 'unknown error'; - this.setState( - { - currentPassword: '', - errorMessage: errorMessage, - }, - () => { - invariant( - this.currentPasswordInput, - 'currentPasswordInput ref unset', - ); - this.currentPasswordInput.focus(); - }, - ); - throw e; - } - } } -const deleteAccountLoadingStatusSelector = createLoadingStatusSelector( - deleteAccountActionTypes, -); const changeUserPasswordLoadingStatusSelector = createLoadingStatusSelector( changeUserPasswordActionTypes, ); const ConnectedPasswordChangeModal: React.ComponentType<{}> = React.memo<{}>( function ConnectedPasswordChangeModal(): React.Node { - const currentUserInfo = useSelector(state => state.currentUserInfo); - const preRequestUserState = useSelector(preRequestUserStateSelector); const inputDisabled = useSelector( - state => - deleteAccountLoadingStatusSelector(state) === 'loading' || - changeUserPasswordLoadingStatusSelector(state) === 'loading', + state => changeUserPasswordLoadingStatusSelector(state) === 'loading', ); - const callDeleteAccount = useServerCall(deleteAccount); const callChangeUserPassword = useServerCall(changeUserPassword); const dispatchActionPromise = useDispatchActionPromise(); - const boundLogOut = useServerCall(logOut); const modalContext = useModalContext(); return ( );