Create an Authentication Page Template with Ionic Page Generation

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.