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.confirmSignUp.section">
16
    <div v-bind:class="amplifyUI.sectionHeader" v-bind:data-test="auth.confirmSignUp.headerSection">{{options.header}}</div>
17
    <div v-bind:class="amplifyUI.sectionBody" v-bind:data-test="auth.confirmSignUp.bodySection">
18
      <div v-bind:class="amplifyUI.formField">
19
        <div v-bind:class="amplifyUI.inputLabel">{{$Amplify.I18n.get(getUsernameLabel())}} *</div>
20
        <input v-bind:class="amplifyUI.input" v-model="options.username" name="username" :placeholder="$Amplify.I18n.get(getUsernameLabel())" autofocus v-bind:data-test="auth.confirmSignUp.usernameInput"/>
21
      </div>
22
      <div v-bind:class="amplifyUI.formField">
23
        <div v-bind:class="amplifyUI.inputLabel">{{$Amplify.I18n.get('Confirmation Code')}} *</div>
24
        <input v-bind:class="amplifyUI.input" v-model="code" name="code" :placeholder="$Amplify.I18n.get('Confirmation Code')" v-bind:data-test="auth.confirmSignUp.confirmationCodeInput" />
25
        <div v-bind:class="amplifyUI.hint">
26
          {{$Amplify.I18n.get('Lost your code? ')}}
27
          <a v-bind:class="amplifyUI.a" v-on:click="resend" v-bind:data-test="auth.confirmSignUp.resendCodeLink">{{$Amplify.I18n.get('Resend Code')}}</a>
28
        </div>
29
      </div>
30
    </div>
31
    <div v-bind:class="amplifyUI.sectionFooter">
32
      <span v-bind:class="amplifyUI.sectionFooterPrimaryContent">
33
        <button v-bind:class="amplifyUI.button" v-on:click="confirm" v-bind:data-test="auth.confirmSignUp.confirmButton">{{$Amplify.I18n.get('Confirm')}}</button>
34
      </span>
35
      <span v-bind:class="amplifyUI.sectionFooterSecondaryContent">
36
        {{$Amplify.I18n.get('Have an account? ')}}
37
        <a v-bind:class="amplifyUI.a" v-on:click="signIn" v-bind:data-test="auth.confirmSignUp.backToSignInLink">{{$Amplify.I18n.get('Back to Sign In')}}</a>
38
      </span>
39
    </div>
40
    <div class="error" v-if="error">
41
      {{ error }}
42
    </div>
43
  </div>
44
</template>
45

46
<script>
47 1
import AmplifyEventBus from '../../events/AmplifyEventBus';
48 1
import * as AmplifyUI from '@aws-amplify/ui';
49 1
import { labelMap } from './common';
50 1
import { auth } from '../../assets/data-test-attributes';
51

52
export default {
53
  name: 'ConfirmSignUp',
54
  props: ['confirmSignUpConfig', 'usernameAttributes'],
55
  data () {
56 1
    return {
57
        code: '',
58
        error: '',
59
        logger: {},
60
        amplifyUI: AmplifyUI,
61
        auth
62
    }
63
  },
64
  computed: {
65
    options() {
66 1
      const defaults = {
67
        username: '',
68
        header: this.$Amplify.I18n.get('Confirm Sign Up'),
69
      }
70 1
      return Object.assign(defaults, this.confirmSignUpConfig || {})
71
    }
72
  },
73
  mounted: function() {
74 1
    this.logger = new this.$Amplify.Logger(this.$options.name)
75 1
    if (!this.options.username) {
76 1
      return this.setError('Valid username not received.');
77
    };
78
  },
79
  methods: {
80
    confirm() {
81 1
        this.$Amplify.Auth.confirmSignUp(this.options.username, this.code)
82
          .then(() => {
83 1
            this.logger.info('confirmSignUp success')
84 1
            AmplifyEventBus.$emit('authState', 'signIn')
85 0
          })
86
          .catch(e => this.setError(e));
87
    },
88
    resend() {
89 1
        this.$Amplify.Auth.resendSignUp(this.options.username)
90
            .then(() => {
91 1
              this.logger.info('resendSignUp success')
92 0
            })
93
            .catch(e => this.setError(e));
94
    },
95
    signIn() {
96 1
        AmplifyEventBus.$emit('authState', 'signIn')
97
    },
98
    setError(e) {
99 1
      this.error = this.$Amplify.I18n.get(e.message || e);
100 1
      this.logger.error(this.error);
101
    },
102
    getUsernameLabel() {
103 1
      return labelMap[this.usernameAttributes] || this.usernameAttributes;
104
    }
105
  }
106
}
107
</script>

Read our documentation on viewing source code .

Loading