Page MenuHomePhabricator
Files F3332928

No OneTemporary
Actions

View Options

diff --git a/web/modals/account/log-in-modal.react.js b/web/modals/account/log-in-modal.react.js
index 1d4ac3caf..5fa1d39eb 100644
--- a/web/modals/account/log-in-modal.react.js
+++ b/web/modals/account/log-in-modal.react.js
@@ -1,235 +1,226 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import { logInActionTypes, logIn } from 'lib/actions/user-actions';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
import { oldValidUsernameRegex } from 'lib/shared/account-utils';
import type {
LogInInfo,
LogInExtraInfo,
LogInResult,
LogInStartingPayload,
} from 'lib/types/account-types';
import {
type DispatchActionPromise,
useDispatchActionPromise,
useServerCall,
} from 'lib/utils/action-utils';
import { useSelector } from '../../redux/redux-utils';
import { webLogInExtraInfoSelector } from '../../selectors/account-selectors';
import css from '../../style.css';
import Modal from '../modal.react';
type BaseProps = {|
+setModal: (modal: ?React.Node) => void,
|};
type Props = {|
...BaseProps,
+inputDisabled: boolean,
+logInExtraInfo: () => LogInExtraInfo,
+dispatchActionPromise: DispatchActionPromise,
+logIn: (logInInfo: LogInInfo) => Promise<LogInResult>,
|};
type State = {|
- +usernameOrEmail: string,
+ +username: string,
+password: string,
+errorMessage: string,
|};
class LogInModal extends React.PureComponent<Props, State> {
- usernameOrEmailInput: ?HTMLInputElement;
+ usernameInput: ?HTMLInputElement;
passwordInput: ?HTMLInputElement;
constructor(props: Props) {
super(props);
this.state = {
- usernameOrEmail: '',
+ username: '',
password: '',
errorMessage: '',
};
}
componentDidMount() {
- invariant(this.usernameOrEmailInput, 'usernameOrEmail ref unset');
- this.usernameOrEmailInput.focus();
+ invariant(this.usernameInput, 'username ref unset');
+ this.usernameInput.focus();
}
render() {
return (
<Modal name="Log in" onClose={this.clearModal}>
<div className={css['modal-body']}>
<form method="POST">
<div>
<div className={css['form-title']}>Username</div>
<div className={css['form-content']}>
<input
type="text"
placeholder="Username"
- value={this.state.usernameOrEmail}
- onChange={this.onChangeUsernameOrEmail}
- ref={this.usernameOrEmailInputRef}
+ value={this.state.username}
+ onChange={this.onChangeUsername}
+ ref={this.usernameInputRef}
disabled={this.props.inputDisabled}
/>
</div>
</div>
<div>
<div className={css['form-title']}>Password</div>
<div className={css['form-content']}>
<input
type="password"
placeholder="Password"
value={this.state.password}
onChange={this.onChangePassword}
ref={this.passwordInputRef}
disabled={this.props.inputDisabled}
/>
</div>
</div>
<div className={css['form-footer']}>
<input
type="submit"
value="Log in"
onClick={this.onSubmit}
disabled={this.props.inputDisabled}
/>
<div className={css['modal-form-error']}>
{this.state.errorMessage}
</div>
</div>
</form>
</div>
</Modal>
);
}
- usernameOrEmailInputRef = (usernameOrEmailInput: ?HTMLInputElement) => {
- this.usernameOrEmailInput = usernameOrEmailInput;
+ usernameInputRef = (usernameInput: ?HTMLInputElement) => {
+ this.usernameInput = usernameInput;
};
passwordInputRef = (passwordInput: ?HTMLInputElement) => {
this.passwordInput = passwordInput;
};
- onChangeUsernameOrEmail = (event: SyntheticEvent<HTMLInputElement>) => {
+ onChangeUsername = (event: SyntheticEvent<HTMLInputElement>) => {
const target = event.target;
invariant(target instanceof HTMLInputElement, 'target not input');
- this.setState({ usernameOrEmail: target.value });
+ this.setState({ username: target.value });
};
onChangePassword = (event: SyntheticEvent<HTMLInputElement>) => {
const target = event.target;
invariant(target instanceof HTMLInputElement, 'target not input');
this.setState({ password: target.value });
};
onSubmit = (event: SyntheticEvent<HTMLInputElement>) => {
event.preventDefault();
- if (this.state.usernameOrEmail.search(oldValidUsernameRegex) === -1) {
+ if (this.state.username.search(oldValidUsernameRegex) === -1) {
this.setState(
{
- usernameOrEmail: '',
+ username: '',
errorMessage: 'alphanumeric usernames only',
},
() => {
- invariant(
- this.usernameOrEmailInput,
- 'usernameOrEmailInput ref unset',
- );
- this.usernameOrEmailInput.focus();
+ invariant(this.usernameInput, 'usernameInput ref unset');
+ this.usernameInput.focus();
},
);
return;
}
const extraInfo = this.props.logInExtraInfo();
this.props.dispatchActionPromise(
logInActionTypes,
this.logInAction(extraInfo),
undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);
};
async logInAction(extraInfo: LogInExtraInfo) {
try {
const result = await this.props.logIn({
- username: this.state.usernameOrEmail,
+ username: this.state.username,
password: this.state.password,
...extraInfo,
});
this.clearModal();
return result;
} catch (e) {
if (e.message === 'invalid_parameters') {
this.setState(
{
- usernameOrEmail: '',
+ username: '',
errorMessage: "user doesn't exist",
},
() => {
- invariant(
- this.usernameOrEmailInput,
- 'usernameOrEmailInput ref unset',
- );
- this.usernameOrEmailInput.focus();
+ invariant(this.usernameInput, 'usernameInput ref unset');
+ this.usernameInput.focus();
},
);
} else if (e.message === 'invalid_credentials') {
this.setState(
{
password: '',
errorMessage: 'wrong password',
},
() => {
invariant(this.passwordInput, 'passwordInput ref unset');
this.passwordInput.focus();
},
);
} else {
this.setState(
{
- usernameOrEmail: '',
+ username: '',
password: '',
errorMessage: 'unknown error',
},
() => {
- invariant(
- this.usernameOrEmailInput,
- 'usernameOrEmailInput ref unset',
- );
- this.usernameOrEmailInput.focus();
+ invariant(this.usernameInput, 'usernameInput ref unset');
+ this.usernameInput.focus();
},
);
}
throw e;
}
}
clearModal = () => {
this.props.setModal(null);
};
}
const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
export default React.memo<BaseProps>(function ConnectedLoginModal(
props: BaseProps,
) {
const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
const loginExtraInfo = useSelector(webLogInExtraInfoSelector);
const callLogIn = useServerCall(logIn);
const dispatchActionPromise = useDispatchActionPromise();
return (
<LogInModal
{...props}
inputDisabled={inputDisabled}
logInExtraInfo={loginExtraInfo}
logIn={callLogIn}
dispatchActionPromise={dispatchActionPromise}
/>
);
});

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 23, 2:46 AM (17 h, 11 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2559418
Default Alt Text
(8 KB)

Event Timeline