mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 04:01:10 -04:00
v6 update
This commit is contained in:
Mohit Panjwani
92
resources/scripts/admin/views/auth/ForgotPassword.vue
Normal file
92
resources/scripts/admin/views/auth/ForgotPassword.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<form id="loginForm" @submit.prevent="onSubmit">
|
||||
<BaseInputGroup
|
||||
:error="v$.email.$error && v$.email.$errors[0].$message"
|
||||
:label="$t('login.enter_email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="formData.email"
|
||||
:invalid="v$.email.$error"
|
||||
focus
|
||||
type="email"
|
||||
name="email"
|
||||
@input="v$.email.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<BaseButton
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
type="submit"
|
||||
variant="primary"
|
||||
>
|
||||
<div v-if="!isSent">
|
||||
{{ $t('validation.send_reset_link') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ $t('validation.not_yet') }}
|
||||
</div>
|
||||
</BaseButton>
|
||||
|
||||
<div class="mt-4 mb-4 text-sm">
|
||||
<router-link
|
||||
to="/login"
|
||||
class="text-sm text-primary-400 hover:text-gray-700"
|
||||
>
|
||||
{{ $t('general.back_to_login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script type="text/babel" setup>
|
||||
import axios from 'axios'
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { required, email, helpers } from '@vuelidate/validators'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { handleError } from '@/scripts/helpers/error-handling'
|
||||
|
||||
const notificationStore = useNotificationStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
})
|
||||
|
||||
const isSent = ref(false)
|
||||
const isLoading = ref(false)
|
||||
|
||||
const rules = {
|
||||
email: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
}
|
||||
|
||||
const v$ = useVuelidate(rules, formData)
|
||||
|
||||
async function onSubmit(e) {
|
||||
v$.value.$touch()
|
||||
|
||||
if (!v$.value.$invalid) {
|
||||
try {
|
||||
isLoading.value = true
|
||||
let res = await axios.post('/api/v1/auth/password/email', formData)
|
||||
if (res.data) {
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: 'Mail sent successfully',
|
||||
})
|
||||
}
|
||||
isSent.value = true
|
||||
isLoading.value = false
|
||||
} catch (err) {
|
||||
handleError(err)
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
129
resources/scripts/admin/views/auth/Login.vue
Normal file
129
resources/scripts/admin/views/auth/Login.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<form id="loginForm" class="mt-12 text-left" @submit.prevent="onSubmit">
|
||||
<BaseInputGroup
|
||||
:error="v$.email.$error && v$.email.$errors[0].$message"
|
||||
:label="$t('login.email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="authStore.loginData.email"
|
||||
:invalid="v$.email.$error"
|
||||
focus
|
||||
type="email"
|
||||
name="email"
|
||||
@input="v$.email.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:error="v$.password.$error && v$.password.$errors[0].$message"
|
||||
:label="$t('login.password')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="authStore.loginData.password"
|
||||
:invalid="v$.password.$error"
|
||||
:type="getInputType"
|
||||
name="password"
|
||||
@input="v$.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<BaseIcon
|
||||
v-if="isShowPassword"
|
||||
name="EyeOffIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<BaseIcon
|
||||
v-else
|
||||
name="EyeIcon"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/> </template
|
||||
></BaseInput>
|
||||
</BaseInputGroup>
|
||||
|
||||
<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>
|
||||
<BaseButton :loading="isLoading" type="submit">
|
||||
{{ $t('login.login') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { required, email, helpers } from '@vuelidate/validators'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '@/scripts/admin/stores/auth'
|
||||
import { handleError } from '@/scripts/helpers/error-handling'
|
||||
|
||||
const notificationStore = useNotificationStore()
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
const router = useRouter()
|
||||
const isLoading = ref(false)
|
||||
let isShowPassword = ref(false)
|
||||
|
||||
const rules = {
|
||||
email: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
},
|
||||
}
|
||||
|
||||
const v$ = useVuelidate(
|
||||
rules,
|
||||
computed(() => authStore.loginData)
|
||||
)
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
async function onSubmit() {
|
||||
axios.defaults.withCredentials = true
|
||||
|
||||
v$.value.$touch()
|
||||
|
||||
if (v$.value.$invalid) {
|
||||
return true
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
await authStore.login(authStore.loginData)
|
||||
|
||||
router.push('/admin/dashboard')
|
||||
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: 'Logged in successfully.',
|
||||
})
|
||||
} catch (error) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
165
resources/scripts/admin/views/auth/ResetPassword.vue
Normal file
165
resources/scripts/admin/views/auth/ResetPassword.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<form id="loginForm" @submit.prevent="onSubmit">
|
||||
<BaseInputGroup
|
||||
:error="errorEmail"
|
||||
:label="$t('login.email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="formData.email"
|
||||
:invalid="v$.email.$error"
|
||||
focus
|
||||
type="email"
|
||||
name="email"
|
||||
@input="v$.email.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:error="errorPassword"
|
||||
:label="$t('login.password')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="formData.password"
|
||||
:invalid="v$.password.$error"
|
||||
type="password"
|
||||
name="password"
|
||||
@input="v$.password.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:error="errorConfirmPassword"
|
||||
:label="$t('login.retype_password')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="formData.password_confirmation"
|
||||
:invalid="v$.password_confirmation.$error"
|
||||
type="password"
|
||||
name="password"
|
||||
@input="v$.password_confirmation.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton :loading="isLoading" type="submit" variant="primary">
|
||||
{{ $t('login.reset_password') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script type="text/babel" setup>
|
||||
import { ref, computed, reactive } from 'vue'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { required, email, minLength, sameAs } from '@vuelidate/validators'
|
||||
import { useNotificationStore } from '@/scripts/stores/notification'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import axios from 'axios'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { handleError } from '@/scripts/helpers/error-handling'
|
||||
|
||||
const notificationStore = useNotificationStore()
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
})
|
||||
|
||||
const isLoading = ref(false)
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
email: { required, email },
|
||||
password: {
|
||||
required,
|
||||
minLength: minLength(8),
|
||||
},
|
||||
password_confirmation: {
|
||||
sameAsPassword: sameAs(formData.password),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const v$ = useVuelidate(rules, formData)
|
||||
|
||||
const errorEmail = computed(() => {
|
||||
if (!v$.value.email.$error) {
|
||||
return ''
|
||||
}
|
||||
if (v$.value.email.required.$invalid) {
|
||||
return t('validation.required')
|
||||
}
|
||||
if (v$.value.email.email) {
|
||||
return t('validation.email_incorrect')
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const errorPassword = computed(() => {
|
||||
if (!v$.value.password.$error) {
|
||||
return ''
|
||||
}
|
||||
|
||||
if (v$.value.password.required.$invalid) {
|
||||
return t('validation.required')
|
||||
}
|
||||
if (v$.value.password.minLength) {
|
||||
return t('validation.password_min_length', {
|
||||
count: v$.value.password.minLength.$params.min,
|
||||
})
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
const errorConfirmPassword = computed(() => {
|
||||
if (!v$.value.password_confirmation.$error) {
|
||||
return ''
|
||||
}
|
||||
if (v$.value.password_confirmation.sameAsPassword.$invalid) {
|
||||
return t('validation.password_incorrect')
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
async function onSubmit(e) {
|
||||
v$.value.$touch()
|
||||
|
||||
if (!v$.value.$invalid) {
|
||||
try {
|
||||
let data = {
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
password_confirmation: formData.password_confirmation,
|
||||
token: route.params.token,
|
||||
}
|
||||
isLoading.value = true
|
||||
let res = await axios.post('/api/v1/auth/reset/password', data)
|
||||
isLoading.value = false
|
||||
if (res.data) {
|
||||
notificationStore.showNotification({
|
||||
type: 'success',
|
||||
message: t('login.password_reset_successfully'),
|
||||
})
|
||||
router.push('/login')
|
||||
}
|
||||
} catch (err) {
|
||||
handleError(err)
|
||||
isLoading.value = false
|
||||
if (err.response && err.response.status === 403) {
|
||||
// notificationStore.showNotification({
|
||||
// type: 'error',
|
||||
// message: t('validation.email_incorrect'),
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user