In this video we are going to learn about Changing the Login and Register page Layout
So let see how can we use html template on login and register page
You can see here this is Default login page, and here this is the default register page
Now lets apply the html template on login and register page.
So Switch to the project and go inside the app\\View\\Components directory.
And here lets create a new file which is BaseLayout.php. Now open this file add the following code.
Now go inside the resources\\views\\auth directory.
and from here lets open the login.blade.php file and the following code.
Now lets open the register.blade.php file and the following code.
Now its done so lets check it.
So switch to the browser
And click on login link and you can see the login page with template layout. Now open register link now you can see the register page with template layout.
So in this way you can apply html template on login and register page.
So let see how can we use html template on login and register page
You can see here this is Default login page, and here this is the default register page
Now lets apply the html template on login and register page.
So Switch to the project and go inside the app\\View\\Components directory.
And here lets create a new file which is BaseLayout.php. Now open this file add the following code.
<?php
namespace App\\View\\Components;
use Illuminate\\View\\Component;
class BaseLayout extends Component
{
/**
* Get the view / contents that represents the component.
*
* @return \\Illuminate\\View\\View
*/
public function render()
{
return view('layouts.base');
}
}
Now go inside the resources\\views\\auth directory.
and from here lets open the login.blade.php file and the following code.
<x-base-layout>
<main id=\"main\" class=\"main-site left-sidebar\">
<div class=\"container\">
<div class=\"wrap-breadcrumb\">
<ul>
<li class=\"item-link\"><a href=\"/\" class=\"link\">home</a></li>
<li class=\"item-link\"><span>login</span></li>
</ul>
</div>
<div class=\"row\">
<div class=\"col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3\">
<div class=\" main-content-area\">
<div class=\"wrap-login-item \">
<div class=\"login-form form-item form-stl\">
<x-jet-validation-errors class=\"mb-4\" />
<form name=\"frm-login\" method=\"POST\" action=\"{{route('login')}}\">
@csrf
<fieldset class=\"wrap-title\">
<h3 class=\"form-title\">Log in to your account</h3>
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-login-uname\">Email Address:</label>
<input type=\"email\" id=\"frm-login-uname\" name=\"email\" placeholder=\"Type your email address\" :value=\"old('email')\" required autofocus>
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-login-pass\">Password:</label>
<input type=\"password\" id=\"frm-login-pass\" name=\"password\" placeholder=\"************\" required autocomplete=\"current-password\">
</fieldset>
<fieldset class=\"wrap-input\">
<label class=\"remember-field\">
<input class=\"frm-input \" name=\"remember\" id=\"rememberme\" value=\"forever\" type=\"checkbox\"><span>Remember me</span>
</label>
<a class=\"link-function left-position\" href=\"{{route('password.request')}}\" title=\"Forgotten password?\">Forgotten password?</a>
</fieldset>
<input type=\"submit\" class=\"btn btn-submit\" value=\"Login\" name=\"submit\">
</form>
</div>
</div>
</div><!--end main products area-->
</div>
</div><!--end row-->
</div><!--end container-->
</main>
</x-base-layout>
Now lets open the register.blade.php file and the following code.
<x-base-layout>
<main id=\"main\" class=\"main-site left-sidebar\">
<div class=\"container\">
<div class=\"wrap-breadcrumb\">
<ul>
<li class=\"item-link\"><a href=\"/\" class=\"link\">home</a></li>
<li class=\"item-link\"><span>Register</span></li>
</ul>
</div>
<div class=\"row\">
<div class=\"col-lg-6 col-sm-6 col-md-6 col-xs-12 col-md-offset-3\">
<div class=\" main-content-area\">
<div class=\"wrap-login-item \">
<div class=\"register-form form-item \">
<x-jet-validation-errors class=\"mb-4\" />
<form class=\"form-stl\" action=\"{{route('register')}}\" name=\"frm-login\" method=\"POST\" >
@csrf
<fieldset class=\"wrap-title\">
<h3 class=\"form-title\">Create an account</h3>
<h4 class=\"form-subtitle\">Personal infomation</h4>
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-reg-lname\">Name*</label>
<input type=\"text\" id=\"frm-reg-lname\" name=\"name\" placeholder=\"Your name*\" :value=\"old('name')\" required autofocus autocomplete=\"name\">
</fieldset>
<fieldset class=\"wrap-input\">
<label for=\"frm-reg-email\">Email Address*</label>
<input type=\"email\" id=\"frm-reg-email\" name=\"email\" placeholder=\"Email address\" :value=\"old('email')\">
</fieldset>
<fieldset class=\"wrap-title\">
<h3 class=\"form-title\">Login Information</h3>
</fieldset>
<fieldset class=\"wrap-input item-width-in-half left-item \">
<label for=\"frm-reg-pass\">Password *</label>
<input type=\"password\" id=\"frm-reg-pass\" name=\"password\" placeholder=\"Password\" required autocomplete=\"new-password\">
</fieldset>
<fieldset class=\"wrap-input item-width-in-half \">
<label for=\"frm-reg-cfpass\">Confirm Password *</label>
<input type=\"password\" id=\"frm-reg-cfpass\" name=\"password_confirmation\" placeholder=\"Confirm Password\" required autocomplete=\"new-password\">
</fieldset>
<input type=\"submit\" class=\"btn btn-sign\" value=\"Register\" name=\"register\">
</form>
</div>
</div>
</div><!--end main products area-->
</div>
</div><!--end row-->
</div><!--end container-->
</main>
</x-base-layout>
Now its done so lets check it.
So switch to the browser
And click on login link and you can see the login page with template layout. Now open register link now you can see the register page with template layout.
So in this way you can apply html template on login and register page.
