Building Simple CRM with Vue: Designing and Setting Up a User-friendly Login Interface

Check this post in my web notes!

Following our integration of a Sign-Up page and configuring the Firebase authentication module for our Simple CRM, we forge ahead in today's article by seamlessly incorporating a user-friendly Login interface. Join us as we delve into the core functionality of the Login page, enhancing it with key features, and introducing a smooth logout mechanism within our profile menu. Let's start on this next phase of Vue CRM development but previously write a small list of what we need to do.

1. Crafting a User-Friendly Login Interface with Vuetify Components

2. Integrating Firebase Authentication for Seamless Login Experience in Vue CRM

3. Optimizing User Sessions: Configuring Log Out Functionality in Vue.js CRM

Now, let's dive into the actionable steps to advance our Vue CRM development:

1. Crafting a User-Friendly Login Interface with Vuetify Components.

In our previous article, we worked on the Sign-Up page, added all necessary fields, and created a new user in the Firebase Auth module. I think that the Sign-Up page and Login page should have the same styles and almost the same functionality, so let's copy them into our new Login page main form with two fields "Email" and "Password".

<form @submit.prevent="submit">
        <h3 class="mb-5">Log In</h3>
        <v-text-field
            v-model="email.value.value"
            :error-messages="email.errorMessage.value"
            label="E-mail"
        ></v-text-field>
        <v-text-field
            v-model="password.value.value"
            :error-messages="password.errorMessage.value"
            label="Password"
        ></v-text-field>
        <v-btn
            class="me-4"
            type="submit"
        >
            Log In
        </v-btn>
        <v-btn 
            color="indigo-darken-3"
            variant="flat">
            Do not have an account?
        </v-btn>
</form>

In our router file, we will add a new login route inside the children of the auth section.

In the Firebase Authentication module, there is a "signInWithEmailAndPassword" method which we will use to log in the user.

2. Integrating Firebase Authentication for Seamless Login Experience in Vue CRM

Inside our "auth" store create a new "aSignIn" action, let's make this action asynchronous and call Firebase for login as in the example.

async aSignIn(form) {
        try {
            await signInWithEmailAndPassword(auth, form.email, form.password)
                .then(async (userCredential) => {
                    this.user = userCredential.user;
                });
        } catch (error) {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorCode,errorMessage);
      }
},

Now we need to import store into our form and inside handler function call for aSignIn action with email and password parameters.

const submit = handleSubmit(values => {
  authStore.aSignIn({email: values.email, password: values.password});
})

Great, we have a login page with an integrated Firebase module. Sure we need to improve a little bit, for example, add a db to store user's data but let's talk about that later.

3. Optimizing User Sessions: Configuring Log Out Functionality in Vue.js CRM

We can sign up and log in as a user and also a third important feature in this line is Log Out. We will add the logout button to the profile menu, and use the "signOut" method from the Firebase Authentication module.

First of all, open your "HeaderAvatar" component, and inside the items array change one item into Log Out, then add a new function that will react to the type of button that was clicked and call the correct action. The modified component script module will look like this:

<script>
    import { useAuthStore } from '../../stores/auth';
    export default {
        data: () => ({
            items: [
                { title: 'Click Me' },
                { title: 'Click Me' },
                { title: 'Click Me' },
                { title: 'Log Out' },
            ]
        }),
        computed: {
            authStore() {
                return useAuthStore()
            }
        },
        methods: {
            itemAction(title) {
                if (title === 'Log Out') {
                    this.authStore.aLogOut();
                    this.$router.push('/auth/login');
                }
            }
        }
    }
</script>

As usual, we will open the auth store and add a new action that will send a logout request to Firebase and clean our user state..

async aLogOut() {
    await auth.signOut()
        .then(() => {
            this.user = null;
        });
},

Concluding this installment in our Vue CRM development journey, we seamlessly integrated a user-friendly Login interface into our Simple CRM, complementing our earlier Sign-Up page. By configuring Firebase Authentication, we've fortified the login experience, and optimized user sessions by implementing a smooth Log Out functionality. Join us as we continue this Vue.js CRM development, ensuring secure and user-centric interactions.

This marks only the beginning of our Simple CRM application – stay tuned for more insights and enhancements as we progress further into the development phase.