A couple of fixes

First I would like to thank @OmgImAlexies for opening an issue regarding our background image, which I don’t hold the rights to use, and for providing a great source for free images here.

So lets start by changing our background image to this one.

(Don’t forget to reduce the image size later on if you want to deploy the app).

If you want the reduced image you can get it from my repository here.

Go to your App.vue component after you download the image and replace the last one, and lets change our style:

We added a background-size: cover and

.application {

background: none;

}

Because Vuetify adds a white background to our application. Now, still on our App.vue component, we’ll make a small change to our template:

<template>

<v-app>

<v-container>

<router-view/>

</v-container>

</v-app>

</template>

We changed div id="app" to a v-app which is the main component from Vuetify.

Open your Authentication.vue component and lets do a few changes to our style:

We override a few vuetify styles because of how v-app works and we also extend l-auth class since our l-signup class is exactly the same, only changing it’s animation name.

Our app will now look like this:

New background image

Now head to your index.js file inside your Authentication folder.

First we’ll make a change to our authenticate method:

We changed our promise to destruct only to data, because now we are going to store our user id as well.

Now lets modify our signup method:

We change our first promise to an arrow function since we never receive a response from our POST request. With that said, we also dont set our token in here anymore.

Instead we call our authenticate method.

We did this fix because otherwise, after signing up, our user would be redirected but he wouldn’t have a valid authentication since we never authenticated them.

Now, right below our Sign Up method we’ll add our Sign Out method:

And right after our Sign Out method, I’ll be making a small change to our Check Authentication method:

You can leave this method as it was, or you can also change it to a ternary (which is unneeded):

It’s a common mistake in JavaScript to use a conditional expression to select between two Boolean values instead of using ! to convert the test to a Boolean