How can I get the email address entered while registering to this next page? If the query method is appropriate, it is my preference. I want to pull the e-mail address I entered on the signUp page to the verify Code page.
VerifyCode.vue
JavaScript
x
78
78
1
<template>2
<Form3
@submit="onVerifyCode"4
id="kt_verifyCode_form"5
>6
<div class="fv-row mb-7">7
<label class="form-label fw-bold text-dark fs-6">Code</label>8
<Field9
class="form-control form-control-lg"10
type="text"11
name="code"12
autocomplete="off"13
v-model="code"14
/>15
</div>16
<div class="text-center">17
<button18
id="kt_verifyCode_submit"19
ref="submitButton"20
type="submit"21
class="btn btn-lg btn-primary mt-4"22
>23
<span class="indicator-label"> Submit </span>24
</button>25
</div>26
</Form>27
</div>28
</template>29
30
<script lang="ts">31
export default defineComponent({32
name: "verifyCode",33
data() {34
return {35
code: "",36
};37
},38
setup() {39
const store = useStore();40
const router = useRouter();41
42
const onVerifyCode = async (values) => {43
// Clear existing errors44
store.dispatch(Actions.LOGOUT);45
46
// eslint-disable-next-line47
submitButton.value!.disabled = true;48
49
// Activate indicator50
submitButton.value?.setAttribute("data-kt-indicator", "on");51
const data = {52
code: values.code,53
};54
// Send verify code request55
await store.dispatch(Actions.VERIFY_CODE, data);56
const [errorName] = Object.keys(store.getters.getErrors);57
const error = store.getters.getErrors[errorName];58
59
if (!error) {.then(function () {60
// Go to page after successfully login61
router.push({ name: "projects" });62
});63
} else {}64
65
submitButton.value?.removeAttribute("data-kt-indicator");66
// eslint-disable-next-line67
submitButton.value!.disabled = false;68
};69
70
return {71
verifyCode,72
onVerifyCode,73
submitButton,74
};75
},76
});77
</script>78
SignUp.vue
JavaScript
1
182
182
1
<template>2
<Form3
@submit="onSubmitRegister"4
id="kt_login_signup_form"5
>6
<!--begin::Input group-->7
<div class="row fv-row mb-7">8
<!--begin::Col-->9
<div class="col-xl-6">10
<label class="form-label fw-bold text-dark fs-6">First Name</label>11
<Field12
class="form-control form-control-lg"13
type="text"14
placeholder=""15
name="givenName"16
autocomplete="off"17
v-model="givenName"18
/>19
</div>20
<!--end::Col-->21
22
<!--begin::Col-->23
<div class="col-xl-6">24
<label class="form-label fw-bold text-dark fs-6">Last Name</label>25
<Field26
class="form-control form-control-lg"27
type="text"28
placeholder=""29
name="familyName"30
autocomplete="off"31
v-model="familyName"32
/>33
</div>34
<!--end::Col-->35
</div>36
<!--end::Input group-->37
<!--begin::Input group-->38
<div class="fv-row mb-7">39
<label class="form-label fw-bold text-dark fs-6">Company</label>40
<Field41
class="form-control form-control-lg"42
type="text"43
placeholder=""44
name="companyName"45
autocomplete="off"46
v-model="companyName"47
/>48
</div>49
<!--end::Input group-->50
<!--begin::Input group-->51
<div class="fv-row mb-7">52
<label class="form-label fw-bold text-dark fs-6">Email</label>53
<Field54
class="form-control form-control-lg"55
type="email"56
placeholder=""57
name="email"58
autocomplete="off"59
v-model="email"60
/>61
</div>62
<!--end::Input group-->63
64
<!--begin::Input group-->65
<div class="mb-10 fv-row" data-kt-password-meter="true">66
<!--begin::Wrapper-->67
<div class="mb-1">68
<!--begin::Label-->69
<label class="form-label fw-bold text-dark fs-6"> Password </label>70
<!--end::Label-->71
72
<!--begin::Input wrapper-->73
<div class="position-relative mb-3">74
<Field75
class="form-control form-control-lg"76
type="password"77
placeholder=""78
name="password"79
autocomplete="off"80
v-model="password"81
/>82
</div>83
<!--end::Input wrapper-->84
</div>85
<!--end::Wrapper-->86
</div>87
<!--end::Input group--->88
89
<!--begin::Input group-->90
<div class="fv-row mb-5">91
<label class="form-label fw-bold text-dark fs-6"92
>Confirm Password</label93
>94
<Field95
class="form-control form-control-lg"96
type="password"97
placeholder=""98
name="password_confirmation"99
autocomplete="off"100
v-model="password_confirmation"101
/>102
</div>103
<!--end::Input group-->104
105
<!--begin::Actions-->106
<div class="text-center">107
<button108
id="kt_sign_up_submit"109
ref="submitButton"110
type="submit"111
class="btn btn-lg btn-primary mt-4"112
>113
<span class="indicator-label"> Submit </span>114
</button>115
</div>116
</Form>117
</div>118
</template>119
120
<script lang="ts">121
export default defineComponent({122
name: "sign-up",123
data() {124
return {125
givenName: "",126
familyName: "",127
companyName: "",128
email: "",129
password: "",130
password_confirmation: "",131
};132
},133
setup() {134
const store = useStore();135
const router = useRouter();136
137
const submitButton = ref<HTMLButtonElement | null>(null);138
139
const onSubmitRegister = async (values) => {140
// Clear existing errors141
store.dispatch(Actions.LOGOUT);142
143
// eslint-disable-next-line144
submitButton.value!.disabled = true;145
146
// Activate indicator147
submitButton.value?.setAttribute("data-kt-indicator", "on");148
const data = {149
givenName: values.givenName,150
familyName: values.familyName,151
companyName: values.companyName,152
email: values.email,153
password: values.password,154
confirmPassword: values.confirmPassword,155
};156
// Send login request157
await store.dispatch(Actions.REGISTER, data);158
159
const [errorName] = Object.keys(store.getters.getErrors);160
const error = store.getters.getErrors[errorName];161
162
if (!error) {163
.then(function () {164
// Go to page after successfully register165
router.push({ name: "verifyCode" });166
});167
} else {}168
169
submitButton.value?.removeAttribute("data-kt-indicator");170
// eslint-disable-next-line171
submitButton.value!.disabled = false;172
};173
174
return {175
registration,176
onSubmitRegister,177
submitButton,178
};179
},180
});181
</script>182
Advertisement
Answer
As @kissu, mentioned On SignUp page, you can use $router to route to the verifyCode page with query equal to email
JavaScript
1
2
1
router.push({ name: "verifyCode", query: { email: values.email } });2
And in VerifyCode page you can get the query value with
JavaScript
1
4
1
const route = useRoute();2
//log the email value.3
console.log(route.query.email)4
FULL EXAMPLE OF CODE.
VerifyCode.vue
JavaScript
1
79
79
1
<template>2
<Form3
@submit="onVerifyCode"4
id="kt_verifyCode_form"5
>6
<div class="fv-row mb-7">7
<label class="form-label fw-bold text-dark fs-6">Code</label>8
<Field9
class="form-control form-control-lg"10
type="text"11
name="code"12
autocomplete="off"13
v-model="code"14
/>15
</div>16
<div class="text-center">17
<button18
id="kt_verifyCode_submit"19
ref="submitButton"20
type="submit"21
class="btn btn-lg btn-primary mt-4"22
>23
<span class="indicator-label"> Submit </span>24
</button>25
</div>26
</Form>27
</div>28
</template>29
30
<script lang="ts">31
export default defineComponent({32
name: "verifyCode",33
data() {34
return {35
code: "",36
};37
},38
setup() {39
const store = useStore();40
const router = useRouter();41
// log the email value.42
console.log(router.query.email)43
const onVerifyCode = async (values) => {44
// Clear existing errors45
store.dispatch(Actions.LOGOUT);46
47
// eslint-disable-next-line48
submitButton.value!.disabled = true;49
50
// Activate indicator51
submitButton.value?.setAttribute("data-kt-indicator", "on");52
const data = {53
code: values.code,54
};55
// Send verify code request56
await store.dispatch(Actions.VERIFY_CODE, data);57
const [errorName] = Object.keys(store.getters.getErrors);58
const error = store.getters.getErrors[errorName];59
60
if (!error) {.then(function () {61
// Go to page after successfully login62
router.push({ name: "projects" });63
});64
} else {}65
66
submitButton.value?.removeAttribute("data-kt-indicator");67
// eslint-disable-next-line68
submitButton.value!.disabled = false;69
};70
71
return {72
verifyCode,73
onVerifyCode,74
submitButton,75
};76
},77
});78
</script>79
SignUp.vue
JavaScript
1
183
183
1
<template>2
<Form3
@submit="onSubmitRegister"4
id="kt_login_signup_form"5
>6
<!--begin::Input group-->7
<div class="row fv-row mb-7">8
<!--begin::Col-->9
<div class="col-xl-6">10
<label class="form-label fw-bold text-dark fs-6">First Name</label>11
<Field12
class="form-control form-control-lg"13
type="text"14
placeholder=""15
name="givenName"16
autocomplete="off"17
v-model="givenName"18
/>19
</div>20
<!--end::Col-->21
22
<!--begin::Col-->23
<div class="col-xl-6">24
<label class="form-label fw-bold text-dark fs-6">Last Name</label>25
<Field26
class="form-control form-control-lg"27
type="text"28
placeholder=""29
name="familyName"30
autocomplete="off"31
v-model="familyName"32
/>33
</div>34
<!--end::Col-->35
</div>36
<!--end::Input group-->37
<!--begin::Input group-->38
<div class="fv-row mb-7">39
<label class="form-label fw-bold text-dark fs-6">Company</label>40
<Field41
class="form-control form-control-lg"42
type="text"43
placeholder=""44
name="companyName"45
autocomplete="off"46
v-model="companyName"47
/>48
</div>49
<!--end::Input group-->50
<!--begin::Input group-->51
<div class="fv-row mb-7">52
<label class="form-label fw-bold text-dark fs-6">Email</label>53
<Field54
class="form-control form-control-lg"55
type="email"56
placeholder=""57
name="email"58
autocomplete="off"59
v-model="email"60
/>61
</div>62
<!--end::Input group-->63
64
<!--begin::Input group-->65
<div class="mb-10 fv-row" data-kt-password-meter="true">66
<!--begin::Wrapper-->67
<div class="mb-1">68
<!--begin::Label-->69
<label class="form-label fw-bold text-dark fs-6"> Password </label>70
<!--end::Label-->71
72
<!--begin::Input wrapper-->73
<div class="position-relative mb-3">74
<Field75
class="form-control form-control-lg"76
type="password"77
placeholder=""78
name="password"79
autocomplete="off"80
v-model="password"81
/>82
</div>83
<!--end::Input wrapper-->84
</div>85
<!--end::Wrapper-->86
</div>87
<!--end::Input group--->88
89
<!--begin::Input group-->90
<div class="fv-row mb-5">91
<label class="form-label fw-bold text-dark fs-6"92
>Confirm Password</label93
>94
<Field95
class="form-control form-control-lg"96
type="password"97
placeholder=""98
name="password_confirmation"99
autocomplete="off"100
v-model="password_confirmation"101
/>102
</div>103
<!--end::Input group-->104
105
<!--begin::Actions-->106
<div class="text-center">107
<button108
id="kt_sign_up_submit"109
ref="submitButton"110
type="submit"111
class="btn btn-lg btn-primary mt-4"112
>113
<span class="indicator-label"> Submit </span>114
</button>115
</div>116
</Form>117
</div>118
</template>119
120
<script lang="ts">121
export default defineComponent({122
name: "sign-up",123
data() {124
return {125
givenName: "",126
familyName: "",127
companyName: "",128
email: "",129
password: "",130
password_confirmation: "",131
};132
},133
setup() {134
const store = useStore();135
const router = useRouter();136
137
const submitButton = ref<HTMLButtonElement | null>(null);138
139
const onSubmitRegister = async (values) => {140
// Clear existing errors141
store.dispatch(Actions.LOGOUT);142
143
// eslint-disable-next-line144
submitButton.value!.disabled = true;145
146
// Activate indicator147
submitButton.value?.setAttribute("data-kt-indicator", "on");148
const data = {149
givenName: values.givenName,150
familyName: values.familyName,151
companyName: values.companyName,152
email: values.email,153
password: values.password,154
confirmPassword: values.confirmPassword,155
};156
// Send login request157
await store.dispatch(Actions.REGISTER, data);158
159
const [errorName] = Object.keys(store.getters.getErrors);160
const error = store.getters.getErrors[errorName];161
162
if (!error) {163
.then(function () {164
// Go to page after successfully register165
router.push({ name: "verifyCode", query: { email: values.email } });166
});167
} else {}168
169
submitButton.value?.removeAttribute("data-kt-indicator");170
// eslint-disable-next-line171
submitButton.value!.disabled = false;172
};173
174
return {175
registration,176
onSubmitRegister,177
submitButton,178
};179
},180
});181
</script>182
183