So now let's go ahead and let's actually create this route which is currently a 404. So when we click here we get redirected to a 404. I want to fix that and I want to show an actual box. So inside of our app folder we have to create that route and we know the URL. The URL is localhost 3000 slash auth slash login so exactly what we've written inside of components auth login button right here.
So we're gonna create this very route. Go inside of the app folder and create a new folder called out and then inside another folder called login and let's go ahead and give it a page.tsx so just like we practiced in the second module. Let's go ahead and do a default export here of our login page and let's create a div login page like this and there we go we should no longer be getting any errors so when you click from your home page to here you should see the login page. Great! Now let's go ahead and let's add a layout to this out folder so that every single route that we have be that login, register, new password, forgot password, all of those things will share the same layout.
So create a layout.vsx file like that and let's export default out layout. Let's go ahead and extract the children and the type for the children is react.reactnode like that and if you want to you can collapse them like this so it's just a bit more readable. Great and now let's go inside and render the children like this and nothing should change for now so what I want to do is give this div a class name with hFull, blacks, itemsCenter and justifyCenter. And now our text is in the middle of the page. And now I want to add it a background color.
So we can do that. You can either simply write BG Sky 500 like this or you can copy if you've written like I did in our home page in app page you can just copy this BG gradient and the from sky and the to blue like this. So I'm gonna paste that here instead of this and there we go. Now I have the exact same background color both on my home page and here on the login page like that. And we are done with the out layout.
Nothing more we have to do here. So let's go back inside of our login folder page.vsx right here. So in here we're gonna do a very simple thing. Instead of returning a div we're gonna return a login form component which right now does not exist. So let's go ahead and let's create it.
So we're gonna create that inside of components out. So we will be able to render the login form either in the page or if you remember inside of our components login button we have a model to implement. So we're going to be able to reuse the login form either in a separate route or in a model if that's what we prefer. Great! So go inside of the out folder in the components and create a new file login-form.csx like that.
And let's go ahead and export const login form so we are not exporting default here because this is just a component it's not a page and let's go ahead and return login form like that and now we can go back so I'm going to close everything we can go back instead of the app folder out login page.csx and we can import the login form from components, out, login form and you should see that rendered right here. What I want to create next is a card. So every single one of our elements like login, register, new password, verification, all of those things are going to be rendered inside of the identical card model. So we're going to create a file called card wrapper. In order to do that we have to go inside of our terminal first.
You can either shut down the app or open a new terminal like this and write npx chat-cn ui at latest add card like that and that's going to add a card component inside of your project. That's it. You can close this terminal, make sure you have npm run dev running and just refresh your app to make sure everything is synchronized. Great! So now let's go inside of the components out login form and inside of here we're gonna go ahead and we're gonna wrap the entire thing inside of a component called CardWrapper which also does not exist yet so if you save you're going to get an error.
So let's go inside of the Auth again, inside of components Auth, create a new file card-wrapper.csx like that and let's go ahead and mark this as useClientComponent and let's create an interface card-wrapper-props. Let's give it a children of react.reactNode. Let's give it a header label, which is a required string. Let's give it a back button label, which is gonna be a string. Let's give it a back button href which is also going to be a string and let's give it a show social which is an optional boolean and now let's export const card wrapper here And let's go ahead and extract those props.
So card wrapper props like that. And now we can destructure the children, the header label, the back button label, the back button href, and the show social like this. And now inside of here what we're going to do is we're going to return and render a card from ./.ui-card. You can see how I added this import here. So you can either do it like that.
The reason it can import it from here is because we are already in the components folder. So it's this one that we're working with, card wrapper. So it goes back one file, back another folder and it goes inside of the UI card or you can do at slash components UI card if you want to be consistent throughout the project. Both will work just fine. And besides the card we're going to need a couple of more elements.
So we need the card, we need the card content, we need the card footer and the card header. Like that. So let's go ahead and wrap this inside of a card. Let's go ahead and give this a class name of width 400 pixels and shadow medium. Like that.
And inside render the children like that. Now let's go back inside the login form here and you can import that card wrapper from .slash card wrapper and there we go. You should have a little TypeScript error but you should be able to see your login form inside of a card this time. Great! So let's go ahead and give this card wrapper all the props it needs.
So the header label is gonna be welcome back. The back button label is gonna be don't have an account? The back button href is going to go to slash out slash register and we're going to have a prop show social. So we show the login buttons using Google and GitHub. Like that.
Great, and we no longer have any TypeScript errors and it should still be rendering just fine. Now let's go ahead back inside of this CardWrapper component and let's style it a bit more. So what I want to create is a reusable header component. So let's go ahead and do the following. Inside of the out folder in the components create a new file header.tsx like that.
Let's go ahead and import poppins from next font Google. Let's go ahead and let's import CN from libutls. Let's define the font using the popins import and just as we did in the landing page we're gonna give it a subset of Latin and the weight of 600. Like that. And let's create an interface header props here to accept the label which is a string and let's export const header component let's go ahead and extract the props so header props label like this and inside very simply we're gonna return a div with a class name of width-full-flex-flex-col-gap-wide-for-item-center-and-justify-center and inside an h1 element which is going to say alf like this and if you want to you can add a little emoji like I am doing right now great let's give this h1 element a class name which is going to be dynamic.
So let's use the CNN library and first let's find the default class names which is going to be the text3.excel and font.semibold and then let's pass in the font.classname here like that and below that we're going to add a paragraph which is going to render our custom label which we are going to reuse for different types of login components. Let's give this paragraph a class name of TextNutedForeground and TextSmall. Like that. And we are done with our header component. Now we can go back inside of the card wrapper component here and we're going to use this header label to render our new header component.
So instead of rendering the children here, above that add a card header which we already have imported, so just ensure that you have this and inside of here we're gonna render our reusable header component which you can import from dot slash header like this or if you want to be consistent you can use components auth header like that and there we go you should be seeing our nice out text right here. So let's go ahead and give this header a label which is going to be header label. Like that. And there we go. We have a nice text which says welcome back.
Perfect. So let's go ahead and see what else we have to do. Let's wrap these children inside of card content like that. There we go, you can see how now the text is indented and it's no longer all the way to the side of this border. Perfect!
And now what I want to do is I want to create the social components and the back button components. So let's go ahead and do this. If we have a prop show social go ahead and render the following. We're going to render a card footer which we also have imported so you should be using all of this here and inside of here we're gonna render our social which currently is not defined so let's go ahead and create that. So inside of the out folder create a new file social.tsx.
Let's go ahead and mark this as use client and let's export const social. And let's return a div with a class name of flex-item-center, full width and a gap x2 in between the elements which we are going to have inside. And in order to render the Google and GitHub icons I recommend that you install a package called React Icons. So let's go ahead and do npm install react-icons, like this. Let's wait a second for this to install and refresh your page.
You should still be getting this error here. In order to get rid of the error we can already go back inside of the card wrapper component and import the social from .slash social. If you want to be consistent you can change it to components auth social. The same thing with it with the header because all of these components are in the same level in the components folder out right here so outside of the app folder. Let's go back inside of the social.csx and let's render those buttons.
So I want to go ahead and I want to import fc Google from react-icons.fc and I want to import fa-github from react-icons.fa. Now inside let's go ahead and let's render a button component from ./.uiButton or ComponentsUIButton like this And let's go ahead and just simply render the FC Google in here. And now let's give this a size of large, let's give it a class name of width pool, let's give it a variant of outline and on click for now can just be an empty arrow function like this and let's give this fc Google a class name of h5 and width 5 like that. And we can copy and paste this button one below another and give this one an fa github. Like this.
There we go. We now have our social logins. Of course, we will add the functionality later. But this is very cool because we will reuse this card wrapper and we have the props to hide or show the social buttons depending on how we need. So let's take a look at this now.
There we go. We have beautiful GitHub and Google icons right here and if you go inside of your login form here, So inside of my components out login form. And if you remove this show social, there we go. They are hidden. If you bring it back, they are shown right here.
Great. So let's go ahead. Oh, also, if you want to, you can change this to add slash components out card wrapper So I just like to be consistent with this import alias. It doesn't really matter Great. So now let's go ahead back inside the card wrapper component And what I want to create now is the last component we need which is the back button component.
So let's go ahead and add another card footer here. And inside we're going to render the back button component like this. And let's give it an href of back button href. And let's give it a label of back button label. So you should have both of these props destructured from here.
Great! And you should be getting of course an error because our back button component does not exist yet. So let's go ahead and create it inside of the components out folder back-button.tsx like that and let's go ahead and let's mark this as use client and let's export const back button and let's return a div which uses the button component like this and I will just change the import to use components UI button. Now let's quickly create an interface back button props to accept the back the href which is a string and the label which is a string like this and now we can destructure those props so back button props we can get the href and the label like this. Great!
Now let's go inside of the button here and let's go ahead and add a link component from next slash link so make sure you add this import and we're gonna give this an href of href and inside we're gonna render the label like that. Well, my apologies, so I just exited the back button so we were here. So label like this and Let's go ahead and give this button a variant of link. Let's give it a class name of font normal and width full. Let's give it a size of small and let's give it an as child property so we can properly render the link component inside.
Like that. Great. Now we can go back inside the card wrapper and we can import the back button component from .slash back button or components auth back button and there we go. We should now have our back button. When we click it should be a 404 page because we don't have that href yet.
Perfect! So we created a reusable component and now we are ready to set up our form. Great, great job!