.loading-spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Adding alert message and loading spinner on login form using Laravel, Vue 3 and Fortify | Part 35

In this tutorial, we will learn how to add an alert message and loading spinner on the login form using Laravel, Vue 3, and Fortify.

Prerequisites

• Laravel installed on your system
• Vue 3 installed
• Fortify package installed in your Laravel project

Step 1: Set up Fortify

First, make sure you have Fortify set up in your Laravel project. If not, you can install it using the following command:

composer require laravel/fortify

Step 2: Modify the Login Component

Open the Vue component for the login form and add the following code to display an alert message and a loading spinner:

    <template>
      <div>
        <form @submit.prevent="login">
          <input type="email" v-model="email" placeholder="Email" required />
          <input type="password" v-model="password" placeholder="Password" required />
          <button type="submit">
            Login
            <span v-if="loading" class="loading-spinner"></span>
          </button>
          <div v-if="error" class="alert">{{ error }}</div>
        </form>
      </div>
    </template>

    <script>
      export default {
        data() {
          return {
            email: '',
            password: '',
            loading: false,
            error: ''
          }
        },
        methods: {
          login() {
            this.loading = true;
            // Make the login request
            // If successful, redirect the user
            // If error, display the error message and stop loading
          }
        }
      }
    </script>
  

Step 3: Style the Alert and Loading Spinner

Finally, add some CSS to style the alert message and loading spinner:

    .alert {
      background: #f8d7da;
      border: 1px solid #f5c6cb;
      color: #721c24;
      padding: 10px;
      margin: 10px 0;
    }
  

Conclusion

With these changes, your login form will now display an alert message and a loading spinner to provide visual feedback to the user while logging in. This will enhance the user experience and make the login process more intuitive and engaging.