00:00:02 If you check out the design, you'll notice that both the sign-in and sign-up routes have some things in common, like the background image with the question marks,

00:00:12 the card box, this form right here, and the social auth part, like the login with GitHub and Google things.

00:00:19 But the form itself is a bit different.

00:00:21 On the left side, we have just the email and the password, while on the right side, we also add a username.

00:00:27 So please, think about this a bit.

00:00:29 Remember when I told you that the best developers are not just focusing on coding things out, but rather thinking about the architecture of the system?

00:00:38 Well, now is your chance to be that developer.

00:00:40 I don't just want to teach you how to become a coding monkey to develop UI pieces that even AI can do nowadays.

00:00:47 I want to teach you how to think and approach problems.

00:00:50 So pause this video a bit and think about how you would approach these two different forms using Next.js's best practices.

00:00:59 You know that it'll have something to do with both of these individual pages and the layout itself.

00:01:04 But how exactly can we make this in the best way possible without duplicating code?

00:01:09 Pause the video and think about it.

00:01:11 And now, I'll show you how we can do it.

00:01:14 We can start creating a common reusable layout in the Auth layout.

00:01:18 Here, we can put things that are shared with both the sign-in and sign-up pages.

00:01:23 First things first, let's give this main a class name equal to flex, min-h-screen, so it takes the full height of the screen,

00:01:33 items-center, justify-center, and if you do that, you'll see that now sign-in appears right in the middle.

00:01:40 But hey, what about this nice looking background that we have right here?

00:01:45 We can use it as a background image.

00:01:47 So let me show you how we can add it to Tailwind Config so that we can easily use it.

00:01:52 We can create a new object called background, image and there you can provide the auth-dark URL image which is going to be a string of URL opening of the

00:02:04 string forward slash images forward slash auth-dark.png close string sign close parentheses close another string sign And we can duplicate this,

00:02:14 and we can rename it to AuthLite, and this will point to images AuthLite.png.

00:02:22 If you save this, you can also go ahead and search for those Auth-Dark and Auth-Lite images within our public folder.

00:02:29 You'll be able to find them there.

00:02:30 So now that we have them, let's actually apply a BG AuthLite, and on dark mode, BG AuthDark, and save it.

00:02:39 Immediately you can see a huge background appear, but we can style it a bit by giving it a BG mode of cover, BG center, and BG no repeat.

00:02:50 If you do that, it's kind of going to hide for a moment.

00:02:53 Let's also give it a padding X of 4, padding Y of 10, and save it.

00:03:00 On desktop mode, you can see this nice looking background, but as the screen collapses, You can see it's still visible, but then,

00:03:07 yeah, it's still visible here, but there's no question marks as we don't need to see them, as the form will basically take the full mobile width.

00:03:14 Right below the main, let's render a section.

00:03:17 And this section will have a class name equal to light-border background-light.

00:03:24 800, underscore dark 200, shadow dash light 100, dark 100, min dash w dash full, for full width, and if you save it, you can see that this is going to

00:03:39 move the sign-in below.

00:03:41 Well, that's because we can put the children within it, so we can see what we're creating.

00:03:45 And now we can see a slight border appear around sign-in.

00:03:50 Let's also give it a rounded dash 10 pixels for the corners, border.

00:03:56 padding X of 4 to give it some breathing room, padding Y of 10, shadow-md, on small devices, min-w of 520 pixels, and on small devices,

00:04:09 padding X of 8. And this now creates a nice-looking form-like card.

00:04:15 Within it, we can create a div that'll have a class name equal to flex, items-center, justify-between, and a gap of 2. Within it,

00:04:28 we can create another div for spacing by giving it a class name equal to space dash y dash 2.5. And within it, we can create an h1 that'll say join devflow.

00:04:45 with a class name of h2-bold text-dark100 underscore light 900. Below that, we can render a p tag with a class name of paragraph dash regular text-dark 500

00:05:05 underscore light 400. And here we can say to get your questions answered.

00:05:13 There we go.

00:05:14 We can go below the div and render a Next.js image.

00:05:19 that'll have a source of images forward slash site dash logo dot SVG with an alt tag of Devflow logo, a width of about 50, a height of about 50, and a

