build version 400

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

@@ -1,11 +1,7 @@
 <template>
-  <form
-    id="loginForm"
-    @submit.prevent="validateBeforeSubmit"
-  >
-
-    <div :class="{'form-group' : true }">
-      <base-input
+  <form id="loginForm" @submit.prevent="validateBeforeSubmit">
+    <div class="mb-4">
+      <sw-input
         :invalid="$v.formData.email.$error"
         v-model.lazy="formData.email"
         :disabled="isSent"
@@ -15,22 +11,27 @@
         @blur="$v.formData.email.$touch()"
       />
       <div v-if="$v.formData.email.$error">
-        <span v-if="!$v.formData.email.required" class="help-block text-danger">
+        <span v-if="!$v.formData.email.required" class="text-sm text-danger">
           {{ $t('validation.required') }}
         </span>
-        <span v-if="!$v.formData.email.email" class="help-block text-danger">
+        <span v-if="!$v.formData.email.email" class="text-sm text-danger">
           {{ $t('validation.email_incorrect') }}
         </span>
       </div>
     </div>
-    <base-button v-if="!isSent" :loading="isLoading" :disabled="isLoading" type="submit" color="theme">
+    <sw-button
+      v-if="!isSent"
+      :disabled="isLoading"
+      type="submit"
+      variant="primary"
+    >
       {{ $t('validation.send_reset_link') }}
-    </base-button>
-    <base-button v-else :loading="isLoading" :disabled="isLoading" color="theme" type="submit">
+    </sw-button>
+    <sw-button v-else :disabled="isLoading" variant="primary" type="submit">
       {{ $t('validation.not_yet') }}
-    </base-button>
+    </sw-button>
 
-    <div class="other-actions mb-4">
+    <div class="mt-4 mb-4 text-sm">
       <router-link to="/login">
         {{ $t('general.back_to_login') }}
       </router-link>
@@ -39,43 +40,45 @@
 </template>
 
 <script type="text/babel">
-import { validationMixin } from 'vuelidate'
 import { async } from 'q'
+import { mapActions } from 'vuex'
 const { required, email } = require('vuelidate/lib/validators')
 
 export default {
-  mixins: [validationMixin],
-  data () {
+  data() {
     return {
       formData: {
-        email: ''
+        email: '',
       },
       isSent: false,
       isLoading: false,
-      isRegisteredUser: false
+      isRegisteredUser: false,
     }
   },
   validations: {
     formData: {
       email: {
         email,
-        required
-      }
-    }
+        required,
+      },
+    },
   },
   methods: {
-
-    async validateBeforeSubmit (e) {
+    ...mapActions('auth', ['checkMail']),
+    async validateBeforeSubmit(e) {
       this.$v.formData.$touch()
-
-      if (await this.checkMail() === false) {
+      let { data } = await this.checkMail()
+      if (data === 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)
+          let res = await axios.post(
+            '/api/v1/auth/password/email',
+            this.formData
+          )
 
           if (res.data) {
             toastr['success']('Mail sent successfuly!', 'Success')
@@ -90,10 +93,13 @@ export default {
         }
       }
     },
-    async checkMail () {
-      let response = await window.axios.post('/api/is-registered', this.formData)
-      return response.data
-    }
-  }
+    // async checkMail() {
+    //   let response = await window.axios.post(
+    //     '/api/v1/is-registered',
+    //     this.formData
+    //   )
+    //   return response.data
+    // },
+  },
 }
 </script>

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

@@ -1,126 +1,168 @@
 <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
+  <form id="loginForm" @submit.prevent="validateBeforeSubmit">
+    <sw-input-group
+      :label="$t('login.email')"
+      :error="emailError"
+      class="mb-4"
+      required
+    >
+      <sw-input
         :invalid="$v.loginData.email.$error"
-        v-model="loginData.email"
         :placeholder="$t(login.login_placeholder)"
+        v-model="loginData.email"
         focus
         type="email"
         name="email"
         @input="$v.loginData.email.$touch()"
       />
