The Authenticator component will be a pop up window at the bottom of the webpage. When the Get Started or Login button is clicked on, it will slide up. When we click outside of the component, it will slide down to hide itself.
The Authenticator component will be a pop up window at the bottom of the webpage. When the Get Started or Login button is clicked on, it will slide up. When we click outside of the component, it will slide down to hide itself.
Adding Material UI Component Modules
Go into the app module file and add the MatBottomSheet and MatCard modules to your project. Add the import statements and add it to the app.
Save the project and have the project opened in the browser from where we left off in the previous video.
Creating the Authenticator Component
To begin, create a new component call Authenticator using the ng generate component command and place it in the tools directory.
ng generate component tools/Authenticator
Go into the Home Component HTML page and add a click event to the Get Started button. We want to use this button to trigger the Bottom Sheet.
Home Component HTML
When we run the app on the browser and click on the Get Started button, the Bottom Sheet will show.
Adding Trigger to Login Navigation Item
Next, do the same for the Navbar. Go into the App Component HTML page and attach a click event for the login navigation item. Then go into the App Component TypeScript file to define the function.
App Component HTML
App Component TypeScript
Import and inject MatBottomSheet and then call the open method in the onLoginClick() function.
If we go to our app and click on the Login button, the bottom sheet will also show.
Adding Contents to Bottom Sheet
The next step is to the define the contents inside the Bottom Sheet for the Authenticator. Go to the Authenticator component HTML page and remove the default code.
There are 3 sections to the card component, the header, the content area, and the actions bar.
If we turn to our app, we should have a card component inside the bottom sheet with the contents
Styling the Contents
For authenticator-content, use:
Lastly add the styles for the inputs and buttons.
As you can see our styles are complete. We just need to add functionality to the buttons to change the content based on which one is clicked on.
Adding the Register and Reset Password Contents
Go to the Authenticator Component HTML page. Since we have the contents for log in, we just need to add the contents for Creating an Account and Resetting the password.
Do not forget to set the type of the password inputs to password.
If we go to our app, all 3 contents will be stacked on top of each other which is what we want for now.
Authenticator Component HTML
Authenticator Component TypeScript
Scroll to the bottom of the component and define an enum call AuthenticatorComponentState. This enum will have 3 values, LOGIN, REGISTER, and FORGOT_PASSWORD.
If we go to our app, we should be able to toggle between the 3 contents.
Changing the Header
There is one more thing that we are missing. The header is staying the same.
Go back to the Authenticator Component HTML page and use interpolation to get the text.
This will change the text depending on the content that is displayed.