Convert all of the login components into hook based ones
This commit is contained in:
Dane Everitt
parent
aabf9b8a70
commit
328347fab7
20 changed files with 435 additions and 598 deletions
|
|
@ -1,109 +1,78 @@
|
|||
import * as React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
|
||||
import { connect } from 'react-redux';
|
||||
import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationState } from '@/state/types';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
||||
type Props = Readonly<{
|
||||
pushFlashMessage: typeof pushFlashMessage;
|
||||
clearAllFlashMessages: typeof clearAllFlashMessages;
|
||||
}>;
|
||||
export default () => {
|
||||
const [ isSubmitting, setSubmitting ] = React.useState(false);
|
||||
const [ email, setEmail ] = React.useState('');
|
||||
|
||||
type State = Readonly<{
|
||||
email: string;
|
||||
isSubmitting: boolean;
|
||||
}>;
|
||||
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
|
||||
|
||||
class ForgotPasswordContainer extends React.PureComponent<Props, State> {
|
||||
emailField = React.createRef<HTMLInputElement>();
|
||||
const handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value);
|
||||
|
||||
state: State = {
|
||||
email: '',
|
||||
isSubmitting: false,
|
||||
};
|
||||
|
||||
handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
|
||||
email: e.target.value,
|
||||
});
|
||||
|
||||
handleSubmission = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
const handleSubmission = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ isSubmitting: true }, () => {
|
||||
this.props.clearAllFlashMessages();
|
||||
requestPasswordResetEmail(this.state.email)
|
||||
.then(response => {
|
||||
if (this.emailField.current) {
|
||||
this.emailField.current.value = '';
|
||||
}
|
||||
|
||||
this.props.pushFlashMessage({
|
||||
type: 'success', title: 'Success', message: response,
|
||||
});
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
this.props.pushFlashMessage({
|
||||
type: 'error',
|
||||
title: 'Error',
|
||||
message: httpErrorToHuman(error),
|
||||
});
|
||||
})
|
||||
.then(() => this.setState({ isSubmitting: false }));
|
||||
});
|
||||
setSubmitting(true);
|
||||
clearFlashes();
|
||||
requestPasswordResetEmail(email)
|
||||
.then(response => {
|
||||
setEmail('');
|
||||
addFlash({ type: 'success', title: 'Success', message: response });
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
|
||||
})
|
||||
.then(() => setSubmitting(false));
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Request Password Reset
|
||||
</h2>
|
||||
<LoginFormContainer onSubmit={this.handleSubmission}>
|
||||
<label htmlFor={'email'}>Email</label>
|
||||
<input
|
||||
ref={this.emailField}
|
||||
id={'email'}
|
||||
type={'email'}
|
||||
required={true}
|
||||
className={'input'}
|
||||
onChange={this.handleFieldUpdate}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<p className={'input-help'}>
|
||||
Enter your account email address to receive instructions on resetting your password.
|
||||
</p>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
className={'btn btn-primary btn-jumbo flex justify-center'}
|
||||
disabled={this.state.isSubmitting || this.state.email.length < 5}
|
||||
>
|
||||
{this.state.isSubmitting ?
|
||||
<div className={'spinner-circle spinner-sm spinner-white'}></div>
|
||||
:
|
||||
'Send Email'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
pushFlashMessage,
|
||||
clearAllFlashMessages,
|
||||
return (
|
||||
<div>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Request Password Reset
|
||||
</h2>
|
||||
<FlashMessageRender/>
|
||||
<LoginFormContainer onSubmit={handleSubmission}>
|
||||
<label htmlFor={'email'}>Email</label>
|
||||
<input
|
||||
id={'email'}
|
||||
type={'email'}
|
||||
required={true}
|
||||
className={'input'}
|
||||
value={email}
|
||||
onChange={handleFieldUpdate}
|
||||
autoFocus={true}
|
||||
/>
|
||||
<p className={'input-help'}>
|
||||
Enter your account email address to receive instructions on resetting your password.
|
||||
</p>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
className={'btn btn-primary btn-jumbo flex justify-center'}
|
||||
disabled={isSubmitting || email.length < 5}
|
||||
>
|
||||
{isSubmitting ?
|
||||
<div className={'spinner-circle spinner-sm spinner-white'}></div>
|
||||
:
|
||||
'Send Email'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(ForgotPasswordContainer);
|
||||
|
|
|
|||
|
|
@ -1,112 +1,91 @@
|
|||
import * as React from 'react';
|
||||
import { RouteComponentProps, StaticContext } from 'react-router';
|
||||
import { connect } from 'react-redux';
|
||||
import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
|
||||
import NetworkErrorMessage from '@/components/NetworkErrorMessage';
|
||||
import MessageBox from '@/components/MessageBox';
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import loginCheckpoint from '@/api/auth/loginCheckpoint';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationState } from '@/state/types';
|
||||
import useRouter from 'use-react-router';
|
||||
import { StaticContext } from 'react-router';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
|
||||
type State = Readonly<{
|
||||
isLoading: boolean;
|
||||
errorMessage?: string;
|
||||
code: string;
|
||||
}>;
|
||||
export default () => {
|
||||
const [ code, setCode ] = useState('');
|
||||
const [ isLoading, setIsLoading ] = useState(false);
|
||||
|
||||
class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps<{}, StaticContext, { token: string }>, State> {
|
||||
state: State = {
|
||||
code: '',
|
||||
isLoading: false,
|
||||
};
|
||||
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
|
||||
const { history, location: { state } } = useRouter<{}, StaticContext, { token?: string }>();
|
||||
|
||||
componentDidMount () {
|
||||
const { state } = this.props.location;
|
||||
if (!state || !state.token) {
|
||||
this.props.history.replace('/login');
|
||||
}
|
||||
if (!state || !state.token) {
|
||||
return history.replace('/login');
|
||||
}
|
||||
|
||||
onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.value.length > 6) {
|
||||
e.target.value = e.target.value.substring(0, 6);
|
||||
return e.preventDefault();
|
||||
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.value.length <= 6) {
|
||||
setCode(e.target.value);
|
||||
}
|
||||
|
||||
this.setState({ code: e.target.value });
|
||||
};
|
||||
|
||||
submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
const submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
this.setState({ isLoading: true }, () => {
|
||||
loginCheckpoint(this.props.location.state.token, this.state.code)
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
// @ts-ignore
|
||||
window.location = response.intended || '/';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
this.setState({ errorMessage: httpErrorToHuman(error), isLoading: false });
|
||||
});
|
||||
});
|
||||
setIsLoading(true);
|
||||
clearFlashes();
|
||||
|
||||
loginCheckpoint(state.token!, code)
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
// @ts-ignore
|
||||
window.location = response.intended || '/';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
|
||||
setIsLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Device Checkpoint
|
||||
</h2>
|
||||
<NetworkErrorMessage message={this.state.errorMessage}/>
|
||||
<LoginFormContainer onSubmit={this.submit}>
|
||||
<MessageBox type={'warning'}>
|
||||
This account is protected with two-factor authentication. A valid authentication token must
|
||||
be provided in order to continue.
|
||||
</MessageBox>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'authentication_code'}>Authentication Code</label>
|
||||
<input
|
||||
id={'authentication_code'}
|
||||
type={'number'}
|
||||
autoFocus={true}
|
||||
className={'input'}
|
||||
onChange={this.onChangeHandler}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={this.state.isLoading || this.state.code.length !== 6}
|
||||
>
|
||||
{this.state.isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Continue'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
pushFlashMessage,
|
||||
clearAllFlashMessages,
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Device Checkpoint
|
||||
</h2>
|
||||
<FlashMessageRender/>
|
||||
<LoginFormContainer onSubmit={submit}>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'authentication_code'}>Authentication Code</label>
|
||||
<input
|
||||
id={'authentication_code'}
|
||||
type={'number'}
|
||||
autoFocus={true}
|
||||
className={'input'}
|
||||
value={code}
|
||||
onChange={onChangeHandler}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={isLoading || code.length !== 6}
|
||||
>
|
||||
{isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Continue'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(LoginCheckpointContainer);
|
||||
|
|
|
|||
|
|
@ -1,111 +1,96 @@
|
|||
import * as React from 'react';
|
||||
import { Link, RouteComponentProps } from 'react-router-dom';
|
||||
import React, { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import login from '@/api/auth/login';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import NetworkErrorMessage from '@/components/NetworkErrorMessage';
|
||||
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationState } from '@/state/types';
|
||||
import useRouter from 'use-react-router';
|
||||
|
||||
type State = Readonly<{
|
||||
errorMessage?: string;
|
||||
isLoading: boolean;
|
||||
username?: string;
|
||||
password?: string;
|
||||
}>;
|
||||
export default () => {
|
||||
const [ username, setUsername ] = useState('');
|
||||
const [ password, setPassword ] = useState('');
|
||||
const [ isLoading, setLoading ] = useState(false);
|
||||
const { history } = useRouter();
|
||||
|
||||
export default class LoginContainer extends React.PureComponent<RouteComponentProps, State> {
|
||||
state: State = {
|
||||
isLoading: false,
|
||||
};
|
||||
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
|
||||
|
||||
submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
const submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const { username, password } = this.state;
|
||||
setLoading(true);
|
||||
clearFlashes();
|
||||
|
||||
this.setState({ isLoading: true }, () => {
|
||||
login(username!, password!)
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
// @ts-ignore
|
||||
window.location = response.intended || '/';
|
||||
return;
|
||||
}
|
||||
login(username!, password!)
|
||||
.then(response => {
|
||||
if (response.complete) {
|
||||
// @ts-ignore
|
||||
window.location = response.intended || '/';
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.history.replace('/login/checkpoint', {
|
||||
token: response.confirmationToken,
|
||||
});
|
||||
})
|
||||
.catch(error => this.setState({
|
||||
isLoading: false,
|
||||
errorMessage: httpErrorToHuman(error),
|
||||
}, () => console.error(error)));
|
||||
});
|
||||
history.replace('/login/checkpoint', { token: response.confirmationToken });
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
|
||||
setLoading(false);
|
||||
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
|
||||
});
|
||||
};
|
||||
|
||||
canSubmit () {
|
||||
if (!this.state.username || !this.state.password) {
|
||||
return false;
|
||||
}
|
||||
const canSubmit = () => username && password && username.length > 0 && password.length > 0;
|
||||
|
||||
return this.state.username.length > 0 && this.state.password.length > 0;
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
|
||||
[e.target.id]: e.target.value,
|
||||
});
|
||||
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Login to Continue
|
||||
</h2>
|
||||
<NetworkErrorMessage message={this.state.errorMessage}/>
|
||||
<LoginFormContainer onSubmit={this.submit}>
|
||||
<label htmlFor={'username'}>Username or Email</label>
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Login to Continue
|
||||
</h2>
|
||||
<FlashMessageRender/>
|
||||
<LoginFormContainer onSubmit={submit}>
|
||||
<label htmlFor={'username'}>Username or Email</label>
|
||||
<input
|
||||
id={'username'}
|
||||
autoFocus={true}
|
||||
required={true}
|
||||
className={'input'}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'password'}>Password</label>
|
||||
<input
|
||||
id={'username'}
|
||||
autoFocus={true}
|
||||
id={'password'}
|
||||
required={true}
|
||||
type={'password'}
|
||||
className={'input'}
|
||||
onChange={this.handleFieldUpdate}
|
||||
disabled={this.state.isLoading}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'password'}>Password</label>
|
||||
<input
|
||||
id={'password'}
|
||||
required={true}
|
||||
type={'password'}
|
||||
className={'input'}
|
||||
onChange={this.handleFieldUpdate}
|
||||
disabled={this.state.isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={this.state.isLoading || !this.canSubmit()}
|
||||
>
|
||||
{this.state.isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Login'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/password'}
|
||||
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={isLoading || !canSubmit()}
|
||||
>
|
||||
{isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Login'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/password'}
|
||||
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLA
|
|||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
<div className={'flex-none'}>
|
||||
<div className={'flex-none select-none'}>
|
||||
<img src={'/assets/pterodactyl.svg'} className={'w-64'}/>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
|
|
|
|||
|
|
@ -1,151 +1,109 @@
|
|||
import * as React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { RouteComponentProps } from 'react-router';
|
||||
import { parse } from 'query-string';
|
||||
import { Link } from 'react-router-dom';
|
||||
import NetworkErrorMessage from '@/components/NetworkErrorMessage';
|
||||
import performPasswordReset from '@/api/auth/performPasswordReset';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import { connect } from 'react-redux';
|
||||
import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
|
||||
import LoginFormContainer from '@/components/auth/LoginFormContainer';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationState } from '@/state/types';
|
||||
|
||||
type State = Readonly<{
|
||||
email?: string;
|
||||
password?: string;
|
||||
passwordConfirm?: string;
|
||||
isLoading: boolean;
|
||||
errorMessage?: string;
|
||||
}>;
|
||||
type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
|
||||
|
||||
type Props = Readonly<RouteComponentProps<{ token: string }> & {
|
||||
pushFlashMessage: typeof pushFlashMessage;
|
||||
clearAllFlashMessages: typeof clearAllFlashMessages;
|
||||
}>;
|
||||
export default (props: Props) => {
|
||||
const [ isLoading, setIsLoading ] = useState(false);
|
||||
const [ email, setEmail ] = useState('');
|
||||
const [ password, setPassword ] = useState('');
|
||||
const [ passwordConfirm, setPasswordConfirm ] = useState('');
|
||||
|
||||
class ResetPasswordContainer extends React.PureComponent<Props, State> {
|
||||
state: State = {
|
||||
isLoading: false,
|
||||
};
|
||||
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
|
||||
|
||||
componentDidMount () {
|
||||
const parsed = parse(this.props.location.search);
|
||||
|
||||
this.setState({ email: parsed.email as string || undefined });
|
||||
const parsed = parse(props.location.search);
|
||||
if (email.length === 0 && parsed.email) {
|
||||
setEmail(parsed.email as string);
|
||||
}
|
||||
|
||||
canSubmit () {
|
||||
if (!this.state.password || !this.state.email) {
|
||||
return false;
|
||||
}
|
||||
const canSubmit = () => password && email && password.length >= 8 && password === passwordConfirm;
|
||||
|
||||
return this.state.password.length >= 8 && this.state.password === this.state.passwordConfirm;
|
||||
}
|
||||
|
||||
onPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
|
||||
password: e.target.value,
|
||||
});
|
||||
|
||||
onPasswordConfirmChange = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
|
||||
passwordConfirm: e.target.value,
|
||||
});
|
||||
|
||||
onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
const submit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
const { password, passwordConfirm, email } = this.state;
|
||||
if (!password || !email || !passwordConfirm) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.props.clearAllFlashMessages();
|
||||
this.setState({ isLoading: true }, () => {
|
||||
performPasswordReset(email, {
|
||||
token: this.props.match.params.token,
|
||||
password: password,
|
||||
passwordConfirmation: passwordConfirm,
|
||||
})
|
||||
.then(response => {
|
||||
if (response.redirectTo) {
|
||||
// @ts-ignore
|
||||
window.location = response.redirectTo;
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
clearFlashes();
|
||||
|
||||
this.props.pushFlashMessage({
|
||||
type: 'success',
|
||||
message: 'Your password has been reset, please login to continue.',
|
||||
});
|
||||
this.props.history.push('/login');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
this.setState({ errorMessage: httpErrorToHuman(error) });
|
||||
})
|
||||
.then(() => this.setState({ isLoading: false }));
|
||||
});
|
||||
performPasswordReset(email, {
|
||||
token: props.match.params.token, password, passwordConfirmation: passwordConfirm,
|
||||
})
|
||||
.then(() => {
|
||||
addFlash({ type: 'success', message: 'Your password has been reset, please login to continue.' });
|
||||
props.history.push('/login');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
|
||||
})
|
||||
.then(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Reset Password
|
||||
</h2>
|
||||
<NetworkErrorMessage message={this.state.errorMessage}/>
|
||||
<LoginFormContainer onSubmit={this.onSubmit}>
|
||||
<label>Email</label>
|
||||
<input value={this.state.email || ''} disabled={true}/>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'new_password'}>New Password</label>
|
||||
<input
|
||||
id={'new_password'}
|
||||
type={'password'}
|
||||
required={true}
|
||||
onChange={this.onPasswordChange}
|
||||
/>
|
||||
<p className={'input-help'}>
|
||||
Passwords must be at least 8 characters in length.
|
||||
</p>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'new_password_confirm'}>Confirm New Password</label>
|
||||
<input
|
||||
id={'new_password_confirm'}
|
||||
type={'password'}
|
||||
required={true}
|
||||
onChange={this.onPasswordConfirmChange}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={this.state.isLoading || !this.canSubmit()}
|
||||
>
|
||||
{this.state.isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Reset Password'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = {
|
||||
pushFlashMessage,
|
||||
clearAllFlashMessages,
|
||||
return (
|
||||
<div>
|
||||
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
||||
Reset Password
|
||||
</h2>
|
||||
<FlashMessageRender/>
|
||||
<LoginFormContainer onSubmit={submit}>
|
||||
<label>Email</label>
|
||||
<input className={'input'} value={email} disabled={true}/>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'new_password'}>New Password</label>
|
||||
<input
|
||||
id={'new_password'}
|
||||
className={'input'}
|
||||
type={'password'}
|
||||
required={true}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
/>
|
||||
<p className={'input-help'}>
|
||||
Passwords must be at least 8 characters in length.
|
||||
</p>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<label htmlFor={'new_password_confirm'}>Confirm New Password</label>
|
||||
<input
|
||||
id={'new_password_confirm'}
|
||||
className={'input'}
|
||||
type={'password'}
|
||||
required={true}
|
||||
onChange={e => setPasswordConfirm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-6'}>
|
||||
<button
|
||||
type={'submit'}
|
||||
className={'btn btn-primary btn-jumbo'}
|
||||
disabled={isLoading || !canSubmit()}
|
||||
>
|
||||
{isLoading ?
|
||||
<span className={'spinner white'}> </span>
|
||||
:
|
||||
'Reset Password'
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
<div className={'mt-6 text-center'}>
|
||||
<Link
|
||||
to={'/login'}
|
||||
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
|
||||
>
|
||||
Return to Login
|
||||
</Link>
|
||||
</div>
|
||||
</LoginFormContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default connect(null, mapDispatchToProps)(ResetPasswordContainer);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue