Login.vue

This is where the user can login into their account.

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: "",
    username: "",
    usernameError: "",
    password: "",
    passwordError: "",
    showPassword: false,
  };
}

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() {
  // Scroll to the top of the window when the component is mounted
  window.scrollTo(0, 0);
  // Setting backend domain from the Vuex store
  this.domainBackend = this.$store.state.domainBackend;
}

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.

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

loginUser

// Method to authenticate a user with the provided username and password
loginUser() {
  // Create a request object with the provided username and password
  const request = {
    username: this.username,
    password: this.password,
  };
  // Send a POST request to the backend API's loginUser endpoint with the user's credentials
  axios
    .post(this.domainBackend + "/api/loginUser", request)
    .then((response) => {
      // Check the response data for the authentication result
      // If authentication fails (SUCCESS == 0), show an alert for invalid email or password
      if (response.data.SUCCESS == 0) {
        alert("INVALID EMAIL OR PASSWORD.");
      }
      // If the user account is not verified (SUCCESS == 2), show an alert for not being verified
      else if (response.data.SUCCESS == 2) {
        alert("NOT VERIFIED.");
      }
      // If authentication is successful (SUCCESS == 1)
      else if (response.data.SUCCESS == 1) {
        // Set user-related information in cookies (e.g., user ID and username)
        this.$cookie.setCookie("L_userId", response.data.ID);
        this.$cookie.setCookie("L_username", response.data.USERNAME);
        // Redirect the user to the home page
        this.$router.push("/");
      }
    });
}

To explain what this loginUser method does:

1. It sends the username and password inputted by the user to the backend.

2. If the username and password matches with an account, the ID and username of the user will be saved to the cookie. It will redirect the user to the home page.

3. If the username and password matches with an account but the account is not verified yet, the user will be alerted with a message.

4. If the username and password does not match with an account, the user will be alerted with a message.

loginGoogleUser

// Method to initiate the Google authentication process for user login
loginGoogleUser() {
  // Store the domainBackend and reference to the Vue instance
  const domainBackend = this.domainBackend;
  const vue = this;
  // Define properties for the Google authentication popup
  const popupProperties = "width=500,height=800,scrollbars=yes";
  // Initialize a variable to hold the reference to the Google authentication popup window
  let windowPopUp;
  // Open a new popup window with a unique name ("Google") and specified properties
  windowPopUp = window.open("", "Google", popupProperties);
  // Send a GET request to the backend API to initiate Google account authentication
  axios
    .get(this.domainBackend + "/api/authenticateGoogleAccountForLogin")
    .then((response) => {
      // Check if the authentication initiation was successful
      if (response.data.SUCCESS == 1) {
        // Extract the authentication URL from the response
        const url = response.data.AUTH_URL;
        // Set the popup window's location to the authentication URL
        windowPopUp.location.href = url;
        // Start monitoring changes in the popup window's URL
        monitorUrlChanges();
      }
    });
  // Function to monitor changes in the popup window's URL
  function monitorUrlChanges() {
    // Set an interval to repeatedly check the URL changes
    const interval = setInterval(() => {
      // Check if the popup window is still open
      if (windowPopUp && !windowPopUp.closed) {
        // Get the current URL of the popup window
        const urlPopUp = windowPopUp.location.href;
        // Check if the URL contains the authentication code
        if (urlPopUp.includes("?code=")) {
          // Extract the code from the URL
          const params = new URLSearchParams(urlPopUp.split("?")[1]);
          const code = params.get("code");
          // Send the authentication code for further processing
          sendCode(code);
          // Stop monitoring URL changes by clearing the interval
          clearInterval(interval);
        }
      } else {
        // If the popup window is closed, stop monitoring URL changes
        clearInterval(interval);
      }
    }, 1000);
  }
  // Function to send the received authentication code to the backend for verification
  function sendCode(code) {
    // Create a request object with the authentication code
    const request = {
      code: code,
    };
    // Send a POST request to the backend API to verify the Google authentication code
    axios
      .post(domainBackend + "/api/loginGoogleUser", request)
      .then((response) => {
        // Check if the verification was successful
        if (response.data.SUCCESS == 1) {
          // Close the popup window
          windowPopUp.close();
          // Set user-related information in cookies
          vue.$cookie.setCookie("L_userId", response.data.ID);
          vue.$cookie.setCookie("L_username", response.data.USERNAME);
          // Redirect the user to the home page
          vue.$router.push("/");
        }
      });
  }
}

