Create an Authentication Page Template with Ionic Page Generation
Now it's time to create a template for our authentication page using Ionics page generation CLI.
We'll show how to use the same page for all of our authentication operations by reading the parameters from the URL and displaying the right form elements and buttons depending on the parameters present.
Jorge Vergara: [0:01] To start working on our authentication feature, we are going to create a new page for authentication. We are going to handle login, signup, and password reset on the same page.
[0:18] For that, we have created an authentication form. This has the email, password, it has the submit button and the page has two links, Forgot Password and Create Account. When a user clicks on Forgot Password, they are going to come to reset password. When they click on Create Account, they are going to go to the Create Account page.
[0:40] In our class, what we are doing is that we are injecting ActivatedRoute into our constructor and with that we are getting from the URL, if you see here, I can go into the auth-routing.module. We have to route the base route and the authMode route.
[1:01] They are both going to the AuthPage. This page is reading the URL from here and depending if it is login, reset, or signup, it's going to set everything up for us. It's going to add the page title so that it appears here either Login, Reset Password, or Create Account.
[1:23] In the template, you see that this container here, the one that shows at the specific buttons, it's only going to appear if the user is in the login mode. As soon as the user moves to, let's say, Create A New Account, we are in signup mode and those buttons won't appear.
[1:42] If I go back and I go to Forgot Password, you see that I have only one field, email, and that's because the password only appears when the authMode is different from reset.