1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
//
// 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: "Configure A 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(this.props.account.id).then(response => {
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>
)
}
}
|
