Page MenuHomePhabricator
Files F3522172

D14062.id46185.diff
No OneTemporary
Actions

D14062.id46185.diff
View Options

diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -56,20 +56,6 @@
line-height: var(--line-height-text);
}
-.passwordContainer {
- display: flex;
-}
-
-.password {
- align-items: center;
- padding-right: 16px;
-}
-
-.editPasswordLink {
- color: var(--text-background-tertiary-default);
- cursor: pointer;
-}
-
.preferencesContainer {
padding-top: 24px;
}
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -12,7 +12,6 @@
import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
import { useStringForUser } from 'lib/hooks/ens-cache.js';
-import { accountHasPassword } from 'lib/shared/account-utils.js';
import {
dmOperationSpecificationTypes,
type OutboundDMOperationSpecification,
@@ -32,7 +31,6 @@
import css from './account-settings.css';
import AppearanceChangeModal from './appearance-change-modal.react.js';
import BackupTestRestoreModal from './backup-test-restore-modal.react.js';
-import PasswordChangeModal from './password-change-modal.js';
import BlockListModal from './relationship/block-list-modal.react.js';
import FriendListModal from './relationship/friend-list-modal.react.js';
import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
@@ -80,11 +78,6 @@
})();
}, []);
- const showPasswordChangeModal = React.useCallback(
- () => pushModal(<PasswordChangeModal />),
- [pushModal],
- );
-
const openFriendList = React.useCallback(
() => pushModal(<FriendListModal />),
[pushModal],
@@ -95,10 +88,6 @@
[pushModal],
);
- const isAccountWithPassword = useSelector(state =>
- accountHasPassword(state.currentUserInfo),
- );
-
const currentUserInfo = useSelector(state => state.currentUserInfo);
const stringForUser = useStringForUser(currentUserInfo);
@@ -181,21 +170,6 @@
return null;
}
- let changePasswordSection;
- if (isAccountWithPassword) {
- changePasswordSection = (
- <li>
- <span>Password</span>
- <span className={css.passwordContainer}>
- <span className={css.password}>******</span>
- <a className={css.editPasswordLink} onClick={showPasswordChangeModal}>
- <SWMansionIcon icon="edit-1" size={22} />
- </a>
- </span>
- </li>
- );
- }
-
let experimentalLogOutSection;
if (isDev) {
experimentalLogOutSection = (
@@ -337,7 +311,6 @@
</Button>
</li>
{experimentalLogOutSection}
- {changePasswordSection}
<li>
<span>Friend List</span>
<Button variant="text" onClick={openFriendList}>
diff --git a/web/settings/password-change-modal.css b/web/settings/password-change-modal.css
deleted file mode 100644
--- a/web/settings/password-change-modal.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.modalFormError {
- font-size: var(--xs-font-12);
- color: var(--text-background-danger-default);
- font-style: italic;
- height: 24px;
- display: flex;
- justify-content: center;
- align-items: flex-end;
-}
-
-.errorPlaceholder {
- height: 24px;
-}
-
-.formContent {
- display: flex;
- flex-direction: column;
-}
-.formContent input:not(:last-child) {
- margin-bottom: 16px;
-}
-
-.formContent input[type='password'] {
- width: auto;
-}
-
-.usernameContainer {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin-bottom: 16px;
-}
-.usernameLabel {
- color: var(--text-background-tertiary-default);
-}
-.username {
- color: var(--text-background-primary-default);
-}
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
deleted file mode 100644
--- a/web/settings/password-change-modal.js
+++ /dev/null
@@ -1,296 +0,0 @@
-// @flow
-
-import invariant from 'invariant';
-import * as React from 'react';
-
-import {
- changeKeyserverUserPasswordActionTypes,
- changeKeyserverUserPassword,
- useChangeIdentityUserPassword,
- changeIdentityUserPasswordActionTypes,
-} from 'lib/actions/user-actions.js';
-import { useModalContext } from 'lib/components/modal-provider.react.js';
-import { useStringForUser } from 'lib/hooks/ens-cache.js';
-import { useLegacyAshoatKeyserverCall } from 'lib/keyserver-conn/legacy-keyserver-call.js';
-import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
-import { type PasswordUpdate } from 'lib/types/user-types.js';
-import { getMessageForException } from 'lib/utils/errors.js';
-import {
- useDispatchActionPromise,
- type DispatchActionPromise,
-} from 'lib/utils/redux-promise-utils.js';
-import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js';
-
-import css from './password-change-modal.css';
-import Button from '../components/button.react.js';
-import Input from '../modals/input.react.js';
-import Modal from '../modals/modal.react.js';
-import { useSelector } from '../redux/redux-utils.js';
-
-type Props = {
- +inputDisabled: boolean,
- +dispatchActionPromise: DispatchActionPromise,
- +changeKeyserverUserPassword: (
- passwordUpdate: PasswordUpdate,
- ) => Promise<void>,
- +changeIdentityUserPassword: (
- oldPassword: string,
- newPassword: string,
- ) => Promise<void>,
- +popModal: () => void,
- +stringForUser: ?string,
-};
-type State = {
- +newPassword: string,
- +confirmNewPassword: string,
- +currentPassword: string,
- +errorMessage: string,
-};
-
-class PasswordChangeModal extends React.PureComponent<Props, State> {
- newPasswordInput: ?HTMLInputElement;
- currentPasswordInput: ?HTMLInputElement;
-
- constructor(props: Props) {
- super(props);
- this.state = {
- newPassword: '',
- confirmNewPassword: '',
- currentPassword: '',
- errorMessage: '',
- };
- }
-
- componentDidMount() {
- invariant(this.newPasswordInput, 'newPasswordInput ref unset');
- this.newPasswordInput.focus();
- }
-
- render(): React.Node {
- const { inputDisabled } = this.props;
-
- let errorMsg = <div className={css.errorPlaceholder} />;
- if (this.state.errorMessage) {
- errorMsg = (
- <div className={css.modalFormError}>{this.state.errorMessage}</div>
- );
- }
-
- const buttonIsDisabled =
- inputDisabled ||
- this.state.currentPassword.length === 0 ||
- this.state.newPassword.length === 0 ||
- this.state.confirmNewPassword.length === 0;
-
- const changePasswordButton = (
- <Button
- type="submit"
- variant="filled"
- onClick={this.onSubmit}
- disabled={buttonIsDisabled}
- >
- Change Password
- </Button>
- );
-
- return (
- <Modal
- name="Change Password"
- onClose={this.props.popModal}
- size="large"
- primaryButton={changePasswordButton}
- >
- <form method="POST">
- <div className={css.formContent}>
- <p className={css.usernameContainer}>
- <span className={css.usernameLabel}>{'Logged in as '}</span>
- <span className={css.username}>{this.props.stringForUser}</span>
- </p>
- <Input
- type="password"
- placeholder="Current password"
- value={this.state.currentPassword}
- onChange={this.onChangeCurrentPassword}
- disabled={inputDisabled}
- ref={this.currentPasswordInputRef}
- label="Current password"
- />
- <Input
- type="password"
- placeholder="New password"
- value={this.state.newPassword}
- onChange={this.onChangeNewPassword}
- ref={this.newPasswordInputRef}
- disabled={inputDisabled}
- label="New password"
- />
- <Input
- type="password"
- placeholder="Confirm new password"
- value={this.state.confirmNewPassword}
- onChange={this.onChangeConfirmNewPassword}
- disabled={inputDisabled}
- />
- </div>
- {errorMsg}
- </form>
- </Modal>
- );
- }
-
- newPasswordInputRef = (newPasswordInput: ?HTMLInputElement) => {
- this.newPasswordInput = newPasswordInput;
- };
-
- currentPasswordInputRef = (currentPasswordInput: ?HTMLInputElement) => {
- this.currentPasswordInput = currentPasswordInput;
- };
-
- onChangeNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
- const target = event.target;
- invariant(target instanceof HTMLInputElement, 'target not input');
- this.setState({ newPassword: target.value });
- };
-
- onChangeConfirmNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
- const target = event.target;
- invariant(target instanceof HTMLInputElement, 'target not input');
- this.setState({ confirmNewPassword: target.value });
- };
-
- onChangeCurrentPassword = (event: SyntheticEvent<HTMLInputElement>) => {
- const target = event.target;
- invariant(target instanceof HTMLInputElement, 'target not input');
- this.setState({ currentPassword: target.value });
- };
-
- onSubmit = (event: SyntheticEvent<HTMLButtonElement>) => {
- event.preventDefault();
-
- if (this.state.newPassword === '') {
- this.setState(
- {
- newPassword: '',
- confirmNewPassword: '',
- errorMessage: 'empty password',
- },
- () => {
- invariant(this.newPasswordInput, 'newPasswordInput ref unset');
- this.newPasswordInput.focus();
- },
- );
- } else if (this.state.newPassword !== this.state.confirmNewPassword) {
- this.setState(
- {
- newPassword: '',
- confirmNewPassword: '',
- errorMessage: 'passwords don’t match',
- },
- () => {
- invariant(this.newPasswordInput, 'newPasswordInput ref unset');
- this.newPasswordInput.focus();
- },
- );
- return;
- }
-
- if (usingCommServicesAccessToken) {
- void this.props.dispatchActionPromise(
- changeIdentityUserPasswordActionTypes,
- this.changeUserSettingsAction(),
- );
- } else {
- void this.props.dispatchActionPromise(
- changeKeyserverUserPasswordActionTypes,
- this.changeUserSettingsAction(),
- );
- }
- };
-
- async changeUserSettingsAction(): Promise<void> {
- try {
- if (usingCommServicesAccessToken) {
- await this.props.changeIdentityUserPassword(
- this.state.currentPassword,
- this.state.newPassword,
- );
- } else {
- await this.props.changeKeyserverUserPassword({
- updatedFields: {
- password: this.state.newPassword,
- },
- currentPassword: this.state.currentPassword,
- });
- }
- this.props.popModal();
- } catch (e) {
- const messageForException = getMessageForException(e);
- if (
- messageForException === 'invalid_credentials' ||
- messageForException === 'login_failed'
- ) {
- this.setState(
- {
- currentPassword: '',
- errorMessage: 'wrong current password',
- },
- () => {
- invariant(
- this.currentPasswordInput,
- 'currentPasswordInput ref unset',
- );
- this.currentPasswordInput.focus();
- },
- );
- } else {
- this.setState(
- {
- newPassword: '',
- confirmNewPassword: '',
- currentPassword: '',
- errorMessage: 'unknown error',
- },
- () => {
- invariant(this.newPasswordInput, 'newPasswordInput ref unset');
- this.newPasswordInput.focus();
- },
- );
- }
- throw e;
- }
- }
-}
-
-const changeUserPasswordLoadingStatusSelector = usingCommServicesAccessToken
- ? createLoadingStatusSelector(changeIdentityUserPasswordActionTypes)
- : createLoadingStatusSelector(changeKeyserverUserPasswordActionTypes);
-const ConnectedPasswordChangeModal: React.ComponentType<{}> = React.memo<{}>(
- function ConnectedPasswordChangeModal(): React.Node {
- const inputDisabled = useSelector(
- state => changeUserPasswordLoadingStatusSelector(state) === 'loading',
- );
- const callChangeKeyserverUserPassword = useLegacyAshoatKeyserverCall(
- changeKeyserverUserPassword,
- );
- const callChangeIdentityUserPassword = useChangeIdentityUserPassword();
- const dispatchActionPromise = useDispatchActionPromise();
-
- const modalContext = useModalContext();
-
- const currentUserInfo = useSelector(state => state.currentUserInfo);
- const stringForUser = useStringForUser(currentUserInfo);
-
- return (
- <PasswordChangeModal
- inputDisabled={inputDisabled}
- changeKeyserverUserPassword={callChangeKeyserverUserPassword}
- changeIdentityUserPassword={callChangeIdentityUserPassword}
- dispatchActionPromise={dispatchActionPromise}
- popModal={modalContext.popModal}
- stringForUser={stringForUser}
- />
- );
- },
-);
-
-export default ConnectedPasswordChangeModal;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 5:59 AM (19 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698616
Default Alt Text
D14062.id46185.diff (13 KB)

Event Timeline