before delete 3software
This commit is contained in:
@@ -1,17 +1,283 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="col-grow">
|
||||
{{$t('account__change_password')}}
|
||||
</div>
|
||||
{{$t('account_change_email__title')}}
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<account-helper :type />
|
||||
<q-stepper
|
||||
v-model="step"
|
||||
vertical
|
||||
color="primary"
|
||||
animated
|
||||
flat
|
||||
class="bg-transparent"
|
||||
>
|
||||
<q-step
|
||||
:name="1"
|
||||
:title="$t('account_change_email__current_email')"
|
||||
:done="step > 1"
|
||||
>
|
||||
<q-input
|
||||
v-model="login"
|
||||
autofocus
|
||||
dense
|
||||
filled
|
||||
:label = "$t('account_change_email__current_email')"
|
||||
disable
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('continue')"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
|
||||
<q-step
|
||||
:name="2"
|
||||
:title="$t('account_change_email__confirm_current_email')"
|
||||
:done="step > 2"
|
||||
>
|
||||
<div class="q-pb-md">{{$t('account_change_email__confirm_email_message')}}</div>
|
||||
<q-input
|
||||
v-model="code"
|
||||
dense
|
||||
filled
|
||||
autofocus
|
||||
hide-bottom-space
|
||||
:label = "$t('account_change_email__code')"
|
||||
num="30"
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('continue')"
|
||||
:disable="code.length === 0"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
@click="step = 1"
|
||||
color="primary"
|
||||
:label="$t('back')"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
|
||||
<q-step
|
||||
:name="3"
|
||||
:title="$t('account_change_email__new_email')"
|
||||
:done="step > 2"
|
||||
>
|
||||
<q-input
|
||||
v-model="newLogin"
|
||||
autofocus
|
||||
dense
|
||||
filled
|
||||
:label = "$t('account_change_email__new_email')"
|
||||
:rules="validationRules.email"
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
@focus="($refs.emailInput as typeof QInput)?.resetValidation()"
|
||||
ref="emailInput"
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('continue')"
|
||||
:disabled="!isEmailValid"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
@click="step = 2"
|
||||
color="primary"
|
||||
:label="$t('back')"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
|
||||
<q-step
|
||||
:name="4"
|
||||
:title="$t('account_change_email__confirm_new_email')"
|
||||
:done="step > 3"
|
||||
>
|
||||
<div class="q-pb-md">{{$t('account_change_email__confirm_email_message')}}</div>
|
||||
<q-input
|
||||
v-model="newCode"
|
||||
dense
|
||||
filled
|
||||
autofocus
|
||||
hide-bottom-space
|
||||
:label = "$t('account_change_email__code')"
|
||||
num="30"
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('continue')"
|
||||
:disable="newCode.length === 0"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
@click="step = 3"
|
||||
color="primary"
|
||||
:label="$t('back')"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
|
||||
<q-step
|
||||
:name="5"
|
||||
:title="$t('account_change_email__set_password')"
|
||||
>
|
||||
<q-input
|
||||
v-model="password"
|
||||
dense
|
||||
filled
|
||||
:label = "$t('account_change_email__password')"
|
||||
:type="isPwd ? 'password' : 'text'"
|
||||
hide-hint
|
||||
:hint="passwordHint"
|
||||
:rules="validationRules.password"
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
@focus="($refs.passwordInput as typeof QInput)?.resetValidation()"
|
||||
ref="passwordInput"
|
||||
>
|
||||
<template #append>
|
||||
<q-icon
|
||||
color="grey-5"
|
||||
:name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
class="cursor-pointer"
|
||||
@click="isPwd = !isPwd"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('account_change_email__finish')"
|
||||
:disabled = "!isPasswordValid"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
@click="step = 4"
|
||||
color="primary"
|
||||
:label="$t('back')"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
|
||||
<pn-magic-overlay
|
||||
v-if="showSuccessOverlay"
|
||||
icon="mdi-check-circle-outline"
|
||||
message1="account_change_email__ok_message1"
|
||||
message2="account_change_email__ok_message2"
|
||||
route-name="account"
|
||||
/>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import accountHelper from 'src/components/accountHelper.vue'
|
||||
const type = 'forgotPwd'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { AxiosError } from 'axios'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { QInput } from 'quasar'
|
||||
import { useAuthStore } from 'stores/auth'
|
||||
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
type ValidationRule = (val: string) => boolean | string
|
||||
type Step = 1 | 2 | 3 | 4 | 5
|
||||
|
||||
const step = ref<Step>(1)
|
||||
const login = authStore.customer?.email
|
||||
const code = ref<string>('')
|
||||
const newLogin = ref<string>('')
|
||||
const newCode = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
const showSuccessOverlay = ref(false)
|
||||
const isPwd = ref<boolean>(true)
|
||||
const validationRules = {
|
||||
email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
|
||||
password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
|
||||
}
|
||||
|
||||
const isEmailValid = computed(() =>
|
||||
validationRules.email.every(f => f(newLogin.value) === true)
|
||||
)
|
||||
|
||||
const isPasswordValid = computed(() =>
|
||||
validationRules.password.every(f => f(password.value) === true)
|
||||
)
|
||||
|
||||
const passwordHint = computed(() => {
|
||||
const result = validationRules.password[0](password.value)
|
||||
return typeof result === 'string' ? result : ''
|
||||
})
|
||||
|
||||
const stepActions: Record<Step, () => Promise<void>> = {
|
||||
1: async () => {
|
||||
await authStore.getCodeCurrentEmail()
|
||||
},
|
||||
2: async () => {
|
||||
await authStore.confirmCurrentEmailCode(code.value)
|
||||
console.log(code.value)
|
||||
},
|
||||
3: async () => {
|
||||
await authStore.getCodeNewEmail(code.value, newLogin.value)
|
||||
},
|
||||
4: async () => {
|
||||
await authStore.confirmNewEmailCode(code.value, newCode.value, newLogin.value,)
|
||||
},
|
||||
5: async () => {
|
||||
await authStore.setNewEmailPassword(code.value, newCode.value, newLogin.value, password.value)
|
||||
await authStore.loginWithCredentials(newLogin.value, password.value)
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (err: AxiosError) => {
|
||||
const error = err as AxiosError<{ error?: { message?: string } }>
|
||||
const message = error.response?.data?.error?.message || t('unknown_error')
|
||||
|
||||
$q.notify({
|
||||
message: `${t('error')}: ${message}`,
|
||||
type: 'negative',
|
||||
position: 'bottom',
|
||||
timeout: 2500
|
||||
})
|
||||
|
||||
if (step.value > 1) {
|
||||
code.value = ''
|
||||
password.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await stepActions[step.value]()
|
||||
if (step.value < 5) {
|
||||
step.value++
|
||||
} else {
|
||||
showSuccessOverlay.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error as AxiosError)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user