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
<template>
<Form
@submit="onVerifyCode"
id="kt_verifyCode_form"
>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Code</label>
<Field
class="form-control form-control-lg"
type="text"
name="code"
autocomplete="off"
v-model="code"
/>
</div>
<div class="text-center">
<button
id="kt_verifyCode_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "verifyCode",
data() {
return {
code: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const onVerifyCode = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
code: values.code,
};
// Send verify code request
await store.dispatch(Actions.VERIFY_CODE, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {.then(function () {
// Go to page after successfully login
router.push({ name: "projects" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
verifyCode,
onVerifyCode,
submitButton,
};
},
});
</script>
SignUp.vue
<template>
<Form
@submit="onSubmitRegister"
id="kt_login_signup_form"
>
<!--begin::Input group-->
<div class="row fv-row mb-7">
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">First Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="givenName"
autocomplete="off"
v-model="givenName"
/>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">Last Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="familyName"
autocomplete="off"
v-model="familyName"
/>
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Company</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="companyName"
autocomplete="off"
v-model="companyName"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<Field
class="form-control form-control-lg"
type="email"
placeholder=""
name="email"
autocomplete="off"
v-model="email"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10 fv-row" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Label-->
<label class="form-label fw-bold text-dark fs-6"> Password </label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password"
autocomplete="off"
v-model="password"
/>
</div>
<!--end::Input wrapper-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group--->
<!--begin::Input group-->
<div class="fv-row mb-5">
<label class="form-label fw-bold text-dark fs-6"
>Confirm Password</label
>
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password_confirmation"
autocomplete="off"
v-model="password_confirmation"
/>
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="text-center">
<button
id="kt_sign_up_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "sign-up",
data() {
return {
givenName: "",
familyName: "",
companyName: "",
email: "",
password: "",
password_confirmation: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const submitButton = ref<HTMLButtonElement | null>(null);
const onSubmitRegister = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
givenName: values.givenName,
familyName: values.familyName,
companyName: values.companyName,
email: values.email,
password: values.password,
confirmPassword: values.confirmPassword,
};
// Send login request
await store.dispatch(Actions.REGISTER, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {
.then(function () {
// Go to page after successfully register
router.push({ name: "verifyCode" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
registration,
onSubmitRegister,
submitButton,
};
},
});
</script>
Advertisement
Answer
As @kissu, mentioned On SignUp page, you can use $router to route to the verifyCode page with query equal to email
router.push({ name: "verifyCode", query: { email: values.email } });
And in VerifyCode page you can get the query value with
const route = useRoute(); //log the email value. console.log(route.query.email)
FULL EXAMPLE OF CODE.
VerifyCode.vue
<template>
<Form
@submit="onVerifyCode"
id="kt_verifyCode_form"
>
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Code</label>
<Field
class="form-control form-control-lg"
type="text"
name="code"
autocomplete="off"
v-model="code"
/>
</div>
<div class="text-center">
<button
id="kt_verifyCode_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "verifyCode",
data() {
return {
code: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
// log the email value.
console.log(router.query.email)
const onVerifyCode = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
code: values.code,
};
// Send verify code request
await store.dispatch(Actions.VERIFY_CODE, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {.then(function () {
// Go to page after successfully login
router.push({ name: "projects" });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
verifyCode,
onVerifyCode,
submitButton,
};
},
});
</script>
SignUp.vue
<template>
<Form
@submit="onSubmitRegister"
id="kt_login_signup_form"
>
<!--begin::Input group-->
<div class="row fv-row mb-7">
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">First Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="givenName"
autocomplete="off"
v-model="givenName"
/>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-xl-6">
<label class="form-label fw-bold text-dark fs-6">Last Name</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="familyName"
autocomplete="off"
v-model="familyName"
/>
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Company</label>
<Field
class="form-control form-control-lg"
type="text"
placeholder=""
name="companyName"
autocomplete="off"
v-model="companyName"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7">
<label class="form-label fw-bold text-dark fs-6">Email</label>
<Field
class="form-control form-control-lg"
type="email"
placeholder=""
name="email"
autocomplete="off"
v-model="email"
/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10 fv-row" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Label-->
<label class="form-label fw-bold text-dark fs-6"> Password </label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password"
autocomplete="off"
v-model="password"
/>
</div>
<!--end::Input wrapper-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Input group--->
<!--begin::Input group-->
<div class="fv-row mb-5">
<label class="form-label fw-bold text-dark fs-6"
>Confirm Password</label
>
<Field
class="form-control form-control-lg"
type="password"
placeholder=""
name="password_confirmation"
autocomplete="off"
v-model="password_confirmation"
/>
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="text-center">
<button
id="kt_sign_up_submit"
ref="submitButton"
type="submit"
class="btn btn-lg btn-primary mt-4"
>
<span class="indicator-label"> Submit </span>
</button>
</div>
</Form>
</div>
</template>
<script lang="ts">
export default defineComponent({
name: "sign-up",
data() {
return {
givenName: "",
familyName: "",
companyName: "",
email: "",
password: "",
password_confirmation: "",
};
},
setup() {
const store = useStore();
const router = useRouter();
const submitButton = ref<HTMLButtonElement | null>(null);
const onSubmitRegister = async (values) => {
// Clear existing errors
store.dispatch(Actions.LOGOUT);
// eslint-disable-next-line
submitButton.value!.disabled = true;
// Activate indicator
submitButton.value?.setAttribute("data-kt-indicator", "on");
const data = {
givenName: values.givenName,
familyName: values.familyName,
companyName: values.companyName,
email: values.email,
password: values.password,
confirmPassword: values.confirmPassword,
};
// Send login request
await store.dispatch(Actions.REGISTER, data);
const [errorName] = Object.keys(store.getters.getErrors);
const error = store.getters.getErrors[errorName];
if (!error) {
.then(function () {
// Go to page after successfully register
router.push({ name: "verifyCode", query: { email: values.email } });
});
} else {}
submitButton.value?.removeAttribute("data-kt-indicator");
// eslint-disable-next-line
submitButton.value!.disabled = false;
};
return {
registration,
onSubmitRegister,
submitButton,
};
},
});
</script>