import React, {Component} from 'react';
import classnames from 'classnames';
import Link from '../base/Link';
import Modal from '../base/Modal';
import ModalBody from '../base/ModalBody';
import ModalHeader from '../base/ModalHeader';
import ModalFooter from '../base/ModalFooter';
import * as session from '../../../sync/session';
import {showModal} from './index';
import LoginModal from './LoginModal';
import * as sync from '../../../sync';
import {trackEvent} from '../../../analytics';
const STEP_BASIC_INFO = 'basic';
const STEP_CONFIRM_PASSWORD = 'confirm';
const STEP_LOGIN_INFO = 'done';
class SignupModal extends Component {
state = {
step: STEP_BASIC_INFO,
error: '',
loading: false
};
async _handleSignup (e) {
e.preventDefault();
if (this.state.step === STEP_BASIC_INFO) {
this.setState({step: STEP_CONFIRM_PASSWORD});
return;
}
this.setState({error: '', loading: true});
const email = this._emailInput.value;
const password = this._passwordInput.value;
const firstName = this._nameFirstInput.value;
const lastName = this._nameLastInput.value;
try {
await session.signup(firstName, lastName, email, password);
this.setState({step: STEP_LOGIN_INFO, loading: false});
sync.init();
} catch (e) {
this.setState({error: e.message, loading: false});
}
}
_handleLogin (e) {
e.preventDefault();
this.modal.hide();
showModal(LoginModal, {});
trackEvent('Signup', 'Switch to Login');
}
_checkPasswordsMatch () {
if (this._passwordInput.value !== this._passwordConfirmInput.value) {
this._passwordConfirmInput.setCustomValidity('Password didn\'t match')
} else {
this._passwordConfirmInput.setCustomValidity('')
}
}
show () {
this.setState({step: STEP_BASIC_INFO, loading: false, error: ''});
this.modal.show();
setTimeout(() => this._nameFirstInput.focus(), 200);
}
render () {
const {step} = this.state;
let inner = null;
if (step === STEP_BASIC_INFO || step === STEP_CONFIRM_PASSWORD) {
inner = [
Keep your password safe because it cannot be recovered
A verification email has been sent to your email address.
Read More
{" "}
about how your password is used to encrypt your data
Thanks for signing up!