00:05:34 class name of object dash contain.

00:05:38 There we go, that's looking better.

00:05:40 And finally, below this div, we have our children.

00:05:44 And below the children, we also want to share our social auth.

00:05:48 So right here, I can create a p tag that will later on show the social auth.

00:05:54 And this children currently says sign in, but actually here we'll put the sign in form.

00:05:59 Now let's turn this social auth into its own component by going to the components folder, creating a new folder called forms.

00:06:08 and within Forms, creating a new file called social-auth-form.tsx.

00:06:15 Run RAFCE and import it right here.

00:06:21 Social-auth-form.

00:06:24 Now we can go right into it and we can quickly get it developed.

00:06:28 Let's give this div a class name, equal to margin top of 10, to divide it a bit from the title, flex, flex-wrap, and the gap of 2.5. Within it,

00:06:40 we can render a button component coming from ShadZn, and within the button, let's render a Next.js image that'll have a source equal to forward slash icons,

00:06:51 forward slash github.svg, an alt tag equal to github logo, width of 20, height of 20, and a class name equal to invert colors,

00:07:05 margin right of 2.5, and object-contain.

00:07:11 If I save this, you can see a white-looking button.

00:07:14 Now, I'll give this button some class names.

00:07:17 Equal to background-dark 400, light 900. Okay, immediately makes it look better.

00:07:25 Let's give it a body medium for the text.

00:07:28 Let's give it a text dark 200, light 800. min dash h dash 12 for the height, flex of 1, rounded dash 2, and padding x of 4 with a padding y of 3.5. There

00:07:46 we go.

00:07:47 Now it looks like a nice button.

00:07:49 And if you hover over the text, you can see that we have some squiggly lines telling us that rounded 2 is not a tailored CSS class.

00:07:56 To fix it, we can head over to Tailwind Config under Border Radius and add it by saying 2, so Border Radius 2, is going to be 8 pixels.

00:08:07 And we can also add 1.5, which is going to be something like 6 pixels.

00:08:12 We're using these border radiuses in the design, and they don't depend on any kind of calculation, so they're a bit simpler to use.

00:08:20 So now we can say Round at 2, and as you can see, it just works.

00:08:23 Now, below this image, let's create a span element that'll say, log in with GitHub.

00:08:30 There we go, that's much better.

00:08:32 And we can duplicate this entire button right below.

00:08:35 And this time, we'll change the logo to Google, that SVG, say Google logo.

00:08:44 In this case, we don't need invert colors because Google logo looks good on both light and dark mode and login with Google.

00:08:53 There we go.

00:08:55 Now you can see that we are reusing these class names in both of these buttons.

00:08:58 So what we can do is we can extract them by saying const button class is equal to, and we can copy this entire class name.

00:09:08 Now, class name can be just equal to a button class variable, which makes our code just a tiny bit cleaner.

00:09:15 There we go.

00:09:16 That's looking great.

00:09:17 And let me also explain what this Invert Colors class does.

00:09:21 If you search for it, I'll select it and press Ctrl or Command Shift F, which is going to automatically trigger the global search for this thing.

00:09:30 and you can find it within Invert Colors.

00:09:33 We're using a CSS Filter Invert property, or specifically Tailwind Invert property, which is gonna invert the colors depending on the light or dark mode,

00:09:42 which is gonna make the icon look good both on light and dark mode.

00:09:46 So let's actually check it out.

00:09:47 This looks super good on desktop devices.

00:09:50 And I'll go back to the homepage by deleting the sign-in part in the local host, change it to light mode, and go back to sign-in and take a look at this.

00:10:00 Looks super nice both on light and dark mode.

00:10:04 And another huge thing that you've done in this lesson is made the layout, which now is gonna work for both the sign-in as well as the sign-up.

00:10:13 So if you head over here, check this out.

00:10:16 Join Devflow, login with GitHub, login with Google.

00:10:19 And then the sign up form is displayed, which means that we can retain the rest of this UI while only changing the form in the middle.

00:10:28 But before, let's focus on actually logging into our application by using GitHub.