send Api Ok

resources/js/vue/components/modal/Base.vue

@@ -0,0 +1,76 @@
+<template>
+    <transition name="fade">
+        <div class="mng-modal" @click="close" v-show="show">
+            <transition name="slide">
+                <div class="mng-modal-container" :style="{'width':width}" v-if="show" @click.stop>
+                    <slot>this is sample content</slot>
+                </div>
+            </transition>
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    props: ["show", "width"],
+    methods: {
+        close: function() {
+            this.$emit("close");
+        }
+    },
+    mounted: function() {
+        document.addEventListener("keydown", e => {
+            if (this.show && e.keyCode == 27) {
+                this.close();
+            }
+        });
+    }
+};
+</script>
+
+<style lang="scss">
+.mng-modal {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    overflow-y: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 10000001;
+}
+
+.mng-modal-container {
+    margin: 30px auto;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .15s linear;
+    -webkit-transition: opacity .15s linear;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
+
+.slide-enter,
+.slide-leave-to {
+    -webkit-transform: translate(0, -35%);
+    -ms-transform: translate(0, -35%);
+    -o-transform: translate(0, -35%);
+    transform: translate(0, -35%);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: transform .3s ease-out;
+}
+
+.slide-enter-to,
+.slide-leave {
+    -webkit-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    transform: translate(0, 0);
+}
+</style>

resources/js/vue/components/modal/auth/VerifyCode.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-form >
+    <v-container grid-list-xs>
+      <v-layout row wrap class="justify-center">
+        <v-flex xs12 md3 sm3 class="WM-WidthScreen-SM WM-WidthScreen-XS">
+          <material-card
+          color="black"
+          title="Verify Code">
+            <v-layout row wrap class="px-3">
+              <v-flex xs12 md12 sm12>
+                <v-text-field
+                  v-model="verifyCode"
+                  label="Verify Code Number"
+                  color="black"
+                ></v-text-field>
+              </v-flex>
+            </v-layout>
+            <v-layout row wrap class="px-3">
+              <v-flex xs12 md6 sm6 class="text-md-left text-sm-center text-xs-center">
+                <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitVerifyCode">
+                  <v-icon class="white--text mr-2 caption">fas fa-sign-in-alt</v-icon>
+                  <span class="white--text">Submit</span>
+                </v-btn>
+              </v-flex>
+            </v-layout>
+          </material-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </v-form>
+</template>
+<script>
+import { mapGetters, mapActions } from "vuex";
+export default {
+  data() {
+    return {
+      verifyCode: "",
+    };
+  },
+  methods: {
+      ...mapActions('auth', [
+          'verifyCodeSMS'
+      ]),
+      submitVerifyCode() {
+          if (this.verifyCode != '') {
+            this.verifyCodeSMS({verifyCode: this.verifyCode});
+          }
+      }
+  }
+};
+</script>