-      <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
+    </sw-input-group>
+
+    <sw-input-group
+      :label="$t('login.password')"
+      :error="passwordError"
+      class="mb-4"
+      required
+    >
+      <sw-input
         v-model="loginData.password"
         :invalid="$v.loginData.password.$error"
-        type="password"
+        :type="getInputType"
         name="password"
-        show-password
         @input="$v.loginData.password.$touch()"
-      />
-      <div v-if="$v.loginData.password.$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">
+      >
+        <template v-slot:rightIcon>
+          <eye-off-icon
+            v-if="isShowPassword"
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          />
+          <eye-icon
+            v-else
+            class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
+            @click="isShowPassword = !isShowPassword"
+          />
+        </template>
+      </sw-input>
+    </sw-input-group>
+
+    <div class="mt-5 mb-8">
+      <div class="mb-4">
+        <router-link
+          to="forgot-password"
+          class="text-sm text-primary-400 hover:text-gray-700"
+        >
           {{ $t('login.forgot_password') }}
         </router-link>
       </div>
     </div>
 
-    <base-button :loading="isLoading" 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> -->
-
+    <sw-button
+      :loading="isLoading"
+      :disabled="isLoading"
+      type="submit"
+      variant="primary"
+    >
+      {{ $t('login.login') }}
+    </sw-button>
   </form>
 </template>
 
 <script type="text/babel">
 import { mapActions } from 'vuex'
-
+import { EyeIcon, EyeOffIcon } from '@vue-hero-icons/outline'
 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
+    IconGoogle,
+    EyeIcon,
+    EyeOffIcon,
   },
-  mixins: [validationMixin],
-  data () {
+  data() {
     return {
       loginData: {
         email: '',
         password: '',
-        remember: ''
+        remember: '',
       },
       submitted: false,
-      isLoading: false
+      isLoading: false,
+      isShowPassword: false,
     }
   },
   validations: {
     loginData: {
       email: {
         required,
-        email
+        email,
       },
       password: {
         required,
-        minLength: minLength(8)
+        minLength: minLength(8),
+      },
+    },
+  },
+  computed: {
+    emailError() {
+      if (!this.$v.loginData.email.$error) {
+        return ''
       }
-    }
+      if (!this.$v.loginData.email.required) {
+        return this.$tc('validation.required')
+      }
+      if (!this.$v.loginData.email.email) {
+        return this.$tc('validation.email_incorrect')
+      }
+    },
+
+    passwordError() {
+      if (!this.$v.loginData.password.$error) {
+        return ''
+      }
+      if (!this.$v.loginData.password.required) {
+        return this.$tc('validation.required')
+      }
+      if (!this.$v.loginData.password.minLength) {
+        return this.$tc(
+          'validation.password_min_length',
+          this.$v.loginData.password.$params.minLength.min,
+          { count: this.$v.loginData.password.$params.minLength.min }
+        )
+      }
+    },
+
+    getInputType() {
+      if (this.isShowPassword) {
+        return 'text'
+      }
+      return 'password'
+    },
   },
   methods: {
-    ...mapActions('auth', [
-      'login'
-    ]),
-    async validateBeforeSubmit () {
+    ...mapActions('auth', ['login']),
+    async validateBeforeSubmit() {
+      axios.defaults.withCredentials = true
+
       this.$v.loginData.$touch()
       if (this.$v.$invalid) {
         return true
       }
 
       this.isLoading = true
-      this.login(this.loginData).then((res) => {
+
+      try {
+        await this.login(this.loginData)
         this.$router.push('/admin/dashboard')
         this.isLoading = false
-      }).catch(() => {
+      } catch (error) {
         this.isLoading = false
-      })
-    }
-  }
+      }
+    },
+  },
 }
 </script>

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

@@ -1,9 +1,5 @@
 <template>
-  <form
-    id="registerForm"
-    action=""
-    method="post"
-  >
+  <form id="registerForm" action="" method="post">
     <!-- {{ csrf_field() }} -->
     <div class="form-group">
       <input
@@ -11,7 +7,7 @@
         type="email"
         class="form-control form-control-danger"
         name="email"
