All language subtitles for 020 Adding Tabs_en

In this lecture, we're going to make the tabs functional in the modal.

The application is slowly starting to come together.

The modal is functional.

The next step is to add logic to the content.

Inside the modal we have two forms which are the login and registration forms.

Both forms shouldn't be appearing at the same time.

Above the forms there are two buttons.

We're going to make them functional by allowing the user to switch between forms.

This functionality is known as tabs.

Let's get started.

Open the authentication component file in your editor.

The first step is to tackle the current state of the tab.

Which form should we show the user?

We'll set the login form as the default form.

We need to keep track of which form to show we have two options at our disposal.

We can store this information in the store or we can store it as component data.

We're going to store it as component data.

This information doesn't need to be made available on a global level.

Whenever you're creating data, you should ask yourself if the data needs to be available globally.

If it does, storing it in the store is the way to go.

Otherwise, storing it as component data will suffice.

You never want to clutter your store with unnecessary data.

Scroll down to the script.

BLOCK We're going to define the data method.

Inside the object, we're going to add a property called Tab.

Its value will be the following.

Log in.

If the value is log in, we'll show the log in form.

If the value is register, we'll show the registration form.

Let's use this data to toggle the visibility of the forms in the template.

Search for a comment that says Tabs.

Below this comment are the links for the tabs.

We're going to add Click Event listeners to both anchor elements with the Prevent Modifier.

For the login link.

We're going to set the tab property to log in.

Next for the register link, we're going to set the TAB property to register.

By updating their property, we should be able to toggle the tabs after changing the property.

The last thing we need to do is change the appearance of the tabs on the login link.

There are three classes called Hover Text White, Text White and BG Blue 600.

These classes will change the background color of the link to blue and text color to white.

They should only be applied if the tab is active.

We're going to bind another class attribute.

The value for this attribute will be an object.

We're going to cut the three classes I mentioned earlier as a property to this object.

For the condition.

We will check if the TAB property is equal to log in.

These classes will get applied if the user is viewing the login form.

We're going to add another set of classes.

If they're viewing the registration form, the class will toggle is called Hover Text Blue 600.

This class will change the text color of an element to blue if it's being hovered over.

We're adding this class because we want the user to know they can interact with an element.

Adding a hover effect as a great way to show about an element can be interacted with.

The condition for this class will be the following tab equals equals equals register.

That takes care of the login tab.

Let's work on the register tab.

It's going to be similar to before.

Let's copy the class attribute.

We bind it.

We'll paste it over to the register tab link.

And the conditionals.

We're going to flip them.

This modification will give us the opposite of what we had, which is what we're looking for.

There's one last step.

We need to toggle the visibility of the forms below the unordered list element.

There are two form elements.

The first form is the login form.

The other form is the registration form.

We're going to be using conditional directives to toggle their appearance on the first form.

We're going to add the V show directive.

The condition will be the following tab equals equals equals.

Log in.

Lastly, another v show directive should be added to the second form.

The condition will be the following tab.

Equals equals equals register.

We're finished.

Save your changes and refresh the page.

If you open the modal, the login form appears, the registration form is gone.

The links above should have the proper classes applied to them since the login form is displaying,

the login link should have a background colour of blue.

If we click on the register link, the login form disappears while the register form appears.

The tabs also change.

Great.

After verifying that it does work, we can move on to the next step, which is to add form validation.

We'll cover that in the next section.