Verify.vue

This is where the user will be redirected after they click the verification link provided in the email when the register for an account.

import

// Importing Axios for making HTTP requests
import axios from "axios";

Above, we are importing the "axios" package which is used to make API call to the backend (Laravel). It is important because this is like the key that allows us to communicate with the backend.

export default

// Exporting the Vue component
export default {}

Inside this is where we define data, methods, computed properties, and lifecycle hooks.

data

// Data properties of the component
data() {
  return {
    domainBackend: "",
  };
}

The data method is used to initialize and define the data properties for this component. See the source code to know what each variable is used for.

mounted

// Lifecycle hook: Executed when the component is mounted to the DOM
mounted() {
  // Setting backend domain from the Vuex store
  this.domainBackend = this.$store.state.domainBackend;
  // Initiate user verification
  this.verifyUser();
}

This is called mounted lifecycle hook. The mounted hook is called after the component has been added to the DOM, making it a good place to perform initial setup and actions.

To explain what this mounted hook does:

1. It gets the backend domain from what is defined in the Vuex.

2. It verifies the user.

methods

// Methods of the component
methods: {}

The methods option is used to define methods that can be called or triggered within a Vue component. These methods are typically used to define the behavior and functionality of the component

verifyUser

// Method to send a POST request to the backend API for user verification using the provided verification code
verifyUser() {
  // Create a request object with the verification code obtained from the route parameters
  const request = {
    verificationCode: this.$route.params.verificationCode,
  };
  // Make a POST request to the backend API endpoint for user verification
  axios
    .post(this.domainBackend + "/api/verifyUser", request)
    .then((response) => {
      // Check if the verification was successful (assuming the backend returns a 'SUCCESS' property)
      if (response.data.SUCCESS == 1) {
        // If successful, show an alert and redirect the user to the login page
        alert("EMAIL HAS BEEN VERIFIED.");
        this.$router.push("/login");
      }
    });
}

To explain what this verifyUser method does:

1. It will send the verification code to the backend. The verification code is present in the verification link.

2. The backend will verify the user account.

3. If the verification is successful, the user will be alerted with a success message and they will be redirected to the login page.