cssd-back/resources/js/vue/components/modal/auth/ChangePassword.vue

<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="Change Password">
            <v-layout row wrap class="px-3">
              <v-flex xs12 md12 sm12>
                <v-text-field
                  v-model="form.password"
                  label="Password"
                  color="black"
                ></v-text-field>
              </v-flex>
              <v-flex xs12 md12 sm12>
                <v-text-field
                  v-model="form.password_confirmation"
                  label="Confirm Password"
                  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="submitChangePassword">
                  <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 { mapActions } from "vuex";
export default {
  data() {
    return {
      form: {
        password: "",
        password_confirmation: "",
      }
    };
  },
  methods: {
      ...mapActions('auth', [
          'changePassword'
      ]),
      submitChangePassword() {
          if (this.form.code != '') {
            this.changePassword({form: this.form});
          }
      }
  }
};
</script>