-      >
+      />
     </div>
     <div class="form-group">
       <input
@@ -20,7 +16,7 @@
         class="form-control form-control-danger"
         placeholder="Enter Password"
         name="password"
-      >
+      />
     </div>
     <div class="form-group">
       <input
@@ -28,30 +24,32 @@
         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>
+    <sw-button class="btn btn-login btn-full">{{
+      $t('login.register')
+    }}</sw-button>
   </form>
 </template>
 <script type="text/babel">
 export default {
-  data () {
+  data() {
     return {
       name: '',
       email: '',
       password: '',
-      password_confirmation: ''
+      password_confirmation: '',
     }
   },
   methods: {
-    validateBeforeSubmit (e) {
+    validateBeforeSubmit(e) {
       this.$validator.validateAll().then((result) => {
         if (result) {
           // eslint-disable-next-line
           alert('Form Submitted!')
         }
       })
-    }
-  }
+    },
+  },
 }
 </script>

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

@@ -1,10 +1,7 @@
 <template>
-  <form
-    id="loginForm"
-    @submit.prevent="validateBeforeSubmit"
-  >
+  <form id="loginForm" @submit.prevent="validateBeforeSubmit">
     <div class="form-group">
-      <base-input
+      <sw-input
         v-model.trim="formData.email"
         :invalid="$v.formData.email.$error"
         :placeholder="$t('login.enter_email')"
@@ -22,7 +19,7 @@
       </div>
     </div>
     <div class="form-group">
-      <base-input
+      <sw-input
         id="password"
         v-model.trim="formData.password"
         :invalid="$v.formData.password.$error"
@@ -32,16 +29,28 @@
         @input="$v.formData.password.$touch()"
       />
       <div v-if="$v.formData.password.$error">
-        <span v-if="!$v.formData.password.required" class="help-block text-danger">
+        <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
+          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
+      <sw-input
         v-model.trim="formData.password_confirmation"
         :invalid="$v.formData.password_confirmation.$error"
         :placeholder="$t('login.retype_password')"
@@ -50,50 +59,56 @@
         @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">
+        <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">
+    <sw-button type="submit" variant="primary">
       {{ $t('login.reset_password') }}
-    </base-button>
+    </sw-button>
   </form>
 </template>
 
 <script type="text/babel">
-import { validationMixin } from 'vuelidate'
-const { required, email, sameAs, minLength } = require('vuelidate/lib/validators')
+const {
+  required,
+  email,
+  sameAs,
+  minLength,
+} = require('vuelidate/lib/validators')
 
 export default {
-  mixins: [validationMixin],
-  data () {
+  data() {
     return {
       formData: {
         email: '',
         password: '',
-        password_confirmation: ''
+        password_confirmation: '',
       },
-      isLoading: false
+      isLoading: false,
     }
   },
   validations: {
     formData: {
       email: {
         required,
-        email
+        email,
       },
       password: {
         required,
-        minLength: minLength(8)
+        minLength: minLength(8),
       },
       password_confirmation: {
-        sameAsPassword: sameAs('password')
-      }
-    }
+        sameAsPassword: sameAs('password'),
+      },
+    },
   },
   methods: {
-    async validateBeforeSubmit (e) {
+    async validateBeforeSubmit(e) {
       this.$v.formData.$touch()
 
       if (!this.$v.formData.$invalid) {
@@ -102,23 +117,29 @@ export default {
             email: this.formData.email,
             password: this.formData.password,
             password_confirmation: this.formData.password_confirmation,
-            token: this.$route.params.token
+            token: this.$route.params.token,
           }
           this.isLoading = true
-          let res = await axios.post('/api/auth/reset/password', data)
+          let res = await axios.post('/api/v1/auth/reset/password', data)
           this.isLoading = false
           if (res.data) {
-            toastr['success'](this.$t('login.password_reset_successfully'), 'Success')
+            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'))
+            toastr['error'](
+              err.response.data,
+              this.$t('validation.email_incorrect')
+            )
             this.isLoading = false
           }
         }
       }
-    }
-  }
+    },
+  },
 }
 </script>