init crater

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

@@ -0,0 +1,99 @@
+<template>
+  <form
+    id="loginForm"
+    @submit.prevent="validateBeforeSubmit"
+  >
+
+    <div :class="{'form-group' : true }">
+      <base-input
+        :invalid="$v.formData.email.$error"
+        v-model.lazy="formData.email"
+        :disabled="isSent"
+        :placeholder="$t('login.enter_email')"
+        focus
+        name="email"
+        @blur="$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>
+    <base-button v-if="!isSent" :loading="isLoading" :disabled="isLoading" type="submit" color="theme">
+      {{ $t('validation.send_reset_link') }}
+    </base-button>
+    <base-button v-else :loading="isLoading" :disabled="isLoading" color="theme" type="submit">
+      {{ $t('validation.not_yet') }}
+    </base-button>
+
+    <div class="other-actions mb-4">
+      <router-link to="/login">
+        {{ $t('general.back_to_login') }}
+      </router-link>
+    </div>
+  </form>
+</template>
+
+<script type="text/babel">
+import { validationMixin } from 'vuelidate'
+import { async } from 'q'
+const { required, email } = require('vuelidate/lib/validators')
+
+export default {
+  mixins: [validationMixin],
+  data () {
+    return {
+      formData: {
+        email: ''
+      },
+      isSent: false,
+      isLoading: false,
+      isRegisteredUser: false
+    }
+  },
+  validations: {
+    formData: {
+      email: {
+        email,
+        required
+      }
+    }
+  },
+  methods: {
+
+    async validateBeforeSubmit (e) {
+      this.$v.formData.$touch()
+
+      if (await this.checkMail() === false) {
+        toastr['error'](this.$t('validation.email_does_not_exist'))
+        return
+      }
+      if (!this.$v.formData.$invalid) {
+        try {
+          this.isLoading = true
+          let res = await axios.post('/api/auth/password/email', this.formData)
+
+          if (res.data) {
+            toastr['success']('Mail sent successfuly!', 'Success')
+          }
+
+          this.isSent = true
+          this.isLoading = false
+        } catch (err) {
+          if (err.response && err.response.status === 403) {
+            toastr['error'](err.response.data, 'Error')
+          }
+        }
+      }
+    },
+    async checkMail () {
+      let response = await window.axios.post('/api/is-registered', this.formData)
+      return response.data
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,119 @@
+<template>
+  <form
+    id="loginForm"
+    @submit.prevent="validateBeforeSubmit"
+  >
+    <div :class="{'form-group' : true }">
+      <p class="input-label">{{ $t('login.email') }} <span class="text-danger"> * </span></p>
+      <base-input
+        :invalid="$v.loginData.email.$error"
+        v-model="loginData.email"
+        :placeholder="$t(login.login_placeholder)"
+        focus
+        type="email"
+        name="email"
+      />
+      <div v-if="$v.loginData.email.$error">
+        <span v-if="!$v.loginData.email.required" class="text-danger">{{ $tc('validation.required') }}</span>
+        <span v-if="!$v.loginData.email.email" class="text-danger"> {{ $tc('validation.email_incorrect') }} </span>
+      </div>
+    </div>
+    <div class="form-group">
+      <p class="input-label">{{ $t('login.password') }} <span class="text-danger"> * </span></p>
+      <base-input
+        v-model="loginData.password"
+        :invalid="$v.loginData.password.$error"
+        type="password"
+        name="password"
+      />
+      <div v-if="$v.loginData.email.$error">
+        <span v-if="!$v.loginData.password.required" class="text-danger">{{ $tc('validation.required') }}</span>
+        <span v-if="!$v.loginData.password.minLength" class="text-danger"> {{ $tc('validation.password_min_length', $v.loginData.password.$params.minLength.min, {count: $v.loginData.password.$params.minLength.min}) }} </span>
+      </div>
+    </div>
+    <div class="other-actions row">
+      <div class="col-sm-12 text-sm-left mb-4">
+        <router-link to="forgot-password" class="forgot-link">
+          {{ $t('login.forgot_password') }}
+        </router-link>
+      </div>
+    </div>
+
+    <base-button type="submit" color="theme">{{ $t('login.login') }}</base-button>
+
+    <!-- <div class="social-links">
+
+      <span class="link-text">{{ $t('login.or_signIn_with') }}</span>
+
+      <div class="social-logo">
+        <icon-facebook class="icon"/>
+        <icon-twitter class="icon"/>
+        <icon-google class="icon"/>
+      </div>
+
+    </div> -->
+
+  </form>
+</template>
+
+<script type="text/babel">
+import { mapActions } from 'vuex'
+
+import IconFacebook from '../../components/icon/facebook'
+import IconTwitter from '../../components/icon/twitter'
+import IconGoogle from '../../components/icon/google'
+import { validationMixin } from 'vuelidate'
+const { required, email, minLength } = require('vuelidate/lib/validators')
+
+export default {
+
+  components: {
+    IconFacebook,
+    IconTwitter,
+    IconGoogle
+  },
+  mixins: [validationMixin],
+  data () {
+    return {
+      loginData: {
+        email: '',
+        password: '',
+        remember: ''
+      },
+      submitted: false
+    }
+  },
+  validations: {
+    loginData: {
+      email: {
+        required,
+        email
+      },
+      password: {
+        required,
+        minLength: minLength(8)
+      }
+    }
+  },
+  methods: {
+    ...mapActions('auth', [
+      'login'
+    ]),
+    async validateBeforeSubmit () {
+      this.$v.loginData.$touch()
+      if (this.$v.$invalid) {
+        return true
+      }
+
+      this.isLoading = true
+
+      this.login(this.loginData).then((res) => {
+        this.$router.push('/admin/dashboard')
+        this.isLoading = false
+      }).catch(() => {
+        this.isLoading = false
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <form
+    id="registerForm"
+    action=""
+    method="post"
+  >
+    <!-- {{ csrf_field() }} -->
+    <div class="form-group">
+      <input
+        :placeholder="$t('login.enter_email')"
+        type="email"
+        class="form-control form-control-danger"
+        name="email"
+      >
+    </div>
+    <div class="form-group">
+      <input
+        id="password"
+        type="password"
+        class="form-control form-control-danger"
+        placeholder="Enter Password"
+        name="password"
+      >
+    </div>
+    <div class="form-group">
+      <input
+        type="password"
+        class="form-control form-control-danger"
+        placeholder="Retype Password"
+        name="password_confirmation"
+      >
+    </div>
+    <base-button class="btn btn-login btn-full">{{ $t('login.register') }}</base-button>
+  </form>
+</template>
+<script type="text/babel">
+export default {
+  data () {
+    return {
+      name: '',
+      email: '',
+      password: '',
+      password_confirmation: ''
+    }
+  },
+  methods: {
+    validateBeforeSubmit (e) {
+      this.$validator.validateAll().then((result) => {
+        if (result) {
+          // eslint-disable-next-line
+          alert('Form Submitted!')
+        }
+      })
+    }
+  }
+}
+</script>

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>