1
/*
2
 * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
5
 * the License. A copy of the License is located at
6
 *
7
 *     http://aws.amazon.com/apache2.0/
8
 *
9
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
10
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
11
 * and limitations under the License.
12
 */
13

14 1
import * as React from 'react';
15 1
import { I18n, ConsoleLogger as Logger } from '@aws-amplify/core';
16 1
import { Auth } from '@aws-amplify/auth';
17

18 1
import { AuthPiece, IAuthPieceProps, IAuthPieceState } from './AuthPiece';
19 1
import AmplifyTheme from '../AmplifyTheme';
20 1
import {
21
	FormSection,
22
	SectionHeader,
23
	SectionBody,
24
	SectionFooter,
25
	Input,
26
	RadioRow,
27
	Button,
28
	Link,
29
	SectionFooterPrimaryContent,
30
	SectionFooterSecondaryContent,
31
} from '../Amplify-UI/Amplify-UI-Components-React';
32

33 1
import { auth } from '../Amplify-UI/data-test-attributes';
34

35 1
const logger = new Logger('VerifyContact');
36

37
export interface IVerifyContactState extends IAuthPieceState {
38
	verifyAttr: any;
39
}
40

41 1
export class VerifyContact extends AuthPiece<
42
	IAuthPieceProps,
43
	IVerifyContactState
44
	> {
45
	constructor(props: IAuthPieceProps) {
46 1
		super(props);
47

48 1
		this._validAuthStates = ['verifyContact'];
49 1
		this.verify = this.verify.bind(this);
50 1
		this.submit = this.submit.bind(this);
51

52 1
		this.state = { verifyAttr: null };
53
	}
54

55 1
	verify() {
56 1
		const { contact, checkedValue } = this.inputs;
57 1
		if (!contact) {
58 1
			this.error('Neither Email nor Phone Number selected');
59 1
			return;
60
		}
61

62 1
		if (!Auth || typeof Auth.verifyCurrentUserAttribute !== 'function') {
63 0
			throw new Error(
64
				'No Auth module found, please ensure @aws-amplify/auth is imported'
65
			);
66
		}
67

68 1
		Auth.verifyCurrentUserAttribute(checkedValue)
69
			.then(data => {
70 1
				logger.debug(data);
71 1
				this.setState({ verifyAttr: checkedValue });
72
			})
73 1
			.catch(err => this.error(err));
74
	}
75

76 1
	submit() {
77 1
		const attr = this.state.verifyAttr;
78 1
		const { code } = this.inputs;
79 1
		if (!Auth || typeof Auth.verifyCurrentUserAttributeSubmit !== 'function') {
80 0
			throw new Error(
81
				'No Auth module found, please ensure @aws-amplify/auth is imported'
82
			);
83
		}
84 1
		Auth.verifyCurrentUserAttributeSubmit(attr, code)
85
			.then(data => {
86 1
				logger.debug(data);
87 1
				this.changeState('signedIn', this.props.authData);
88 1
				this.setState({ verifyAttr: null });
89
			})
90 1
			.catch(err => this.error(err));
91
	}
92

93 1
	verifyView() {
94 1
		const user = this.props.authData;
95 1
		if (!user) {
96 1
			logger.debug('no user for verify');
97 1
			return null;
98
		}
99 1
		const { unverified } = user;
100 1
		if (!unverified) {
101 1
			logger.debug('no unverified on user');
102 1
			return null;
103
		}
104 1
		const { email, phone_number } = unverified;
105 1
		const theme = this.props.theme || AmplifyTheme;
106 1
		return (
107
			<div>
108
				{email ? (
109 1
					<RadioRow
110
						placeholder={I18n.get('Email')}
111
						theme={theme}
112
						key="email"
113
						name="contact"
114
						value="email"
115
						onChange={this.handleInputChange}
116
					/>
117
				) : null}
118
				{phone_number ? (
119 1
					<RadioRow
120
						placeholder={I18n.get('Phone Number')}
121
						theme={theme}
122
						key="phone_number"
123
						name="contact"
124
						value="phone_number"
125
						onChange={this.handleInputChange}
126
					/>
127
				) : null}
128
			</div>
129
		);
130
	}
131

132 1
	submitView() {
133 1
		const theme = this.props.theme || AmplifyTheme;
134 1
		return (
135
			<div>
136
				<Input
137
					placeholder={I18n.get('Code')}
138
					theme={theme}
139
					key="code"
140
					name="code"
141
					autoComplete="off"
142
					onChange={this.handleInputChange}
143
				/>
144
			</div>
145
		);
146
	}
147

148 1
	showComponent(theme) {
149 1
		const { authData, hide } = this.props;
150 1
		if (hide && hide.includes(VerifyContact)) {
151 1
			return null;
152
		}
153

154 1
		return (
155
			<FormSection theme={theme} data-test={auth.verifyContact.section}>
156
				<SectionHeader
157
					theme={theme}
158
					data-test={auth.verifyContact.headerSection}
159
				>
160
					{I18n.get('Account recovery requires verified contact information')}
161
				</SectionHeader>
162
				<SectionBody theme={theme} data-test={auth.verifyContact.bodySection}>
163 1
					{this.state.verifyAttr ? this.submitView() : this.verifyView()}
164
				</SectionBody>
165
				<SectionFooter theme={theme}>
166
					<SectionFooterPrimaryContent theme={theme}>
167
						{this.state.verifyAttr ? (
168 1
							<Button
169
								theme={theme}
170
								onClick={this.submit}
171
								data-test={auth.verifyContact.submitButton}
172
							>
173
								{I18n.get('Submit')}
174
							</Button>
175
						) : (
176
								<Button
177
									theme={theme}
178
									onClick={this.verify}
179
									data-test={auth.verifyContact.verifyButton}
180
								>
181
									{I18n.get('Verify')}
182
								</Button>
183
							)}
184
					</SectionFooterPrimaryContent>
185
					<SectionFooterSecondaryContent theme={theme}>
186
						<Link
187
							theme={theme}
188 1
							onClick={() => this.changeState('signedIn', authData)}
189
							data-test={auth.verifyContact.skipLink}
190
						>
191
							{I18n.get('Skip')}
192
						</Link>
193
					</SectionFooterSecondaryContent>
194
				</SectionFooter>
195
			</FormSection>
196
		);
197
	}
198 1
}
199

200
/**
201
 * @deprecated use named import
202
 */
203 1
export default VerifyContact;

Read our documentation on viewing source code .

Loading