updated with cancelHandler addition and latest amplify & amplify-vue

Author: Dustin Noyes

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "aws-amplify VueJs sample",
   "license": "Apache-2.0",
-  "author": "Richard Zhang <richardzcode@gmail.com>",
+  "author": "Amazon Web Services",
   "private": true,
   "scripts": {
     "dev": "webpack-dev-server --progress --config build/webpack.dev.conf.js",
@@ -13,8 +13,8 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "aws-amplify": "^0.2.10",
-    "aws-amplify-vue": "^0.1.1-beta.6",
+    "aws-amplify": "^1.1.4",
+    "aws-amplify-vue": "^0.1.1",
     "aws-sdk": "^2.209.0",
     "e": "0.0.4",
     "fsts": "^0.0.39",

src/App.vue

@@ -20,7 +20,7 @@
 
 <script>
 import Vue from 'vue'
-import Menu from '@/components/Menu'
+import Menu from '@/components/Menu';
 
 Vue.component('v-menu', Menu)
 
@@ -31,7 +31,8 @@ export default {
 
 <style>
 body {
-  margin: 0
+  margin: 0;
+  background-color: white;
 }
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/components/Profile.vue

@@ -22,18 +22,18 @@
       />
     </div>
     <section >
-      <article class="message" :class="profilePicAccordion">
-        <div class="message-header" @click="toggleAccordion('profilePic')">
+      <article class="message" :class="mfaAccordion">
+        <div class="message-header" @click="toggleAccordion('mfa')">
           Multifactor Authentication <div class="arrow"> &nbsp; ></div>    
         </div>
         <div class="message-body">
           <div class="message-content">
-            <amplify-set-mfa></amplify-set-mfa>
+            <amplify-set-mfa v-bind:mfaConfig="mfaConfig"></amplify-set-mfa>
           </div>
         </div>
       </article>
-      <article class="message" :class="mfaAccordion">
-        <div class="message-header" @click="toggleAccordion('mfa')">
+      <article class="message" :class="profilePicAccordion">
+        <div class="message-header" @click="toggleAccordion('profilePic')">
           Profile Pic <div class="arrow"> &nbsp; ></div>    
         </div>
         <div class="message-body">
@@ -58,13 +58,15 @@ export default {
   name: 'Profile',
 
   data:  () => {
+    const that = this;
     return {
       profilePic: false,
       imagePath: `${AmplifyStore.state.user.username}/avatar`,
       photoPickerConfig: {
         header: 'Upload Profile Pic',
         accept: 'image/*',
         path: `${AmplifyStore.state.user.username}/`,
+        defaultName: 'avatar'
       },
       mfa: false,
       fields: [
@@ -76,9 +78,19 @@ export default {
   methods: {
     toggleAccordion: function(el) {
       this[el] = !this[el]
-    }
+    },
   },
   computed: {
+    mfaConfig: function() {
+      let that = this;
+      return {
+        mfaDescription: 'My app\'s mfa description!!',
+        mfaTypes: ['TOTP', 'SNS', 'None'],
+        cancelHandler: function() {
+          that.toggleAccordion('mfa')
+        },
+      }
+    },
     user: function() { 
       return AmplifyStore.state.user 
     },