Коммит 7cfb76e2 создал по автору Парфиненко Роман Сергеевич's avatar Парфиненко Роман Сергеевич
Просмотр файлов

#22 Сделано изменение почты

владелец 45994c7a
<template>
<div>
<q-btn class="color-icons" flat icon="edit" round size="md" @click="showDialog = true">
<q-tooltip class="bg-primary text-white">Изменить</q-tooltip>
</q-btn>
<q-dialog v-model="showDialog" :maximized="!$q.screen.gt.xs" persistent width="380">
<q-card :dark="dark" flat class="main-block-with-cropped relative-position">
<q-btn class="absolute-top-right z-top" flat dense color="red" icon="close" label="" v-close-popup
@click="step === 3 ? onReset() : null" />
<q-card-section horizontal>
<q-item :dark="dark">
<q-item-section>
<q-item-label class="text-h6">Изменение адреса электронной почты</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-card-section>
<q-stepper ref="stepper" v-model="step" :contracted="!$q.screen.gt.xs" :dark="dark" animated color="primary"
flat vertical class="bg-transparent">
<q-step :dark="dark" :done="step > 1" :name="1" :step="1" :title="steps[0].text" icon="settings">
<q-input ref="email" v-model="newEmail" :dark="dark" :rules="emailRules" label="Адрес электронной почты"
outlined></q-input>
</q-step>
<q-step :name="2" :step="2" :title="steps[1].text" icon="settings">
<q-input v-model="confirmCode" :dark="dark" label="Код подтверждения" outlined></q-input>
</q-step>
<q-step :name="3" :step="3" :title="steps[2].text" icon="settings">
</q-step>
<template v-slot:navigation>
<q-stepper-navigation>
<div class="row justify-end" v-if="step < 3">
<q-btn outline color="primary" @click="step === 1 ? sendCode() : sendConfirmCode()">
<template v-slot:default>
<div class="flex no-wrap">
<span>{{
step === 1
? "Изменить почту"
: "Отправить код подтверждения"
}}</span>
<q-icon v-if="!progress" style="margin-left: 0.25rem" color="primary" name="send"></q-icon>
<q-circular-progress v-else style="margin-left: 0.25rem" indeterminate size="28" />
</div>
</template>
</q-btn>
</div>
</q-stepper-navigation>
</template>
<template v-slot:message>
<q-banner v-if="step === 1" :dark="dark" class="q-px-lg bg-transparent">
Введите новый адрес и получите код подтверждения
</q-banner>
<q-banner v-else-if="step === 2" :dark="dark" class="q-px-lg bg-transparent">
Введите код подтверждения отправленный на почту
</q-banner>
<q-banner v-else :dark="dark" class="q-px-lg bg-transparent">
Адрес электронной почты успешно изменен.
</q-banner>
</template>
<!-- оставил заготовку, чтоб можно было двигаться по шагам регистрации
произвольно
<template v-slot:navigation>
<q-stepper-navigation>
<q-btn
:label="step === 4 ? 'Finish' : 'Continue'"
color="primary"
@click="$refs.stepper.next()"
/>
<q-btn
v-if="step > 1"
class="q-ml-sm"
color="primary"
flat
label="Back"
@click="$refs.stepper.previous()"
/>
</q-stepper-navigation>
</template> -->
</q-stepper>
</q-card-section>
</q-card>
</q-dialog>
</div>
</template>
<script>
import { useUiStore } from '../stores/UI';
import { useUsersStore } from '../stores/users';
import { mapActions, mapState } from 'pinia';
export default {
// name: 'ChangeEmailDialog',
components: {},
data() {
return {
dark: false,
progress: false,
showDialog: false,
steps: [
{ step: 1, text: 'Новый адрес' },
{ step: 2, text: 'Код подтверждения' },
{ step: 3, text: 'Адрес изменён' },
],
step: 1,
confirmCode: null,
newEmail: null,
emailRules: [
(v) => !!v || 'Поле обязательно для заполнения',
(v) => /^[^@]+@[^@]+\.[^@]+$/.test(v) || 'Указан некорректный e-mail',
(v) =>
!Object.prototype.hasOwnProperty.call(
this.errors,
'chefaRetposhto'
) || this.errors.chefaRetposhto,
],
errors: {},
};
},
methods: {
...mapActions(useUsersStore, ['changeTelephoneOrEmail']),
sendCode() {
if (!this.newEmail) return;
if (!this.$refs.email.validate()) {
return;
}
const params = {
retposhto: this.newEmail,
};
this.progress = true;
this.changeTelephoneOrEmail(params).then((resp) => {
if (resp.status) {
this.$q.notify({
type: 'positive',
message: resp.message,
});
this.step++;
this.progress = false;
} else {
this.$q.notify({
type: 'negative',
message: resp.message,
});
this.progress = false;
}
});
},
sendConfirmCode() {
if (!this.confirmCode) return;
const params = {
retposhto: this.newEmail,
konfirmaKodo: this.confirmCode,
};
this.progress = true;
this.changeTelephoneOrEmail(params).then((resp) => {
if (resp.status) {
this.$q.notify({
type: 'positive',
message: message,
});
this.step++;
this.progress = false;
} else {
this.$q.notify({
type: 'negative',
message: message,
});
this.progress = false;
}
});
},
onReset() {
this.step = 1;
this.showDialog = false;
},
},
computed: {
...mapState(useUiStore, ['dark']),
},
};
</script>
<style></style>
......@@ -15,7 +15,7 @@
</q-item-section>
<q-item-section>
<!-- <q-file ref="fileInput" v-model="avatar" accept="image/*" style="display: none"></q-file> -->
<q-btn outline label="Добавить фото" class="text-capitalize" rounded color="primary"
<q-btn outline label="Добавить фото" class="text-capitalize" color="primary" rounded
style="max-width: 120px" @click="openFileDialog"></q-btn>
</q-item-section>
</q-item>
......@@ -24,11 +24,18 @@
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input v-model="user_details.user_name" label="Имя пользователя" />
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input v-model="user_details.email" label="Адрес электронной почты" />
<q-input v-model="user_details.email" readonly label="Адрес электронной почты">
<template v-slot:default>
<change-email-btn class="q-px-sm" />
</template>
</q-input>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
......@@ -122,7 +129,7 @@ import { defineComponent } from 'vue';
import { useUsersStore } from 'src/stores/users';
import { mapActions, mapState } from 'pinia';
import { useCurrentUserStore } from '../stores/current-user';
import ChangeEmailBtn from '../components/ChangeEmailDialog';
export default defineComponent({
data() {
......@@ -154,6 +161,11 @@ export default defineComponent({
],
};
},
components: {
ChangeEmailBtn
},
watch: {
user: {
handler(val) {
......@@ -190,7 +202,7 @@ export default defineComponent({
computed: {
...mapState(useCurrentUserStore, ['getAvatar']),
...mapState(useCurrentUserStore, { user: 'getUser' }),
...mapState(useCurrentUserStore, { userEmail: 'getUserEmail' }),
...mapState(useCurrentUserStore, { userEmail: 'getUser' }),
...mapState(useCurrentUserStore, { userName: 'getUserName' }),
...mapState(useCurrentUserStore, { userAbout: 'getUser' })
},
......@@ -261,11 +273,8 @@ export default defineComponent({
});
},
updateAbout() {
},
updateUser() {
const payload = {};
......
......@@ -39,9 +39,8 @@ export const redaktuKanvasojKanvasoObjekto = gql`
$uuid: UUID
$ligiloPosedantoUuid: String
$ligiloTipoId: Int = 1
$pozicio: Int
) # $koordinatoX: Int
# $koordinatoY: Int
$pozicio: Int # $koordinatoX: Int
) # $koordinatoY: Int
# $longo: Int
# $largxo: Int
{
......@@ -56,9 +55,8 @@ export const redaktuKanvasojKanvasoObjekto = gql`
uuid: $uuid
ligiloPosedantoUuid: $ligiloPosedantoUuid
ligiloTipoId: $ligiloTipoId
pozicio: $pozicio
) # koordinatoX: $koordinatoX
# koordinatoY: $koordinatoY
pozicio: $pozicio # koordinatoX: $koordinatoX
) # koordinatoY: $koordinatoY
# largxo: $largxo
# longo: $longo
{
......@@ -706,14 +704,14 @@ export const changeTasko = gql`
//изменение телефона или электронной почты
export const changeTelephoneNumberOrEmail = gql`
mutation shanghiPoshtonTelefonon(
$tel: String
$code: String
$email: String
$telefonaNombro: String
$konfirmaKodo: String
$retposhto: String
) {
shanghiPoshtonTelefonon(
telefonaNombro: $tel
konfirmaKodo: $code
retposhto: $email
telefonaNombro: $telefonaNombro
konfirmaKodo: $konfirmaKodo
retposhto: $retposhto
) {
status
message
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать