mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-30 13:11:08 -04:00
v6 update
This commit is contained in:
Mohit Panjwani
100
resources/scripts/customer/views/auth/ForgotPassword.vue
Normal file
100
resources/scripts/customer/views/auth/ForgotPassword.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<form id="loginForm" @submit.prevent="validateBeforeSubmit">
|
||||
<BaseInputGroup
|
||||
:error="v$.email.$error && v$.email.$errors[0].$message"
|
||||
:label="$t('login.enter_email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="formData.email"
|
||||
type="email"
|
||||
name="email"
|
||||
:invalid="v$.email.$error"
|
||||
@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 setup>
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import { required, email, helpers } from '@vuelidate/validators'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '@/scripts/customer/stores/auth'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
// // store
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
const route = useRoute()
|
||||
|
||||
// local state
|
||||
|
||||
const formData = reactive({
|
||||
email: '',
|
||||
company: '',
|
||||
})
|
||||
const isSent = ref(false)
|
||||
const isLoading = ref(false)
|
||||
|
||||
// validation
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
email: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const v$ = useVuelidate(rules, formData)
|
||||
|
||||
// methods
|
||||
|
||||
function validateBeforeSubmit(e) {
|
||||
v$.value.$touch()
|
||||
if (v$.value.$invalid) {
|
||||
return true
|
||||
}
|
||||
isLoading.value = true
|
||||
let data = {
|
||||
...formData,
|
||||
company: route.params.company,
|
||||
}
|
||||
|
||||
authStore
|
||||
.forgotPassword(data)
|
||||
.then((res) => {
|
||||
isLoading.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
isLoading.value = false
|
||||
})
|
||||
isSent.value = true
|
||||
}
|
||||
</script>
|
||||
139
resources/scripts/customer/views/auth/Login.vue
Normal file
139
resources/scripts/customer/views/auth/Login.vue
Normal file
@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<form
|
||||
id="loginForm"
|
||||
class="space-y-6"
|
||||
action="#"
|
||||
method="POST"
|
||||
@submit.prevent="validateBeforeSubmit"
|
||||
>
|
||||
<BaseInputGroup
|
||||
:error="
|
||||
v$.loginData.email.$error && v$.loginData.email.$errors[0].$message
|
||||
"
|
||||
:label="$t('login.email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="authStore.loginData.email"
|
||||
type="email"
|
||||
:invalid="v$.loginData.email.$error"
|
||||
@input="v$.loginData.email.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
<BaseInputGroup
|
||||
:error="
|
||||
v$.loginData.password.$error &&
|
||||
v$.loginData.password.$errors[0].$message
|
||||
"
|
||||
:label="$t('login.password')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="authStore.loginData.password"
|
||||
:type="getInputType"
|
||||
:invalid="v$.loginData.password.$error"
|
||||
@input="v$.loginData.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="flex items-center justify-between">
|
||||
<router-link
|
||||
:to="{ name: 'customer.forgot-password' }"
|
||||
class="text-sm text-primary-600 hover:text-gray-500"
|
||||
>
|
||||
{{ $t('login.forgot_password') }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<BaseButton
|
||||
:loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
type="submit"
|
||||
class="w-full justify-center"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon name="LockClosedIcon" :class="slotProps.class" />
|
||||
</template>
|
||||
{{ $t('login.login') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { required, email, helpers } from '@vuelidate/validators'
|
||||
import { useAuthStore } from '@/scripts/customer/stores/auth'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
let isLoading = ref(false)
|
||||
const isShowPassword = ref(false)
|
||||
|
||||
const getInputType = computed(() => {
|
||||
if (isShowPassword.value) {
|
||||
return 'text'
|
||||
}
|
||||
return 'password'
|
||||
})
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
loginData: {
|
||||
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, authStore)
|
||||
|
||||
async function validateBeforeSubmit() {
|
||||
v$.value.loginData.$touch()
|
||||
if (v$.value.loginData.$invalid) {
|
||||
return true
|
||||
}
|
||||
isLoading.value = true
|
||||
let data = {
|
||||
...authStore.loginData,
|
||||
company: route.params.company,
|
||||
}
|
||||
|
||||
try {
|
||||
await authStore.login(data)
|
||||
isLoading.value = false
|
||||
return router.push({ name: 'customer.dashboard' })
|
||||
authStore.$reset()
|
||||
} catch (error) {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
141
resources/scripts/customer/views/auth/ResetPassword.vue
Normal file
141
resources/scripts/customer/views/auth/ResetPassword.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<form id="loginForm" @submit.prevent="onSubmit">
|
||||
<BaseInputGroup
|
||||
:error="v$.email.$error && v$.email.$errors[0].$message"
|
||||
:label="$t('login.email')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="loginData.email"
|
||||
type="email"
|
||||
name="email"
|
||||
:invalid="v$.email.$error"
|
||||
@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="loginData.password"
|
||||
:type="isShowPassword ? 'text' : 'password'"
|
||||
name="password"
|
||||
:invalid="v$.password.$error"
|
||||
@input="v$.password.$touch()"
|
||||
>
|
||||
<template #right>
|
||||
<EyeOffIcon
|
||||
v-if="isShowPassword"
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/>
|
||||
<EyeIcon
|
||||
v-else
|
||||
class="w-5 h-5 mr-1 text-gray-500 cursor-pointer"
|
||||
@click="isShowPassword = !isShowPassword"
|
||||
/> </template
|
||||
></BaseInput>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:error="
|
||||
v$.password_confirmation.$error &&
|
||||
v$.password_confirmation.$errors[0].$message
|
||||
"
|
||||
:label="$t('login.retype_password')"
|
||||
class="mb-4"
|
||||
required
|
||||
>
|
||||
<BaseInput
|
||||
v-model="loginData.password_confirmation"
|
||||
type="password"
|
||||
name="password"
|
||||
:invalid="v$.password_confirmation.$error"
|
||||
@input="v$.password_confirmation.$touch()"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton type="submit" variant="primary">
|
||||
{{ $t('login.reset_password') }}
|
||||
</BaseButton>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from 'vue'
|
||||
import useVuelidate from '@vuelidate/core'
|
||||
import { useGlobalStore } from '@/scripts/customer/stores/global'
|
||||
import {
|
||||
required,
|
||||
helpers,
|
||||
minLength,
|
||||
sameAs,
|
||||
email,
|
||||
} from '@vuelidate/validators'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/scripts/customer/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
const loginData = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
})
|
||||
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
let isShowPassword = ref(false)
|
||||
let isLoading = ref(false)
|
||||
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
email: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
||||
},
|
||||
password: {
|
||||
required: helpers.withMessage(t('validation.required'), required),
|
||||
minLength: helpers.withMessage(
|
||||
t('validation.password_min_length', { count: 8 }),
|
||||
minLength(8)
|
||||
),
|
||||
},
|
||||
password_confirmation: {
|
||||
sameAsPassword: helpers.withMessage(
|
||||
t('validation.password_incorrect'),
|
||||
sameAs(loginData.password)
|
||||
),
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const v$ = useVuelidate(rules, loginData)
|
||||
|
||||
async function onSubmit(e) {
|
||||
v$.value.$touch()
|
||||
|
||||
if (!v$.value.$invalid) {
|
||||
let data = {
|
||||
email: loginData.email,
|
||||
password: loginData.password,
|
||||
password_confirmation: loginData.password_confirmation,
|
||||
token: route.params.token,
|
||||
}
|
||||
isLoading.value = true
|
||||
let res = authStore.resetPassword(data, route.params.company)
|
||||
isLoading.value = false
|
||||
if (res.data) {
|
||||
router.push({ name: 'customer.login' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user