ForgotPassword.vue

This is where the user can reset their account's password.

import

// Importing Vue components for the NavigationBar and Footer
import NavigationBar from "../reusable-layout/NavigationBar.vue";
import Footer from "../reusable-layout/Footer.vue";
// Importing Axios for making HTTP requests
import axios from "axios";

Above, we are importing the NavigationBar and Footer component which is a reusable layout because navigation bars and footers are usually same for each page so instead of writing it for each page, it's better to write it in one Vue page and import it in each page as components

Next, is 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.

components

// Register the imported components
components: {
  NavigationBar,
  Footer,
}

The components option is used to register and make Vue external components available for use within this component

data

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

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() {
  // Initialize domainBackend, scroll to the top, and set up the initial UI state
  this.domainBackend = this.$store.state.domainBackend;
  // Scroll to the top of the window when the component is mounted
  window.scrollTo(0, 0);
  // Hide all input elements initially and show only the email input
  this.hideEverything();
  this.showEmail();
}

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 scrolls the window to the top so the user sees the content at the beginning of the page.

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

  3. All other sections will be hidden except the email input section.

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

submitEmail

// Method to let user submit email for password reset, handle verification response, and update UI accordingly
submitEmail() {
  // Prepare the request payload with the entered email
  const request = {
    email: this.email,
  };
  // Make a POST request to the backend API endpoint for email verification
  axios
    .post(this.domainBackend + "/api/verifyEmail", request)
    .then((response) => {
      // Check if the email verification was successful (SUCCESS == 1)
      if (response.data.SUCCESS == 1) {
        // Set cookies for OTP and user ID received from the backend
        this.$cookie.setCookie("FP_otp", response.data.OTP);
        this.$cookie.setCookie("FP_userId", response.data.USER_ID);
        // Hide the current step and show the OTP input step
        this.hideEverything();
        this.showOtp();
        // Display a success message to the user
        alert("VERIFICATION SUCCESSFUL. CHECK EMAIL.");
      } else if (response.data.SUCCESS == 0) {
        // If email verification failed, display an error message
        alert("VERIFICATION FAILED.");
      }
    });
}

To explain what this submitEmail method does:

  1. It sends the email inputted by the user to the backend.

  2. The backend will check through all user accounts until it matches the email.

  3. If the email exists, the OTP and the user ID retrieved from the backend will be saved to the cookie. All other sections will be hidden except the OTP input section. The user will be alerted with a success message.

  4. If the email does not exists, the user will be alerted with a failure message.

submitOtp

// Method to let user submit OTP for verification, manage UI based on result
submitOtp() {
  // Check if the entered OTP matches the stored OTP in cookies
  if (this.otp == this.$cookie.getCookie("FP_otp")) {
    // If OTP is correct, hide the current step and show the password input step
    this.hideEverything();
    this.showPassword();
    // Display a success message to the user
    alert("CORRECT OTP. PROCEED TO RESET PASSWORD.");
  } else {
    // If OTP is incorrect, display an error message
    alert("INCORRECT OTP.");
  }
}

To explain what this submitOtp method does:

  1. If the OTP inputted by the user matches with the OTP retrieved from the backend, then all the other sections will be hidden except the password input section. The user will be alerted with a success message.

  2. If the OTP inputted by the user does not match with the OTP retrieved from the backend, then the user will be alerted with a failure message.

submitPassword

// Method to let user submit new password for reset, handle response, and update UI accordingly
submitPassword() {
  // Prepare the request payload with the new password and user ID
  const request = {
    password: this.password,
    userId: this.$cookie.getCookie("FP_userId"),
  };
  // Make a POST request to the backend API endpoint for password reset
  axios
    .post(this.domainBackend + "/api/resetPassword", request)
    .then((response) => {
      // Check if the password reset was successful (SUCCESS == 1)
      if (response.data.SUCCESS == 1) {
        // Remove the OTP and user ID cookies
        this.$cookie.removeCookie("FP_otp");
        this.$cookie.removeCookie("FP_userId");
        // Display a success message to the user
        alert("PASSWORD RESET SUCCESSFUL. PROCEED TO LOGIN.");
        // Redirect the user to the login page
        this.$router.push("/login");
      } else if (response.data.SUCCESS == 0) {
        // If password reset failed, display an error message
        alert("PASSWORD RESET FAILED.");
      }
    });
}

To explain what this submitPassword method does:

  1. It sends the password inputted by the user along with the user's ID to the backend.

  2. If the password is reset successfully, it will remove the cookie and the user will be alerted with a success message.

  3. If the password is not reset successfully, the user will be alerted with a failure message.

hideEverything

// Method to hide all input elements (email, OTP, password) on the UI
hideEverything() {
  // Get references to the DOM elements for email, OTP, and password
  const email = document.getElementById("email");
  const otp = document.getElementById("otp");
  const password = document.getElementById("password");
  // Hide the email input, OTP input, and password input elements
  email.style.display = "none";
  otp.style.display = "none";
  password.style.display = "none";
}

To explain what this hideEverything method does:

  1. It hides all the sections.

showEmail

// Method to show only the email input element on the UI
showEmail() {
  // Get references to the DOM elements for email, OTP, and password
  const email = document.getElementById("email");
  const otp = document.getElementById("otp");
  const password = document.getElementById("password");
  // Show the email input element and hide the OTP and password input elements
  email.style.display = "block";
  otp.style.display = "none";
  password.style.display = "none";
}

To explain what this showEmail method does:

  1. It shows the email input section.

showOtp

// Method to show only the OTP input element on the UI
showOtp() {
  // Get references to the DOM elements for email, OTP, and password
  const email = document.getElementById("email");
  const otp = document.getElementById("otp");
  const password = document.getElementById("password");
  // Hide the email input and password input elements, and show the OTP input element
  email.style.display = "none";
  otp.style.display = "block";
  password.style.display = "none";
}

To explain what this showOtp method does:

  1. It shows the OTP input section.

showPassword

// Method to show only the password input element on the UI
showPassword() {
  // Get references to the DOM elements for email, OTP, and password
  const email = document.getElementById("email");
  const otp = document.getElementById("otp");
  const password = document.getElementById("password");
  // Hide the email input and OTP input elements, and show the password input element
  email.style.display = "none";
  otp.style.display = "none";
  password.style.display = "block";
}

To explain what this showPassword method does:

  1. It shows the password input section.

PreviousExcelToMap.vueNextHome.vue

Last updated