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

10
<template>
11
	<div v-bind:class="amplifyUI.formField">
12
		<div v-if="shouldRenderUsernameField">
13
			<div v-bind:class="amplifyUI.inputLabel">
14
				{{ $Amplify.I18n.get(getUsernameLabel()) }} *
15
			</div>
16
			<input
17
				v-bind:class="amplifyUI.input"
18
				v-model="username"
19
				:placeholder="$Amplify.I18n.get(`Enter your ${getUsernameLabel()}`)"
20
				autofocus
21
				v-on:keyup="usernameChanged"
22
				v-on:input="username = $event.target.value"
23
				v-bind:data-test="auth.genericAttrs.usernameInput"
24
			/>
25
		</div>
26
		<div v-if="shouldRenderEmailField">
27
			<div v-bind:class="amplifyUI.inputLabel">
28
				{{ $Amplify.I18n.get('Email') }} *
29
			</div>
30
			<input
31
				v-bind:class="amplifyUI.input"
32
				v-model="email"
33
				:placeholder="$Amplify.I18n.get('Enter your email')"
34
				autofocus
35
				v-on:keyup="emailChanged"
36
				v-on:input="email = $event.target.value"
37
				v-bind:data-test="auth.genericAttrs.emailInput"
38
			/>
39
		</div>
40
		<div v-if="shouldRenderPhoneNumberField">
41
			<amplify-phone-field
42
				v-bind:required="phoneNumberRequired"
43
				v-on:phone-number-changed="phoneNumberChanged"
44
			></amplify-phone-field>
45
		</div>
46
	</div>
47
</template>
48

49
<script>
50 1
import Vue from 'vue';
51 1
import * as AmplifyUI from '@aws-amplify/ui';
52 1
import countries from '../../assets/countries';
53 1
import { labelMap } from './common';
54 1
import PhoneField from './PhoneField';
55
import { composePhoneNumber } from './common';
56 1
import { auth } from '../../assets/data-test-attributes';
57

58 1
Vue.component('amplify-phone-field', PhoneField);
59

60
export default {
61
	name: 'UsernameField',
62
	props: ['usernameAttributes'],
63
	data() {
64 1
		return {
65
			username: '',
66
			email: '',
67
			amplifyUI: AmplifyUI,
68
			phoneNumberRequired: true,
69
			auth,
70
		};
71
	},
72
	mounted: function() {
73 1
		if (window && window.location && window.location.search) {
74 0
			const searchParams = new URLSearchParams(window.location.search);
75 1
			const usernameParam = searchParams
76
				? searchParams.get('username')
77
				: this.username;
78 0
			this.username = usernameParam;
79 0
			this.$emit('username-field-changed', {
80
				usernameField: 'username',
81
				username: usernameParam,
82
			});
83
		}
84
	},
85
	computed: {
86
		shouldRenderEmailField() {
87 1
			return this.usernameAttributes === 'email';
88
		},
89
		shouldRenderUsernameField() {
90 1
			return (
91
				this.usernameAttributes !== 'email' &&
92
				this.usernameAttributes !== 'phone_number'
93
			);
94
		},
95
		shouldRenderPhoneNumberField() {
96 1
			return this.usernameAttributes === 'phone_number';
97
		},
98
	},
99
	methods: {
100
		getUsernameLabel() {
101 1
			return labelMap[this.usernameAttributes] || this.usernameAttributes;
102
		},
103
		phoneNumberChanged(data) {
104 0
			const phoneNumber = composePhoneNumber(
105
				data.countryCode,
106
				data.local_phone_number
107
			);
108 0
			this.$emit('username-field-changed', {
109
				usernameField: 'phone_number',
110
				phoneNumber,
111
			});
112
		},
113
		emailChanged() {
114 0
			this.$emit('username-field-changed', {
115
				usernameField: 'email',
116
				email: this.email,
117
			});
118
		},
119
		usernameChanged() {
120 0
			this.$emit('username-field-changed', {
121
				usernameField: 'username',
122
				username: this.username,
123
			});
124
		},
125
	},
126
};
127
</script>

Read our documentation on viewing source code .

Loading