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
Inside the components directory lets create a new class file
BaseLayout.php
Now lets open this GuestLayout.php file and copy all the text and paste inside the BaseLayout.php file
And change here the class name and write here BaseLayout
Also change here the view name in return
Now go to the resource directory then views -> auth
From here open login.blade.php file
Inside this file select all text and comment this
And here add the Layout tag
Now Go to the template directory then just open login.html file in text editor
Now copy these section text
And paste inside this layout tag
Now makes some change here like following
Now lets check, so just refresh the login page,
And here you can see the login page with new layout Now apply the template on register page
So open register.blade.php file
And comment all the text
Now add the layout tag
And now go to the template directory and open register.html in text editor
now copy these section content from here and
Paste inside the layout tag
Now make some changes
Alright now check this
So switch to the browser
And click on 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
Inside the components directory lets create a new class file
BaseLayout.php
Now lets open this GuestLayout.php file and copy all the text and paste inside the BaseLayout.php file
And change here the class name and write here BaseLayout
Also change here the view name in return
<?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 to the resource directory then views -> auth
From here open login.blade.php file
Inside this file select all text and comment this
And here add the Layout tag
<x-base-layout></x-base-layout>
Now Go to the template directory then just open login.html file in text editor
Now copy these section text
And paste inside this layout tag
Now makes some change here like following
<x-base-layout>
<div class=\"section-title-01 honmob\">
<div class=\"bg_parallax image_02_parallax\"></div>
<div class=\"opacy_bg_02\">
<div class=\"container\">
<h1>Login</h1>
<div class=\"crumbs\">
<ul>
<li><a href=\"/\">Home</a></li>
<li>/</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
<section class=\"content-central\">
<div class=\"content_info\">
<div class=\"paddings-mini\">
<div class=\"container\">
<div class=\"row portfolioContainer\">
<div class=\"col-xs-12 col-sm-3 col-md-3 profile1\">
</div>
<div class=\"col-xs-12 col-sm-6 col-md-6 profile1\" style=\"min-height: 300px;\">
<div class=\"thinborder-ontop\">
<h3>Login Info</h3>
<x-jet-validation-errors class=\"mb-4\" />
<form id=\"userloginform\" method=\"POST\" accept=\"{{route('login')}}\">
@csrf
<div class=\"form-group row\">
<label for=\"email\" class=\"col-sm-4 col-form-label text-md-right\">E-Mail Address</label>
<div class=\"col-md-6\">
<input id=\"email\" type=\"email\" class=\"form-control\" name=\"email\" value=\"\" required=\"\" autofocus=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"password\"
class=\"col-md-4 col-form-label text-md-right\">Password</label>
<div class=\"col-md-6\">
<input id=\"password\" type=\"password\" class=\"form-control\" name=\"password\" required=\"\">
</div>
</div>
<div class=\"form-group row\">
<div class=\"col-md-6\">
<div class=\"checkbox\">
<label>
<input type=\"checkbox\" id=\"remember_me\" name=\"remember\"> Remember Me </label>
</div>
</div>
<div class=\"col-md-4\">
<button type=\"submit\" class=\"btn btn-primary pull-right\">Login</button>
</div>
</div>
<div class=\"form-group row mb-0\">
<div class=\"col-md-10\">
<a class=\"\" href=\"{{route('password.request')}}\">Forgot Your Password?</a>
</div>
</div>
</form>
</div>
</div>
<div class=\"col-xs-12 col-sm-3 col-md-3 profile1\">
</div>
</div>
</div>
</div>
</div>
<div class=\"section-twitter\">
<i class=\"fa fa-twitter icon-big\"></i>
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"text-center\">
</div>
</div>
</div>
</div>
</div>
</section>
</x-base-layout>
Now lets check, so just refresh the login page,
And here you can see the login page with new layout Now apply the template on register page
So open register.blade.php file
And comment all the text
Now add the layout tag
<x-base-layout></x-base-layout>
And now go to the template directory and open register.html in text editor
now copy these section content from here and
Paste inside the layout tag
Now make some changes
<x-base-layout>
<div class=\"section-title-01 honmob\">
<div class=\"bg_parallax image_02_parallax\"></div>
<div class=\"opacy_bg_02\">
<div class=\"container\">
<h1>Registeration</h1>
<div class=\"crumbs\">
<ul>
<li><a href=\"/\">Home</a></li>
<li>/</li>
<li>Registeration</li>
</ul>
</div>
</div>
</div>
</div>
<section class=\"content-central\">
<div class=\"semiboxshadow text-center\">
</div>
<div class=\"content_info\">
<div class=\"paddings-mini\">
<div class=\"container\">
<div class=\"col-xs-12 col-sm-6 col-md-6 col-md-offset-3 profile1\" style=\"padding-bottom:40px;\">
<div class=\"thinborder-ontop\">
<h3>User Info</h3>
<x-jet-validation-errors class=\"mb-4\" />
<form id=\"userregisterationform\" method=\"POST\" action=\"{{route('register')}}\">
@csrf
<div class=\"form-group row\">
<label for=\"name\" class=\"col-md-4 col-form-label text-md-right\">Name</label>
<div class=\"col-md-6\">
<input id=\"name\" type=\"text\" class=\"form-control\" name=\"name\" value=\"\" required=\"\" autofocus=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"email\" class=\"col-md-4 col-form-label text-md-right\">E-Mail Address</label>
<div class=\"col-md-6\">
<input id=\"email\" type=\"email\" class=\"form-control\" name=\"email\" value=\"\" required=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"password\"
class=\"col-md-4 col-form-label text-md-right\">Password</label>
<div class=\"col-md-6\">
<input id=\"password\" type=\"password\" class=\"form-control\" name=\"password\" required=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"password-confirm\"
class=\"col-md-4 col-form-label text-md-right\">Confirm Password</label>
<div class=\"col-md-6\">
<input id=\"password-confirm\" type=\"password\" class=\"form-control\" name=\"password_confirmation\" required=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"phone\" class=\"col-md-4 col-form-label text-md-right\">Phone</label>
<div class=\"col-md-6\">
<input id=\"phone\" type=\"text\" class=\"form-control\" name=\"phone\" value=\"\" required=\"\">
</div>
</div>
<div class=\"form-group row\">
<label for=\"email\" class=\"col-md-4 col-form-label text-md-right\">Register As</label>
<div class=\"col-md-6\">
<select class=\"form-control\" name=\"registeras\" id=\"registeras\">
<option value=\"CST\">Customer</option>
<option value=\"SVP\">Service Provider</option>
</select>
</div>
</div>
<div class=\"form-group row mb-0\">
<div class=\"col-md-10\">
<span style=\"font-size: 14px;\">If you have already registered <a
href=\"{{route('login')}}\" title=\"Login\">click here</a> to login</span>
<button type=\"submit\" class=\"btn btn-primary pull-right\">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class=\"section-twitter\">
<i class=\"fa fa-twitter icon-big\"></i>
<div class=\"container\">
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"text-center\">
</div>
</div>
</div>
</div>
</div>
</section>
</x-base-layout>
Alright now check this
So switch to the browser
And click on 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
