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 = [ Sign Up For a New Account,
this._nameFirstInput = n}/>
this._nameLastInput = n}/>
this._emailInput = n}/>
this._passwordInput = n}/>
{step === STEP_CONFIRM_PASSWORD ? (

Keep your password safe because it cannot be recovered
Read More {" "} about how your password is used to encrypt your data

this._passwordConfirmInput = n}/>
) : null} {this.state.error ? (
** {this.state.error}
) : null}
,
Already have an account? {" "} Login
] } else { inner = [ Account Created,

Thanks for signing up!

A verification email has been sent to your email address.

, ] } return (
this.modal = m} {...this.props}> {inner}
) } } SignupModal.propTypes = {}; export default SignupModal;