diff options
Diffstat (limited to 'ui/app/components/main_panel/imap_button.js')
-rw-r--r-- | ui/app/components/main_panel/imap_button.js | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/ui/app/components/main_panel/imap_button.js b/ui/app/components/main_panel/imap_button.js new file mode 100644 index 00000000..98d8bad0 --- /dev/null +++ b/ui/app/components/main_panel/imap_button.js @@ -0,0 +1,121 @@ +// +// Button to show details for configuring mail clients +// + +import React from 'react' +import { Modal, Form, FormGroup, ControlLabel, FormControl, Col, Label, Button} from 'react-bootstrap' +import Account from 'models/account' +import bitmask from 'lib/bitmask' + +export default class IMAPButton extends React.Component { + + static get defaultProps() {return{ + account: null, + title: "Connect Mail Client" + }} + + constructor(props) { + super(props) + this.state = { + showModal: false, + imapPort: '1984', + smtpPort: '2013', + token: '' + } + this.onClick = this.onClick.bind(this) + this.onClose = this.onClose.bind(this) + } + + onClose() { + this.setState({showModal: false}) + } + + onClick() { + if (!this.state.token) { + bitmask.mail.get_token().then(response => { + if (response.user == this.props.account.address) { + this.setState({token: response.token}) + } + }) + } + this.setState({showModal: true}) + } + + componentWillMount() {} + + // don't allow fields to be changed + onChange() {} + + render () { + let rowStyle = {height: '30px'} // to match bootstrap's input element height + let form = null + let modal = null + + if (this.state.showModal) { + form = ( + <Form horizontal> + <p> + You can use any application that supports IMAP to read and send + email through Bitmask. + </p> + <h3>Configuration for Thunderbird</h3> + <p> + For Thunderbird, you can use the Bitmask extension. Search for + "Bitmask" in Thunderbird's add-on manager. + </p> + <h3>Configuration for other mail clients</h3> + <p> + Alternately, configure your mail client with the following options: + </p> + <FormGroup> + <Col sm={2} componentClass={ControlLabel}>Username</Col> + <Col sm={10}> + <FormControl value={this.props.account.address} onChange={this.onChange}/> + </Col> + </FormGroup> + <FormGroup> + <Col sm={2} componentClass={ControlLabel}>Password</Col> + <Col sm={10}> + <FormControl value={this.state.token} onChange={this.onChange}/> + </Col> + </FormGroup> + <FormGroup> + <Col sm={2} componentClass={ControlLabel}>IMAP</Col> + <Col sm={10} className="center-vertical" style={rowStyle}> + <div className="center-item"> + <Label>Host</Label> localhost + + <Label>Port</Label> {this.state.imapPort} + </div> + </Col> + </FormGroup> + <FormGroup> + <Col sm={2} componentClass={ControlLabel}>SMTP</Col> + <Col sm={10} className="center-vertical" style={rowStyle}> + <div className="center-item"> + <Label>Host</Label> localhost + + <Label>Port</Label> {this.state.smtpPort} + </div> + </Col> + </FormGroup> + </Form> + ) + modal = ( + <Modal show={true} onHide={this.onClose}> + <Modal.Header closeButton> + <Modal.Title>{this.props.title}</Modal.Title> + </Modal.Header> + <Modal.Body> + {form} + </Modal.Body> + </Modal> + ) + } + + return ( + <Button onClick={this.onClick}>{this.props.title} {modal}</Button> + ) + } + +} |