init crater

resources/assets/js/views/auth/ResetPassword.vue

@@ -0,0 +1,124 @@
+<template>
+  <form
+    id="loginForm"
+    @submit.prevent="validateBeforeSubmit"
+  >
+    <div class="form-group">
+      <base-input
+        v-model.trim="formData.email"
+        :invalid="$v.formData.email.$error"
+        :placeholder="$t('login.enter_email')"
+        type="email"
+        name="email"
+        @input="$v.formData.email.$touch()"
+      />
+      <div v-if="$v.formData.email.$error">
+        <span v-if="!$v.formData.email.required" class="help-block text-danger">
+          {{ $t('validation.required') }}
+        </span>
+        <span v-if="!$v.formData.email.email" class="help-block text-danger">
+          {{ $t('validation.email_incorrect') }}
+        </span>
+      </div>
+    </div>
+    <div class="form-group">
+      <base-input
+        id="password"
+        v-model.trim="formData.password"
+        :invalid="$v.formData.password.$error"
+        :placeholder="$t('login.enter_password')"
+        type="password"
+        name="password"
+        @input="$v.formData.password.$touch()"
+      />
+      <div v-if="$v.formData.password.$error">
+        <span v-if="!$v.formData.password.required" class="help-block text-danger">
+          {{ $t('validation.required') }}
+        </span>
+        <span v-if="!$v.formData.password.minLength" class="help-block text-danger">
+          {{ $tc('validation.password_length', $v.formData.password.minLength.min, { count: $v.formData.password.$params.minLength.min }) }}
+        </span>
+      </div>
+    </div>
+    <div class="form-group">
+      <base-input
+        v-model.trim="formData.password_confirmation"
+        :invalid="$v.formData.password_confirmation.$error"
+        :placeholder="$t('login.retype_password')"
+        type="password"
+        name="password_confirmation"
+        @input="$v.formData.password_confirmation.$touch()"
+      />
+      <div v-if="$v.formData.password_confirmation.$error">
+        <span v-if="!$v.formData.password_confirmation.sameAsPassword" class="help-block text-danger">
+          {{ $t('validation.password_incorrect') }}
+        </span>
+      </div>
+    </div>
+    <base-button :loading="isLoading" type="submit" color="theme">
+      {{ $t('login.reset_password') }}
+    </base-button>
+  </form>
+</template>
+
+<script type="text/babel">
+import { validationMixin } from 'vuelidate'
+const { required, email, sameAs, minLength } = require('vuelidate/lib/validators')
+
+export default {
+  mixins: [validationMixin],
+  data () {
+    return {
+      formData: {
+        email: '',
+        password: '',
+        password_confirmation: ''
+      },
+      isLoading: false
+    }
+  },
+  validations: {
+    formData: {
+      email: {
+        required,
+        email
+      },
+      password: {
+        required,
+        minLength: minLength(8)
+      },
+      password_confirmation: {
+        sameAsPassword: sameAs('password')
+      }
+    }
+  },
+  methods: {
+    async validateBeforeSubmit (e) {
+      this.$v.formData.$touch()
+
+      if (!this.$v.formData.$invalid) {
+        try {
+          let data = {
+            email: this.formData.email,
+            password: this.formData.password,
+            password_confirmation: this.formData.password_confirmation,
+            token: this.$route.params.token
+          }
+          this.isLoading = true
+          let res = await axios.post('/api/auth/reset/password', data)
+          this.isLoading = false
+          if (res.data) {
+            toastr['success'](this.$t('login.password_reset_successfully'), 'Success')
+            this.$router.push('/login')
+          }
+        } catch (err) {
+          if (err.response && err.response.status === 403) {
+            toastr['error'](err.response.data, this.$t('validation.email_incorrect'))
+            this.isLoading = false
+          }
+        }
+      }
+    }
+  }
+}
+</script>