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

16 1
import { I18n, ConsoleLogger as Logger } from '@aws-amplify/core';
17 1
import { Auth } from '@aws-amplify/auth';
18

19 1
import { AuthPiece, IAuthPieceProps, IAuthPieceState } from './AuthPiece';
20 1
import AmplifyTheme from '../Amplify-UI/Amplify-UI-Theme';
21

22 1
import {
23
	FormSection,
24
	SectionHeader,
25
	SectionBody,
26
	SectionFooter,
27
	Input,
28
	InputLabel,
29
	Button,
30
	FormField,
31
	Link,
32
	SectionFooterPrimaryContent,
33
	SectionFooterSecondaryContent,
34
} from '../Amplify-UI/Amplify-UI-Components-React';
35

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

38 1
const logger = new Logger('ForgotPassword');
39

40
export interface IForgotPasswordState extends IAuthPieceState {
41
	delivery: any;
42
}
43

44 1
export class ForgotPassword extends AuthPiece<
45
	IAuthPieceProps,
46
	IForgotPasswordState
47
> {
48
	constructor(props: IAuthPieceProps) {
49 1
		super(props);
50

51 1
		this.send = this.send.bind(this);
52 1
		this.submit = this.submit.bind(this);
53

54 1
		this._validAuthStates = ['forgotPassword'];
55 1
		this.state = { delivery: null };
56
	}
57

58 1
	send() {
59 1
		const { authData = {} } = this.props;
60 1
		const username = this.getUsernameFromInput() || authData.username;
61 1
		if (!Auth || typeof Auth.forgotPassword !== 'function') {
62 0
			throw new Error(
63
				'No Auth module found, please ensure @aws-amplify/auth is imported'
64
			);
65
		}
66 1
		Auth.forgotPassword(username)
67
			.then(data => {
68 1
				logger.debug(data);
69 1
				this.setState({ delivery: data.CodeDeliveryDetails });
70
			})
71 0
			.catch(err => this.error(err));
72
	}
73

74 1
	submit() {
75 1
		const { authData = {} } = this.props;
76 1
		const { code, password } = this.inputs;
77 1
		const username = this.getUsernameFromInput() || authData.username;
78

79 1
		if (!Auth || typeof Auth.forgotPasswordSubmit !== 'function') {
80 0
			throw new Error(
81
				'No Auth module found, please ensure @aws-amplify/auth is imported'
82
			);
83
		}
84 1
		Auth.forgotPasswordSubmit(username, code, password)
85
			.then(data => {
86 1
				logger.debug(data);
87 1
				this.changeState('signIn');
88 1
				this.setState({ delivery: null });
89
			})
90 0
			.catch(err => this.error(err));
91
	}
92

93 1
	sendView() {
94 1
		const theme = this.props.theme || AmplifyTheme;
95 1
		return <div>{this.renderUsernameField(theme)}</div>;
96
	}
97

98 1
	submitView() {
99 1
		const theme = this.props.theme || AmplifyTheme;
100 1
		return (
101
			<div>
102
				<FormField theme={theme}>
103
					<InputLabel theme={theme}>{I18n.get('Code')} *</InputLabel>
104
					<Input
105
						placeholder={I18n.get('Code')}
106
						theme={theme}
107
						key="code"
108
						name="code"
109
						autoComplete="off"
110
						onChange={this.handleInputChange}
111
					/>
112
				</FormField>
113
				<FormField theme={theme}>
114
					<InputLabel theme={theme}>{I18n.get('New Password')} *</InputLabel>
115
					<Input
116
						placeholder={I18n.get('New Password')}
117
						theme={theme}
118
						type="password"
119
						key="password"
120
						name="password"
121
						autoComplete="off"
122
						onChange={this.handleInputChange}
123
					/>
124
				</FormField>
125
			</div>
126
		);
127
	}
128

129 1
	showComponent(theme) {
130 1
		const { authState, hide, authData = {} } = this.props;
131 1
		if (hide && hide.includes(ForgotPassword)) {
132 1
			return null;
133
		}
134

135 1
		return (
136
			<FormSection theme={theme} data-test={auth.forgotPassword.section}>
137
				<SectionHeader
138
					theme={theme}
139
					data-test={auth.forgotPassword.headerSection}
140
				>
141
					{I18n.get('Reset your password')}
142
				</SectionHeader>
143
				<SectionBody theme={theme} data-test={auth.forgotPassword.bodySection}>
144 1
					{this.state.delivery || authData.username
145 1
						? this.submitView()
146
						: this.sendView()}
147
				</SectionBody>
148
				<SectionFooter theme={theme}>
149
					<SectionFooterPrimaryContent theme={theme}>
150 1
						{this.state.delivery || authData.username ? (
151 1
							<Button
152
								theme={theme}
153
								onClick={this.submit}
154
								data-test={auth.forgotPassword.submitButton}
155
							>
156
								{I18n.get('Submit')}
157
							</Button>
158
						) : (
159
							<Button
160
								theme={theme}
161
								onClick={this.send}
162
								data-test={auth.forgotPassword.sendCodeButton}
163
							>
164
								{I18n.get('Send Code')}
165
							</Button>
166
						)}
167
					</SectionFooterPrimaryContent>
168
					<SectionFooterSecondaryContent theme={theme}>
169 1
						{this.state.delivery || authData.username ? (
170 1
							<Link
171
								theme={theme}
172
								onClick={this.send}
173
								data-test={auth.forgotPassword.resendCodeLink}
174
							>
175
								{I18n.get('Resend Code')}
176
							</Link>
177
						) : (
178
							<Link
179
								theme={theme}
180 0
								onClick={() => this.changeState('signIn')}
181
								data-test={auth.forgotPassword.backToSignInLink}
182
							>
183
								{I18n.get('Back to Sign In')}
184
							</Link>
185
						)}
186
					</SectionFooterSecondaryContent>
187
				</SectionFooter>
188
			</FormSection>
189
		);
190
	}
191 1
}
192

193
/**
194
 * @deprecated use named import
195
 */
196 1
export default ForgotPassword;

Read our documentation on viewing source code .

Loading