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
<template>
15
  <div v-bind:class="amplifyUI.formSection" v-bind:data-test="auth.signIn.section">
16
    <div v-bind:class="amplifyUI.sectionHeader" v-bind:data-test="auth.signIn.headerSection">{{options.header}}</div>
17
    <div v-bind:class="amplifyUI.sectionBody" v-bind:data-test="auth.signIn.bodySection">
18
      <amplify-username-field 
19
        v-bind:usernameAttributes="usernameAttributes" 
20
        v-on:username-field-changed="usernameFieldChanged">
21
      </amplify-username-field>
22
      <div v-bind:class="amplifyUI.formField">
23
        <div v-bind:class="amplifyUI.inputLabel">{{$Amplify.I18n.get('Password')}} *</div>
24
        <input  v-bind:class="amplifyUI.input" v-model="password" type="password" :placeholder="$Amplify.I18n.get('Enter your password')" v-on:keyup.enter="signIn" v-bind:data-test="auth.signIn.passwordInput" />
25
        <div v-bind:class="amplifyUI.hint">
26
          {{$Amplify.I18n.get('Forgot your password? ')}}
27
          <a v-bind:class="amplifyUI.a" v-on:click="forgot" v-bind:data-test="auth.signIn.forgotPasswordLink">{{$Amplify.I18n.get('Reset password')}}</a>
28
        </div>
29
      </div>
30
    </div>
31
    <div v-bind:class="amplifyUI.sectionFooter" v-bind:data-test="auth.signIn.footerSection">
32
      <span v-bind:class="amplifyUI.sectionFooterPrimaryContent">
33
        <button v-bind:class="amplifyUI.button" v-on:click="signIn" v-bind:data-test="auth.signIn.signInButton">{{$Amplify.I18n.get('Sign In')}}</button>
34
      </span>
35
      <span v-bind:class="amplifyUI.sectionFooterSecondaryContent" v-if="options.isSignUpDisplayed">
36
        {{$Amplify.I18n.get('No account? ')}}
37
        <a v-bind:class="amplifyUI.a" v-on:click="signUp" v-bind:data-test="auth.signIn.createAccountLink">{{$Amplify.I18n.get('Create account')}}</a>
38
      </span>
39
    </div>
40
    <div class="error" v-if="error" v-bind:data-test="auth.signIn.signInError">
41
      {{ error }}
42
    </div>
43
  </div>
44
</template>
45

46
<script>
47
// import Auth from '@aws-amplify/auth';
48 1
import AmplifyEventBus from '../../events/AmplifyEventBus';
49 1
import * as AmplifyUI from '@aws-amplify/ui';
50 1
import Vue from 'vue';
51 1
import UsernameField from './UsernameField';
52

53 1
Vue.component('amplify-username-field', UsernameField);
54 1
import { auth } from '../../assets/data-test-attributes';
55

56
export default {
57
  name: 'SignIn',
58
  props: ['signInConfig', 'usernameAttributes'],
59
  data () {
60 1
    return {
61
        password: '',
62
        error: '',
63
        amplifyUI: AmplifyUI,
64
        auth,
65
        logger: {},
66
        signInUsername: '',
67
        labelMap: {
68
          email: 'Email',
69
          phone_number: 'Phone Number',
70
          username: 'Username'
71
        },
72
    }
73
  },
74
  computed: {
75
    options() {
76 1
      const defaults = {
77
        header: this.$Amplify.I18n.get('Sign in to your account'),
78
        username: '',
79
        isSignUpDisplayed: true,
80
      }
81 1
      return Object.assign(defaults, this.signInConfig || {})
82
    },
83
  },
84
  mounted() {
85 1
    this.logger = new this.$Amplify.Logger(this.$options.name);
86
  },
87
  methods: {
88
    signIn: function(event) {
89 1
      this.$Amplify.Auth.signIn(this.signInUsername, this.password)
90
        .then(data => {
91 1
          this.logger.info('sign in success');
92 1
          if (data.challengeName === 'SMS_MFA' || data.challengeName === 'SOFTWARE_TOKEN_MFA') {
93 0
            AmplifyEventBus.$emit('localUser', data);
94 0
            return AmplifyEventBus.$emit('authState', 'confirmSignIn')
95 1
          } else if (data.challengeName === 'NEW_PASSWORD_REQUIRED') {
96 0
            AmplifyEventBus.$emit('localUser', data);
97 0
            return AmplifyEventBus.$emit('authState', 'requireNewPassword');
98 1
          } else if (data.challengeName === 'MFA_SETUP') {
99 0
            AmplifyEventBus.$emit('localUser', data);
100 0
            return AmplifyEventBus.$emit('authState', 'setMfa');
101 1
          } else if (data.challengeName === 'CUSTOM_CHALLENGE' &&
102
            data.challengeParam &&
103
            data.challengeParam.trigger === 'true'
104
          ) {
105 1
            AmplifyEventBus.$emit('localUser', data);
106 1
            return AmplifyEventBus.$emit('authState', 'customConfirmSignIn')
107
          } else {
108 0
            return AmplifyEventBus.$emit('authState', 'signedIn')
109
          }
110
        })
111
        .catch((e) => {
112 1
          if (e.code && e.code === 'UserNotConfirmedException'){
113 0
            AmplifyEventBus.$emit('localUser', {username: this.signInUsername})
114 0
            AmplifyEventBus.$emit('authState', 'confirmSignUp')
115
          } else {
116 0
            this.setError(e);
117
          }
118
        });
119
    },
120
    forgot: function() {
121 1
      AmplifyEventBus.$emit('authState', 'forgotPassword')
122
    },
123
    signUp: function() {
124 1
      AmplifyEventBus.$emit('authState', 'signUp')
125
    },
126
    setError: function(e) {
127 1
      this.error = this.$Amplify.I18n.get(e.message || e);
128 0
      this.logger.error(this.error)
129
    },
130
    usernameFieldChanged: function(data) {
131 0
      const { usernameField, username, email, phoneNumber } = data;
132 0
      switch(usernameField) {
133 1
        case 'username':
134 0
          this.signInUsername = username;
135 0
          break;
136
        case 'email':
137 0
          this.signInUsername = email;
138 0
          break;
139
        case 'phone_number':
140 0
          this.signInUsername = phoneNumber;
141 0
          break;
142
        default:
143 0
          break;
144
      }
145
    },
146
  }
147
}
148
</script>

Read our documentation on viewing source code .

Loading