Looking for some guidance from the Vue experts out there. I've recently started working with Vue and I'm attempting to create a view that verifies an email with a unique code after a user signs up. Right now, my view is set up but it's not connected to any email functionality or code generation. In this project, I'm using pug, typescript, and scss. I've checked for spelling errors, but I can't seem to pinpoint the issue. Any suggestions?
.vue file:
<template lang="pug">
.Verify
.Verify__focus
.Verify__title Verify Your Email
.Verify__form
.Verify__field
va-input.Verify__textInput(
type="text",
name="verificationCode",
placeholder="Verification Code",
v-model="text",
@keyup.enter="verifyUser()"
)
template(v-slot:prependInner="")
va-icon(name="check_circle")
.Login__buttonRow
va-button.Login__submitButton(@click="verifyUser") Verify
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
import useVerify from "@/views/Signup/Verify/useVerify";
/**
* Setting up verification reactivity.
*/
function setup() {
const verificationCode = ref("");
const { verifyUser } = useVerify(verificationCode);
return {
verificationCode,
verifyUser,
};
}
export default defineComponent({
name: "Verify",
setup,
});
</script>
<style lang="scss">
.Verify {
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
&__focus {
width: 360px;
max-width: 95vw;
}
&__field {
padding-bottom: 0.5em;
}
&__buttonRow {
display: flex;
justify-content: flex-end;
}
&__title {
font-size: 1.2em;
padding-bottom: 0.5em;
text-align: center;
}
}
</style>
.ts file:
import { Ref } from "vue";
import { useApolloClient } from "@vue/apollo-composable";
import { ValidatedUser } from "@/models";
import { gql } from "graphql-tag";
const query = gql`
query Verify($input: Verify) {
Verify(input: $input) {
__typename
token
user {
email
id
}
}
}
`;
/**
* Apollo client retrieval and useVerify function for validation and execution of the verification process.
*
* @param verificationCode - reactive email address of the signing user.
* @returns useVerify composition functionality.
*/
export default function useVerify(verificationCode: Ref<string>): {
verifyUser: () => Promise<void>;
} {
const { resolveClient } = useApolloClient();
async function verifyUser(): Promise<void> {
if (verificationCode.value !== "123456") {
return;
}
else{
console.log("worked");
//TODO: add authentication logic here
}
const client = resolveClient();
const variables = {
input: { username: verificationCode.value },
};
const response = await client.query({ query, variables });
const validatedUser: ValidatedUser = response.data.Verify;
console.log("USER:", validatedUser);
console.log("verificationCode: ", variables);
}
return { verifyUser };
}
Appreciate any help!