57 lines
2 KiB
TypeScript
57 lines
2 KiB
TypeScript
import * as React from 'react';
|
|
import { RouteComponentProps } from 'react-router';
|
|
import { connect } from 'react-redux';
|
|
import { pushFlashMessage, clearAllFlashMessages } from '@/redux/actions/flash';
|
|
import NetworkErrorMessage from '@/components/NetworkErrorMessage';
|
|
|
|
type State = Readonly<{
|
|
isLoading: boolean;
|
|
errorMessage?: string;
|
|
code: string;
|
|
}>;
|
|
|
|
class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps, State> {
|
|
state: State = {
|
|
code: '',
|
|
isLoading: false,
|
|
};
|
|
|
|
render () {
|
|
return (
|
|
<React.Fragment>
|
|
<h2 className={'text-center text-neutral-100 font-medium py-4'}>
|
|
Device Checkpoint
|
|
</h2>
|
|
<NetworkErrorMessage message={this.state.errorMessage}/>
|
|
<form className={'login-box'} onSubmit={() => null}>
|
|
<p className={'text-sm text-neutral-700'}>
|
|
This account is protected with two-factor authentication. Please provide an authentication
|
|
code from your device in order to continue.
|
|
</p>
|
|
<div className={'flex mt-6'}>
|
|
</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>
|
|
</form>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
pushFlashMessage,
|
|
clearAllFlashMessages,
|
|
};
|
|
|
|
export default connect(null, mapDispatchToProps)(LoginCheckpointContainer);
|