Page MenuHomePhabricator
Files F3241570

D3473.id10557.diff
No OneTemporary
Actions

D3473.id10557.diff
View Options

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<TabProps> {
- render() {
- const { selected, name, tabType } = this.props;
- const classNamesForTab = classNames({
- [css['current-tab']]: selected,
- [css['delete-tab']]: selected && tabType === 'delete',
- });
- return (
- <li className={classNamesForTab} onClick={this.onClick}>
- <a>{name}</a>
- </li>
- );
- }
-
- onClick = () => {
- return this.props.onClick(this.props.tabType);
- };
-}
-
type Props = {
- +currentUserInfo: ?CurrentUserInfo,
- +preRequestUserState: PreRequestUserState,
+inputDisabled: boolean,
+dispatchActionPromise: DispatchActionPromise,
- +deleteAccount: (
- password: string,
- preRequestUserState: PreRequestUserState,
- ) => Promise<LogOutResult>,
+changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
- +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
+clearModal: () => void,
};
type State = {
@@ -77,7 +33,6 @@
+confirmNewPassword: string,
+currentPassword: string,
+errorMessage: string,
- +currentTabType: TabType,
};
class PasswordChangeModal extends React.PureComponent<Props, State> {
@@ -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<HTMLButtonElement>) => {
- 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 = (
- <div>
- <div className={css['form-text']}>
- <div className={css['form-title']}>Username</div>
- <div className={css['form-content']}>{this.username}</div>
+ const mainContent = (
+ <div>
+ <div className={css['form-title']}>New password</div>
+ <div className={css['form-content']}>
+ <div>
+ <Input
+ type="password"
+ placeholder="New password"
+ value={this.state.newPassword}
+ onChange={this.onChangeNewPassword}
+ ref={this.newPasswordInputRef}
+ disabled={inputDisabled}
+ />
</div>
<div>
- <div className={css['form-title']}>New password</div>
- <div className={css['form-content']}>
- <div>
- <Input
- type="password"
- placeholder="New password"
- value={this.state.newPassword}
- onChange={this.onChangeNewPassword}
- ref={this.newPasswordInputRef}
- disabled={inputDisabled}
- />
- </div>
- <div>
- <Input
- type="password"
- placeholder="Confirm new password"
- value={this.state.confirmNewPassword}
- onChange={this.onChangeConfirmNewPassword}
- disabled={inputDisabled}
- />
- </div>
- </div>
+ <Input
+ type="password"
+ placeholder="Confirm new password"
+ value={this.state.confirmNewPassword}
+ onChange={this.onChangeConfirmNewPassword}
+ disabled={inputDisabled}
+ />
</div>
</div>
- );
- } else if (this.state.currentTabType === 'delete') {
- mainContent = (
- <p className={css['italic']}>
- Your account will be permanently deleted. There is no way to reverse
- this.
- </p>
- );
- }
+ </div>
+ );
- let buttons = null;
- if (this.state.currentTabType === 'delete') {
- buttons = (
- <Button
- variant="danger"
- type="submit"
- onClick={this.onDelete}
- disabled={inputDisabled}
- >
- Delete account
- </Button>
- );
- } else {
- buttons = (
- <>
- <Button
- type="submit"
- variant="primary"
- onClick={this.onSubmit}
- disabled={inputDisabled}
- >
- Update Account
- </Button>
- <Button
- type="submit"
- variant="secondary"
- onClick={this.onLogOut}
- disabled={inputDisabled}
- >
- Log out
- </Button>
- </>
- );
- }
+ const buttons = (
+ <Button
+ type="submit"
+ variant="primary"
+ onClick={this.onSubmit}
+ disabled={inputDisabled}
+ >
+ Update Account
+ </Button>
+ );
let errorMsg;
if (this.state.errorMessage) {
@@ -205,22 +103,6 @@
return (
<Modal name="Edit account" onClose={this.props.clearModal} size="large">
- <ul className={css['tab-panel']}>
- <Tab
- name="General"
- tabType="general"
- onClick={this.setTab}
- selected={this.state.currentTabType === 'general'}
- key="general"
- />
- <Tab
- name="Delete"
- tabType="delete"
- onClick={this.setTab}
- selected={this.state.currentTabType === 'delete'}
- key="delete"
- />
- </ul>
<div className={css['modal-body']}>
<form method="POST">
{mainContent}
@@ -258,10 +140,6 @@
this.currentPasswordInput = currentPasswordInput;
};
- setTab = (tabType: TabType) => {
- this.setState({ currentTabType: tabType });
- };
-
onChangeNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
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<HTMLButtonElement>) => {
- 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 (
<PasswordChangeModal
- currentUserInfo={currentUserInfo}
- preRequestUserState={preRequestUserState}
inputDisabled={inputDisabled}
- deleteAccount={callDeleteAccount}
changeUserPassword={callChangeUserPassword}
dispatchActionPromise={dispatchActionPromise}
- logOut={boundLogOut}
clearModal={modalContext.clearModal}
/>
);

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 14, 7:22 PM (5 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2490416
Default Alt Text
D3473.id10557.diff (12 KB)

Event Timeline