blob: fcd9a3844f6dd5cbec01977f4256b9d429bcb996 (
plain)
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
|
import React, { Component } from 'react'
import { Arrow } from '../nav/viewer.icons'
const initialState = {
email: "",
agreed: false,
subscribed: false,
}
export default class SubscriptionForm extends Component {
state = {
...initialState
}
constructor(props) {
super(props)
this.handleChange = this.handleChange.bind(this)
this.handleKeyDown = this.handleKeyDown.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleCheckbox = this.handleCheckbox.bind(this)
this.handleReset = this.handleReset.bind(this)
}
handleChange(e) {
this.setState({ email: e.target.value })
}
handleCheckbox(e) {
this.setState({ agreed: e.target.checked })
}
handleKeyDown(e) {
// disable tab
if (e.keyCode === 9) {
e.preventDefault()
}
}
handleSubmit(e) {
e.preventDefault()
if (!this.state.agreed) {
return
}
this.setState({ subscribed: true })
}
handleReset(e) {
this.setState({ ...initialState })
}
render() {
return (
<form
className={this.state.subscribed ? "subscription-form subscribed" : "subscription-form"}
onSubmit={this.handleSubmit}
>
<div className="subscription-callout">
Subscribe to e-flux and get notified when the next episode is available.
</div>
<div className="subscription-row">
<input
type="email"
name="email"
value={this.state.email}
placeholder="Email address here"
autoCorrect="off"
autoCapitalize="off"
spellCheck="false"
onKeyDown={this.handleKeyDown}
onChange={this.handleChange}
/>
<button className="subscription-submit" onClick={this.handleSubmit}>
{'Submit '}
<Arrow type='right' />
</button>
</div>
<label className="subscription-privacy checkbox">
<input
type="checkbox"
checked={this.state.agreed}
onChange={this.handleCheckbox}
/>
<span>
{"I have read e-flux’s privacy policy "}
{"and agree that e-flux may send me announcements to the email address "}
{"entered above and that my data will be processed for this "}
{"purpose in accordance with e-flux’s "}
<a href="/privacy">privacy policy.</a>
</span>
</label>
<div className="subscription-thanks">
Thanks! You will receive an email soon confirming your subscription.
<br />
<button className="subscription-reset" onClick={this.handleReset}>OK</button>
</div>
</form>
)
}
}
|