To explain what this loginGoogleUser method does:

1. It retrieves an authentication URL which is used to authenticate the user's Google account. It is needed so because the username and password is generated from that Google account.

2. The authentication URL will be opened in a pop-up window.

3. Then, the changes that happens in the URL bar of the pop-up window is monitored because after the user has authenticated their account, Google will send a code which is then used to login the user.

4. After the code has been given by Google, the user ID and username of the user will be saved to the cookie. It will redirect the user to the home page.

loginFacebookUser

// Method to initiate the Facebook authentication process for user login
loginFacebookUser() {
  // Store the domainBackend and reference to the Vue instance
  const domainBackend = this.domainBackend;
  const vue = this;
  // Define properties for the Facebook authentication popup
  const popupProperties = "width=500,height=800,scrollbars=yes";
  // Initialize a variable to hold the reference to the Facebook authentication popup window
  let windowPopUp;
  // Open a new popup window with a unique name ("Facebook") and specified properties
  windowPopUp = window.open("", "Facebook", popupProperties);
  // Send a GET request to the backend API to initiate Facebook account authentication
  axios
    .get(this.domainBackend + "/api/authenticateFacebookAccountForLogin")
    .then((response) => {
      // Check if the authentication initiation was successful
      if (response.data.SUCCESS == 1) {
        // Extract the authentication URL from the response
        const url = response.data.AUTH_URL;
        // Set the popup window's location to the authentication URL
        windowPopUp.location.href = url;
        // Start monitoring changes in the popup window's URL
        monitorUrlChanges();
      }
    });
  // Function to monitor changes in the popup window's URL
  function monitorUrlChanges() {
    // Set an interval to repeatedly check the URL changes
    const interval = setInterval(() => {
      // Check if the popup window is still open
      if (windowPopUp && !windowPopUp.closed) {
        // Get the current URL of the popup window
        const urlPopUp = windowPopUp.location.href;
        // Check if the URL contains the authentication code
        if (urlPopUp.includes("?code=")) {
          // Extract the code from the URL
          const params = new URLSearchParams(urlPopUp.split("?")[1]);
          const code = params.get("code");
          // Send the authentication code for further processing
          sendCode(code);
          // Stop monitoring URL changes by clearing the interval
          clearInterval(interval);
        }
      } else {
        // If the popup window is closed, stop monitoring URL changes
        clearInterval(interval);
      }
    }, 1000);
  }
  // Function to send the received authentication code to the backend for verification
  function sendCode(code) {
    // Create a request object with the authentication code
    const request = {
      code: code,
    };
    // Send a POST request to the backend API to verify the Facebook authentication code
    axios
      .post(domainBackend + "/api/loginFacebookUser", request)
      .then((response) => {
        // Check if the verification was successful
        if (response.data.SUCCESS == 1) {
          // Close the popup window
          windowPopUp.close();
          // Set user-related information in cookies
          vue.$cookie.setCookie("L_userId", response.data.ID);
          vue.$cookie.setCookie("L_username", response.data.USERNAME);
          // Redirect the user to the home page
          vue.$router.push("/");
        }
      });
  }
}

To explain what this loginFacebookUser method does:

1. It retrieves an authentication URL which is used to authenticate the user's Facebook account. It is needed so because the username and password is generated from that Facebook account.

2. The authentication URL will be opened in a pop-up window.

3. Then, the changes that happens in the URL bar of the pop-up window is monitored because after the user has authenticated their account, Facebook will send a code which is then used to login the user.

4. After the code has been given by Facebook, the user ID and username of the user will be saved to the cookie. It will redirect the user to the home page.

togglePasswordVisibility

// Method to toggle the visibility of the password in the password input field
togglePasswordVisibility() {
  // Get the DOM element for the password input field by its ID
  var passwordInput = document.getElementById("password-input");
  // Check if the current type of the password input field is "password"
  if (passwordInput.type === "password") {
    // If it is, change the type to "text" to make the password visible
    passwordInput.type = "text";
  } else {
    // If it's not "password" (likely "text"), change it back to "password" to hide the password
    passwordInput.type = "password";
  }
}

To explain what this togglePasswordVisibility method does:

1. It hide or shows the content of the password input field.