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 {
20
	FormSection,
21
	SectionHeader,
22
	SectionBody,
23
	SectionFooter,
24
	Button,
25
	Link,
26
	InputLabel,
27
	Input,
28
	SectionFooterPrimaryContent,
29
	SectionFooterSecondaryContent,
30
	FormField,
31
	Hint,
32
} from '../Amplify-UI/Amplify-UI-Components-React';
33

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

36 1
const logger = new Logger('ConfirmSignUp');
37

38 1
export class ConfirmSignUp extends AuthPiece<
39
	IAuthPieceProps,
40
	IAuthPieceState
41
> {
42
	constructor(props: IAuthPieceProps) {
43 1
		super(props);
44

45 1
		this._validAuthStates = ['confirmSignUp'];
46 1
		this.confirm = this.confirm.bind(this);
47 1
		this.resend = this.resend.bind(this);
48
	}
49

50 1
	confirm() {
51 1
		const username = this.usernameFromAuthData() || this.inputs.username;
52 1
		const { code } = this.inputs;
53 1
		if (!Auth || typeof Auth.confirmSignUp !== 'function') {
54 0
			throw new Error(
55
				'No Auth module found, please ensure @aws-amplify/auth is imported'
56
			);
57
		}
58

59 1
		Auth.confirmSignUp(username, code)
60 1
			.then(() => this.changeState('signedUp'))
61 0
			.catch(err => this.error(err));
62
	}
63

64 1
	resend() {
65 1
		const username = this.usernameFromAuthData() || this.inputs.username;
66 1
		if (!Auth || typeof Auth.resendSignUp !== 'function') {
67 0
			throw new Error(
68
				'No Auth module found, please ensure @aws-amplify/auth is imported'
69
			);
70
		}
71 1
		Auth.resendSignUp(username)
72 1
			.then(() => logger.debug('code resent'))
73 0
			.catch(err => this.error(err));
74
	}
75

76 1
	showComponent(theme) {
77 1
		const { hide } = this.props;
78 1
		const username = this.usernameFromAuthData();
79

80 1
		if (hide && hide.includes(ConfirmSignUp)) {
81 1
			return null;
82
		}
83

84 1
		return (
85
			<FormSection theme={theme} data-test={auth.confirmSignUp.section}>
86
				<SectionHeader
87
					theme={theme}
88
					data-test={auth.confirmSignUp.headerSection}
89
				>
90
					{I18n.get('Confirm Sign Up')}
91
				</SectionHeader>
92
				<SectionBody theme={theme} data-test={auth.confirmSignUp.bodySection}>
93
					<FormField theme={theme}>
94
						<InputLabel theme={theme}>
95
							{I18n.get(this.getUsernameLabel())} *
96
						</InputLabel>
97
						<Input
98
							placeholder={I18n.get('Username')}
99
							theme={theme}
100
							key="username"
101
							name="username"
102
							onChange={this.handleInputChange}
103
							disabled={username}
104 1
							value={username ? username : ''}
105
							data-test={auth.confirmSignUp.usernameInput}
106
						/>
107
					</FormField>
108

109
					<FormField theme={theme}>
110
						<InputLabel theme={theme}>
111
							{I18n.get('Confirmation Code')} *
112
						</InputLabel>
113
						<Input
114
							autoFocus
115
							placeholder={I18n.get('Enter your code')}
116
							theme={theme}
117
							key="code"
118
							name="code"
119
							autoComplete="off"
120
							onChange={this.handleInputChange}
121
							data-test={auth.confirmSignUp.confirmationCodeInput}
122
						/>
123
						<Hint theme={theme}>
124
							{I18n.get('Lost your code? ')}
125
							<Link
126
								theme={theme}
127
								onClick={this.resend}
128
								data-test={auth.confirmSignUp.resendCodeLink}
129
							>
130
								{I18n.get('Resend Code')}
131
							</Link>
132
						</Hint>
133
					</FormField>
134
				</SectionBody>
135
				<SectionFooter theme={theme}>
136
					<SectionFooterPrimaryContent theme={theme}>
137
						<Button
138
							theme={theme}
139
							onClick={this.confirm}
140
							data-test={auth.confirmSignUp.confirmButton}
141
						>
142
							{I18n.get('Confirm')}
143
						</Button>
144
					</SectionFooterPrimaryContent>
145
					<SectionFooterSecondaryContent theme={theme}>
146
						<Link
147
							theme={theme}
148 0
							onClick={() => this.changeState('signIn')}
149
							data-test={auth.confirmSignUp.backToSignInLink}
150
						>
151
							{I18n.get('Back to Sign In')}
152
						</Link>
153
					</SectionFooterSecondaryContent>
154
				</SectionFooter>
155
			</FormSection>
156
		);
157
	}
158 1
}
159

160
/**
161
 * @deprecated use named import
162
 */
163 1
export default ConfirmSignUp;

Read our documentation on viewing source code .

Loading