import React from 'react'; import {isValidHost} from './onboarding-helpers'; import CreatePageForForm from './decorators/create-page-for-form'; import FormField from './form-field'; class AccountIMAPSettingsForm extends React.Component { static displayName = 'AccountIMAPSettingsForm'; static propTypes = { accountInfo: React.PropTypes.object, errorFieldNames: React.PropTypes.array, submitting: React.PropTypes.bool, onConnect: React.PropTypes.func, onFieldChange: React.PropTypes.func, onFieldKeyPress: React.PropTypes.func, }; static submitLabel = () => { return 'Connect Account'; } static titleLabel = () => { return 'Set up your account'; } static subtitleLabel = () => { return 'Complete the IMAP and SMTP settings below to connect your account.'; } static validateAccountInfo = (accountInfo) => { let errorMessage = null; const errorFieldNames = []; for (const type of ['imap', 'smtp']) { if (!accountInfo[`${type}_host`] || !accountInfo[`${type}_username`] || !accountInfo[`${type}_password`]) { return {errorMessage, errorFieldNames, populated: false}; } if (!isValidHost(accountInfo[`${type}_host`])) { errorMessage = "Please provide a valid hostname or IP adddress."; errorFieldNames.push(`${type}_host`); } // todo bg // if (accountInfo[`${type}_host`] === 'imap.gmail.com') { // errorMessage = "Please link Gmail accounts by choosing 'Google' on the account type screen."; // errorFieldNames.push(`${type}_host`); // } if (!Number.isInteger(accountInfo[`${type}_port`] / 1)) { errorMessage = "Please provide a valid port number."; errorFieldNames.push(`${type}_port`); } } return {errorMessage, errorFieldNames, populated: true}; } submit() { this.props.onConnect(); } renderPortDropdown(protocol) { if (!["imap", "smtp"].includes(protocol)) { throw new Error(`Can't render port dropdown for protocol '${protocol}'`); } const {accountInfo, submitting, onFieldKeyPress, onFieldChange} = this.props; if (protocol === "imap") { return ( ) } if (protocol === "smtp") { return ( ) } return ""; } renderSecurityDropdown(protocol) { const {accountInfo, submitting, onFieldKeyPress, onFieldChange} = this.props; return (
) } renderFieldsForType(type) { return (
{this.renderPortDropdown(type)} {this.renderSecurityDropdown(type)}
); } render() { return (
Incoming Mail (IMAP):
{this.renderFieldsForType('imap')}
Outgoing Mail (SMTP):
{this.renderFieldsForType('smtp')}
) } } export default CreatePageForForm(AccountIMAPSettingsForm);