-
Notifications
You must be signed in to change notification settings - Fork 504
/
template.success.js
175 lines (166 loc) · 7.2 KB
/
template.success.js
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
import React from 'react'
import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'
import { reduxForm } from 'redux-form'
import { Button, Link, Text } from 'blockchain-info-components'
import { SecurityComponent, SecurityContainer, SecurityDescription, SecurityHeader, SecurityIcon, SecuritySummary, IconContainer } from 'components/Security'
import ChangeEmailSteps from '../Components/ChangeEmailSteps'
import EmailVerificationSteps from '../Components/EmailVerificationSteps'
const EmailExplanation = styled.div`
`
const ChangeEmailText = styled(Text)`
cursor: pointer;
margin-top: 5px;
font-size: 10px;
@media (min-width: 320px) and (max-width: 991px) {
font-size: 12px;
}
@media (min-width: 1224px) {
font-size: 12px;
margin-right: 12px;
}
`
const EmailSecurityComponent = styled(SecurityComponent)`
button:first-of-type {
margin-bottom: 5px;
}
`
const EmailButton = styled(Button)`
width: 100px;
font-size: 12px;
min-width: 0px;
@media (min-width: 320px) and (max-width: 991px) {
font-size: 14px;
width: 140px;
}
@media (min-width: 1224px) {
width: 140px;
min-width: 0px;
font-size: 14px;
}
`
const IconAndHeaderContainer = styled.div`
opacity: ${props => props.success ? 0.3 : 1};
@media(min-width: 320px) {
display: grid;
grid-template-columns: 15% 85%;
}
`
const GridContainer = styled(SecurityContainer)`
grid-template-columns: 85% 15%;
`
const FieldsContainer = styled.div`
display: grid;
grid-template-columns: 15% 85%;
`
const ResendContainer = styled.div`
display: flex;
flex-direction: row;
margin-top: 8px;
div:first-of-type {
margin-right: 5px;
}
`
const EmailAddress = (props) => {
const { data, ui, handleSubmitVerification, handleResend, invalid, code } = props
const { email, verified, failed } = data
const isVerified = verified === 1
const uiHelper = () => !ui.verifyToggled && !ui.changeEmailToggled && !props.alone
const securityHeaderHelper = () => {
if ((!ui.verifyToggled && !ui.changeEmailToggled) && !props.alone) {
if (isVerified) return <FormattedMessage id='scenes.security.email.verifiedtitle' defaultMessage='Email Address' />
return <FormattedMessage id='scenes.security.email.unverifiedemail.title' defaultMessage='Verify Email Address' />
}
if (ui.changeEmailToggled) return <FormattedMessage id='scenes.security.email.verifiedemail.change' defaultMessage='Change Email Address' />
return <FormattedMessage id='scenes.security.email.unverifiedemail.verifyemail' defaultMessage='Verify Email Address' />
}
const securityDescriptionHelper = () => {
if ((!ui.verifyToggled && !ui.changeEmailToggled) && !props.alone) {
if (isVerified) {
return (
<React.Fragment>
<EmailExplanation>
<FormattedMessage id='scenes.security.email.verifieddescription' defaultMessage='You’ve verified ' />
{email}
<FormattedMessage id='scenes.security.email.verifieddescription2' defaultMessage='. Select ‘Change Email’ to modify this existing address. ' />
<FormattedMessage id='scenes.security.email.verifieddescription3' defaultMessage=' We will use this email to authorize logins, send payment notifications, and notify you of wallet updates.' />
</EmailExplanation>
</React.Fragment>
)
}
return (
<EmailExplanation>
<FormattedMessage id='scenes.security.email.unverifieddescription' defaultMessage='We have sent a verification email to ' />
{email}
<FormattedMessage id='scenes.security.email.unverifieddescription2' defaultMessage='. Please enter the code you’ve received to your email in order to complete the verification process. We will use this email to authorize logins, send payment notifications, and notify you of wallet updates.' />
</EmailExplanation>
)
}
if (ui.changeEmailToggled) return <FormattedMessage id='scenes.security.email.yourverifiedemailaddress' defaultMessage='Your verified email address is used to send login codes when suspicious or unusual activity is detected, to remind you of your wallet login ID, and to send payment alerts when you receive funds.' />
return (
<React.Fragment>
<Text size='14px' weight={200}>
<FormattedMessage id='scenes.security.email.verify.wehavesentcode' defaultMessage='We have sent a verification code to' />
<span> {email}</span>
<FormattedMessage id='scenes.security.email.verify.pleaseenter' defaultMessage='. Please enter this code below to complete your email verification process.' />
</Text>
<ResendContainer>
<Text size='14px' weight={200}>
<FormattedMessage id='scenes.security.email.verify.didnotreceive' defaultMessage='Didn’t receive the verification email?' />
</Text>
<Link onClick={props.handleResend} size='14px' weight={300}>
<FormattedMessage id='scenes.security.email.verify.resend' defaultMessage='Resend email' />
</Link>
</ResendContainer>
</React.Fragment>
)
}
const renderFields = () => {
if ((!ui.verifyToggled && !ui.changeEmailToggled) && !props.alone) return null
else if (ui.changeEmailToggled) return <ChangeEmailSteps handleEmailChangeCancel={props.handleEmailChangeCancel} handleEmailChangeSubmit={props.handleEmailChangeSubmit} invalid={invalid} />
else return <EmailVerificationSteps failed={failed} handleSubmitVerification={handleSubmitVerification} handleResend={handleResend} success={ui.successToggled} emailCode={code} />
}
return (
<GridContainer>
<IconAndHeaderContainer success={ui.successToggled}>
<IconContainer>
<SecurityIcon name='email' enabled={isVerified} />
</IconContainer>
<SecuritySummary>
<SecurityHeader>
{ securityHeaderHelper() }
</SecurityHeader>
<SecurityDescription>
{ securityDescriptionHelper() }
</SecurityDescription>
</SecuritySummary>
</IconAndHeaderContainer>
<EmailSecurityComponent>
{
uiHelper() && !verified
? <React.Fragment>
<EmailButton nature='primary' onClick={props.handleVerifyClick}>
<FormattedMessage id='scenes.security.email.settings.updateform.sendcode' defaultMessage='Send Code' />
</EmailButton>
<ChangeEmailText color='brand-secondary' weight={300} onClick={props.handleChangeEmailView}>
<FormattedMessage id='scenes.security.email.upateform.changetext' defaultMessage='Change Your Email' />
</ChangeEmailText>
</React.Fragment>
: null
}
{
uiHelper() && verified
? <EmailButton nature='primary' onClick={props.handleChangeEmailView}>
<FormattedMessage id='scenes.security.email.settings.updateform.change' defaultMessage='Change Email' />
</EmailButton>
: null
}
</EmailSecurityComponent>
<FieldsContainer>
<div />
{ renderFields() }
</FieldsContainer>
</GridContainer>
)
}
export default reduxForm({ form: 'securityEmailAddress' })(EmailAddress)