Register.vue

This is where the user can register for an 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: "",
    email: "",
    emailError: "",
    password: "",
    passwordError: "",
    confirmPassword: "",
    confirmPasswordError: "",
    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

registerUser

// Method to register a new user
registerUser() {
  // Create an object 'request' containing user registration data
  const request = {
    username: this.username,
    email: this.email,
    password: this.password,
  };
  // Use Axios to make a POST request to the server for user registration
  axios
    .post(this.domainBackend + "/api/registerUser", request)
    .then((response) => {
      // Once the request is complete, check if the server response indicates success
      if (response.data.SUCCESS == 1) {
        // If registration is successful, navigate to the "notification" route/page
        this.$router.push("notification");
      }
    });
}

To explain what this registerUser method does:

1. It will send the user's username, email, and password to the backend.

2. The backend will create an account based on the data provided by the user.

3. Then, the user will redirected to the notification page which indicates them to check their email to verify their account.

togglePasswordVisibility

// Method to toggle the visibility of password input field
togglePasswordVisibility() {
  // Get references to the password and confirm password input elements by their IDs
  var passwordInput = document.getElementById("password-input");
  var confirmPasswordInput = document.getElementById(
    "confirm-password-input"
  );
  // Check if the current type of the password input is "password"
  if (passwordInput.type === "password") {
    // If it is, change the input types to "text" to make the password visible
    passwordInput.type = "text";
    confirmPasswordInput.type = "text";
  } else {
    // If the current type is not "password" (i.e., it's currently visible), change it back to "password"
    passwordInput.type = "password";
    confirmPasswordInput.type = "password";
  }
}

To explain what this togglePasswordVisibility method does:

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