Laravel 8 Project Home Services: Changing the Login and Registration Page Layout
In this video, we will learn about changing the login and registration page layout.
Let's see how we can use an HTML template on the login and registration pages.
You can see here that this is the default login page, and here is the default register page.
Now, let's apply the HTML template on the login and registration pages.
Switch to the project and go inside the app->view->components directory. Inside the components directory, let's create a new class file called BaseLayout.php.
Now, let's open the GuestLayout.php file and copy all the text, then paste it inside the BaseLayout.php file. And change the class name to BaseLayout. Also, change the view name in the return statement:
<?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 resources directory, then views -> auth. From here, open the login.blade.php file.
Inside this file, select all text and comment it out. And here, add the Layout tag:
<x-base-layout></x-base-layout>
Now, go to the template directory and open the login.html file in a text editor. Now, copy the section text and paste it inside the layout tag. Make some changes here, like the 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, let's check. Just refresh the login page, and here you can see the login page with the new layout.
Now, apply the template on the register page. So, open the register.blade.php file and comment out all the text. Now, add the layout tag:
<x-base-layout></x-base-layout>
And now, go to the template directory and open the register.html file in a text editor. Now, copy the section content from here and paste it inside the layout tag. 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. Switch to the browser and click on the register link. Now, you can see the register page with the template layout.
So, in this way, you can apply an HTML template on the login and registration pages.
