Laravel 8 | forgot password using CSS HTML

Laravel 8 | forgot password using CSS HTML

Soeng Souy

  

Laravel 8 | forgot password using CSS HTML






step 1: Install ui

Note:

composer require laravel/ui
php artisan ui vue --auth

step 2: Install Laravel Project

First Install a Laravel project to run  below command

composer create-project --prefer-dist laravel/laravel Login_System_PHP

Step 3: Setup Database Credentials

Create a new database custom auth and now open your .env file and add your database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=#Your database name
DB_USERNAME=root #Your database username
DB_PASSWORD=#Your database password

Now run the migration command and generate a table in the database.

php artisan migrate

Step: public/assets/css/style.css

/* =============== */
/* Version  : css 3 */
/* Creat by : Soeng Souy */
/* =============== */

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f5f8fb;
}
.form-signin {
    width: 100%;
    max-width: 480px;
    margin: auto;
}
.p-5 {
    padding: 2rem !important;
}

/* image */
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
img {
    vertical-align: middle;
    border-style: none;
}

/* btn */

.btn-primary {
    color: #fff !important;
    background-color: #1BA262 !important;
    border-color: #1BA262 !important;
    padding: 1em;
}
.btn-primary:hover {
    color: #fff !important;
    background-color: #168652 !important;
    border-color: #168652 !important;
    padding: 1em;
}
.btn-group-sm>.btn, .btn-sm {
    padding: 1.25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}
a {
    color: #21c87a;
    text-decoration: none;
    background-color: transparent;
}
p {
    color: #646f79;
}
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a:hover {
    color: #168652;
    text-decoration: none;
}
.text-muted {
    color: #8c98a4 !important;
}

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: #3b5998;
}
.btn-facebook:hover {
    color: #fff;
    background-color: #30497c;
    border-color: #2d4373;
}

.btn-twitter {
    color: #fff;
    background-color: #0c85d0;
    border-color: #0b7ec4;
}
.btn-twitter:hover {
    color: #fff;
    background-color: #0d8ddc;
    border-color: #0c85d0;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
    background-color:#21C87A;
    box-shadow: none !important;
}
.custom-control-label:before{
    box-shadow: none !important;
}

/* login form */
.login-form {
    width: 100%;
    max-width: 480px;
    margin: auto;
}
.login-form form {        
    padding: 30px;
}

input:focus {
    box-shadow: none !important;
    border: 1px solid #20C477 !important;
    outline-width: 0;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.7em + 1.5rem + 2px);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #151b26;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e3e6f0;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
}
.input-group-text {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #8f95a0;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 0.25rem;
}

.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.login-form h2 {
    margin: 0 0 15px;
}
.form-control, .login-btn {
    border-radius: 2px;
}
.input-group-prepend .fa {
    font-size: 18px;
}
.login-btn {
    font-size: 15px;
    font-weight: bold;
  	min-height: 40px;
}
.social-btn .btn {
    border: none;
    margin: 10px 3px 0;
    opacity: 1;
}
.social-btn .btn:hover {
    opacity: 0.9;
}
.social-btn .btn-secondary, .social-btn .btn-secondary:active {
    background: #507cc0 !important;
}
.social-btn .btn-info, .social-btn .btn-info:active {
    background: #64ccf1 !important;
}
.social-btn .btn-danger, .social-btn .btn-danger:active {
    background: #df4930 !important;
}
.or-seperator {
    margin-top: 20px;
    text-align: center;
    border-top: 1px solid #ccc;
}
.or-seperator i {
    padding: 0 10px;
    color: #8c98a4;
    background: #f7f7f7;
    position: relative;
    font-size: 0.75rem;
    top: -11px;
    z-index: 1;
}

Step 4: Create Register Page Routes

Now go in your routes>web.php file and create two routes here.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('auth.login');
});

// ------------------------------register---------------------------------------
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');

Route::view('/home', 'home')->middleware('auth');
Route::group(['middleware' => 'auth:admin'], function () {
});

Auth::routes();
// -----------------------------login-----------------------------------------
Route::get('/login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
Route::post('/login', 'App\Http\Controllers\Auth\LoginController@authenticate');
Route::get('/logout', 'App\Http\Controllers\Auth\LoginController@logout')->name('logout');

// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');

Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');

Step 5: Create Register Page Controller

Now create a new controller RegisterController to adding the below code in your terminal.

php artisan make:controller Auth/RegisterController

After creating the register controller add the below code on it.

app\Http\Controllers\Auth\RegisterController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Hash;

class RegisterController extends Controller
{
  public function register()
  {
    return view('auth.register');
  }
  public function storeUser(Request $request)
  {
      $request->validate([
          'name' => 'required|string|max:255',
          'email' => 'required|string|email|max:255|unique:users',
          'password' => 'required|string|min:8|confirmed',
          'password_confirmation' => 'required',
      ]);
      User::create([
          'name' => $request->name,
          'email' => $request->email,
          'password' => Hash::make($request->password),
      ]);
      return redirect('login');
  }
}

Step 6: Create Register Blade Files

Now you need to create your blades files. First, create new folder layouts in your resources>views directory, then create a new file app.blade.php in the layout folder the same as below.

resources\views\layouts\app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>
<!-- --------------library bootstrap --------------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/css/styles.css">

</head>
<body>


</body>
</html>

Now create a new folder auth in your resources>views directory and add a new file register.blade.php then add the below code on it.

resources\views\auth\register.blade.php

@extends('layouts.app')
<div class="login-form">
    <form method="POST" action="{{ route('register') }}">
        @csrf
        <div class="text-center">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Please sign up</h1>
            <p>Fill out the form to get started.</p>
        </div>
        <div class="js-form-message mb-3">
            <div class="js-focus-state input-group form">
              <div class="input-group-prepend form__prepend">
                <span class="input-group-text form__text">
                  <i class="fa fa-user form__text-inner"></i>
                </span>
              </div>
              <input id="name" type="text" class="form-control form__input @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}"placeholder="Name" autocomplete="name" autofocus>
                @error('name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="js-form-message mb-3">
            <div class="js-focus-state input-group form">
              <div class="input-group-prepend form__prepend">
                <span class="input-group-text form__text">
                  <i class="fa fa-envelope form__text-inner"></i>
                </span>
              </div>
              <input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}"  placeholder="Email" autocomplete="email">
              @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
            </div>
        </div>
	<div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                    </span>
                </div>
                <input type="password" class="form-control @error('password') is-invalid @enderror" name="password"  placeholder="Password" autocomplete="new-password">
                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-key"></i>
                    </span>
                </div>
                <input type="password" class="form-control" name="password_confirmation"  placeholder="Confirm Password" autocomplete="new-password">
            </div>
        </div>
        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary login-btn btn-block">Signup</button>
        </div>
        <div class="text-center mb-3">
            <p class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
        </div>
	<div class="or-seperator"><i>OR</i></div>
        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                <i class="fa fa-facebook mr-2"></i>
                Signin with Facebook
              </button>
            </div>
            <div class="col-sm-6">
              <button type="button" class="btn btn-block btn-sm btn-twitter">
                <i class="fa fa-twitter mr-2"></i>
                Signin with Twitter
              </button>
            </div>
        </div>
        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
    </form>
</div>

You can run your register functionality run perfectly in your browser. Now we learn how to work login functionality in laravel without auth.

Step 7: Create Login Controller

Now create your LoginController to add the below command in your terminal and add the below code on it.

php artisan make:controller Auth/LoginController

The controller is shown in your App\Http\Controllers directory.

app\Http\Controllers\Auth\LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Auth;

class LoginController extends Controller
{
    public function login()
    {

      return view('auth.login');
    }

    public function authenticate(Request $request)
    {
        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
        ]);

        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            return redirect()->intended('home');
        }

        return redirect('login')->with('error', 'Oppes! You have entered invalid credentials');
    }

    public function logout() {
      Auth::logout();

      return redirect('login');
    }

}

Step 8: Create Login Blade File

After creating a login controller to showing a login view just create a login page inside the auth folder and add the below code.

resources/views/auth/login.blade.php

@extends('layouts.app')
<div class="login-form">
    <form method="POST" action="{{ route('login') }}">
        @csrf
        <div class="text-center">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Please sign in</h1>
            <p>Signin to manage your account.</p>
        </div>
        @if(session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
        @endif
        <div class="js-form-message mb-3">
            <div class="js-focus-state input-group form">
              <div class="input-group-prepend form__prepend">
                <span class="input-group-text form__text">
                  <i class="fa fa-user form__text-inner"></i>
                </span>
              </div>
              <input type="email" class="form-control form__input  @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus">
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
		<div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fa fa-lock"></i>
                    </span>
                </div>
                <input type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
                @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
              <!-- Checkbox -->
              <div class="custom-control custom-checkbox d-flex align-items-center text-muted">
                <input class="custom-control-input"type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                <label class="custom-control-label" for="remember">
                  Remember Me
                </label>
              </div>
              <!-- End Checkbox -->
            </div>
            <div class="col-6 text-right">
              <a class="float-right" href="recover-account.html">Forgot Password?</a>
            </div>
        </div>
        <div class="form-group mb-3">
            <button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
        </div>

        <div class="text-center mb-3">
            <p class="text-muted">Do not have an account? <a href="{{route('register')}}">Signup</a></p>
        </div>
		<div class="or-seperator"><i>OR</i></div>

        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                <i class="fa fa-facebook mr-2"></i>
                Signin with Facebook
              </button>
            </div>
            <div class="col-sm-6">
              <button type="button" class="btn btn-block btn-sm btn-twitter">
                <i class="fa fa-twitter mr-2"></i>
                Signin with Twitter
              </button>
            </div>
        </div>
        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
    </form>
</div>

Step 9: Add Home Functionality

Add Route

Route::get('home', 'HomeController@home')->name('home');
Add Controller
php artisan make:controller HomeController
Now add the below code in your HomeContoller.
app\Http\Controllers\HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Session;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }
}

After successfully login you will be redirected to the home page, so you have to create a new page in your resources/views directory and add the below code on it. This page show after you have successfully log in a user.

resources/views/home.blade.php

@extends('layouts.app')
<div class="login-form">
    <form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
        <div class="text-center">
            <a href="index.html" aria-label="Space">
                <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
            </a>
          </div>
        <div class="text-center mb-4">
            <h1 class="h3 mb-0">Admin Dashboard</h1>
            <p>Welcome to my dashboard</p>
        </div>

        <div class="text-center mb-3">
            <p class="text-muted"><a href="reset-password.php">Reset Password</a></p>
        </div>
        <div class="text-center mb-3">
            <p class="text-muted"><a href="{{route('logout')}}">Logout</a></p>
        </div>
		<div class="or-seperator"><i>JOIN</i></div>
        <div class="row mx-gutters-2 mb-4">
            <div class="col-sm-6 mb-2 mb-sm-0">
              <button type="button" class="btn btn-block btn-sm btn-facebook">
                <i class="fa fa-facebook mr-2"></i>
                @soengsouy
              </button>
            </div>
            <div class="col-sm-6">
              <button type="button" class="btn btn-block btn-sm btn-twitter">
                <i class="fa fa-twitter mr-2"></i>
                @soengsouy
              </button>
            </div>
        </div>
        <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
    </form>
</div>

After custom registration and login functionality in Laravel now we learn how to create custom forgot and reset password functionality in Laravel. First, create forgot password functionality in Laravel. Create two routes in your web.php file.

Step 10: Create Forget Password Routes

routes/web.php

// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');

Step 11: Create Forget Password Controller

Now you need to create a ForgotPasswordController just run the below command.

php artisan make:controller Auth/ForgotPasswordController

After creating the controller now add the below code on it.

app/Http/Controllers/Auth/ForgotPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use DB;
use Carbon\Carbon;
use Mail;

class ForgotPasswordController extends Controller
{
    public function getEmail()
    {

       return view('auth.password.email');
    }

    public function postEmail(Request $request)
    {
        $request->validate([
            'email' => 'required|email|exists:users',
        ]);

        $token = Str::random(60);

        DB::table('password_resets')->insert(
            ['email' => $request->email, 'token' => $token, 'created_at' => Carbon::now()]
        );

        Mail::send('auth.password.verify',['token' => $token], function($message) use ($request) {
                  $message->from($request->email);
                  $message->to('codingdriver15@gmail.com');
                  $message->subject('Reset Password Notification');
               });

        return back()->with('message', 'We have e-mailed your password reset link!');
    }
}

Step 12: Create Forget Password Migration

If you add your email in your forget password input then your send a link via mail function using the controller function so here you need to add a Forget password migration to running just below command.

php artisan make:migration create_password_resets_table

After creating a password reset table add the below code on it.

<?php 

use Illuminate\Support\Facades\Schema; 
use Illuminate\Database\Schema\Blueprint; 
use Illuminate\Database\Migrations\Migration; 

class CreatePasswordResetsTable extends Migration { 

    /**
     * Run the migrations.
     *
     * @return void
     */
    
   public function up()
    {
        Schema::create('password_resets', function (Blueprint $table) {
            $table->string('email')->index();            
            $table->string('token');
            $table->timestamp('created_at');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('password_resets');
    }
}

Now insert it on the database runs the below command.

php artisan migrate

Step 13: Forget Password View File

In your Auth folder now create a password folder and then create an email.blade.php file and then add the below code on it.

resources\views\auth\password\email.blade.php

@extends('layouts.app')

    <div class="login-form">
        <form method="POST" action="/forget-password">
            @csrf
            <div class="text-center">
                <a href="index.html" aria-label="Space">
                    <img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
                </a>
            </div>
            <div class="text-center mb-4">
                <h1 class="h3 mb-0">Recover account</h1>
                <p>Enter your email address and an email with instructions will be sent to you.</p>
            </div>

            @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
            @endif

            <div class="js-form-message mb-3">
                <div class="js-focus-state input-group form">
                <div class="input-group-prepend form__prepend">
                    <span class="input-group-text form__text">
                    <i class="fa fa-user form__text-inner"></i>
                    </span>
                </div>
                <input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}"  placeholder="Email" autocomplete="email" autofocus>
                @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                </div>
            </div>

            <div class="form-group mb-3">
                <button type="submit" class="btn btn-primary login-btn btn-block">Recover account</button>
            </div>

            <div class="text-center mb-3">
                <p class="text-muted">Have an account? <a href="{{route('register')}}">Signin</a></p>
            </div>
            <div class="or-seperator"><i>OR</i></div>

            <div class="row mx-gutters-2 mb-4">
                <div class="col-sm-6 mb-2 mb-sm-0">
                <button type="button" class="btn btn-block btn-sm btn-facebook">
                    <i class="fa fa-facebook mr-2"></i>
                    Signin with Facebook
                </button>
                </div>
                <div class="col-sm-6">
                <button type="button" class="btn btn-block btn-sm btn-twitter">
                    <i class="fa fa-twitter mr-2"></i>
                    Signin with Twitter
                </button>
                </div>
            </div>
            <p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
        </form>
    </div>

Now if you add an email to forget password option and send then its go in your email trap where you can click the link and update your password easily. First, add your email trap details in your .env file. If you have not any email trap account then please create first to go mailtrap.io. Mailtrap is a free mail testing website.

Step Note: 

Less secure app access

Your account is vulnerable because you allow apps and devices that use less secure sign-in technology to access your account. To keep your account secure, Google will automatically turn this setting OFF if it’s not being used

https://myaccount.google.com/security?pli=1#connectedapps

Step Clear: Cache

                php artisan config:cache

Step 14: Add Mailtrap Details in .env File

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=soeng@gmail.com
MAIL_PASSWORD='your password'
MAIL_ENCRYPTION=tls

Now Checkout the mail trap where you received an email. Below create a blade file to sending email in your views>auth directory this file goes in your email trap inbox.

Step 15: Create Verify Blade

resources/views/auth/verify.blade.php

<div class="container">
     <div class="row justify-content-center">
         <div class="col-md-8">
             <div class="card">
                 <div class="card-header">Verify Your Email Address</div>
                   <div class="card-body">
                    @if (session('resent'))
                         <div class="alert alert-success" role="alert">
                            {{ __('A fresh verification link has been sent to your email address.') }}
                        </div>
                    @endif
                    <a href="{{ url('/reset-password/'.$token) }}">Click Here</a>
                </div>
            </div>
        </div>
    </div>
</div>

Now click the link which is received in your inbox now you redirect a link where your update your new password check out how it works.

Step 16: Create Reset Password Routes

Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');

Step 17: Create a Reset Password Controller

After create reset password routes now you need to create a new controller ResetPasswordController in your App>Http directory.

php artisan make:controller Auth\ResetPasswordController

Now add the below code in this controller.

app\Http\Controllers\Auth\ResetPasswordController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use DB;
use App\User;
use Hash;

class ResetPasswordController extends Controller
{
    public function getPassword($token) {

       return view('auth.password.reset', ['token' => $token]);
    }

    public function updatePassword(Request $request)
    {
        $request->validate([
            'email' => 'required|email|exists:users',
            'password' => 'required|string|min:6|confirmed',
            'password_confirmation' => 'required',

        ]);

        $updatePassword = DB::table('password_resets')
                            ->where(['email' => $request->email, 'token' => $request->token])
                            ->first();

        if(!$updatePassword)
            return back()->withInput()->with('error', 'Invalid token!');

          $user = User::where('email', $request->email)
                      ->update(['password' => Hash::make($request->password)]);

          DB::table('password_resets')->where(['email'=> $request->email])->delete();

          return redirect('/login')->with('message', 'Your password has been changed!');
    }
}

Step 18: Create Reset Password Blade File

Now create to showing reset password option blade file in your views>authdirectory.

resources\views\auth\password\reset.blade.php

@extends('layouts.app')
@section('content')

<div class="container">
     <div class="row justify-content-center">
         <div class="col-md-8">
            <div class="card">
                 <div class="card-header">Reset Password</div>
                      <div class="card-body">
                          <form method="POST" action="/reset-password">
                           @csrf
                           <input type="hidden" name="token" value="{{ $token }}">
                        <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 @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </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 @error('password') is-invalid @enderror" name="password" autocomplete="new-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </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" autocomplete="new-password">
                            </div>
                        </div>

                     <div class="form-group row mb-0">
                           <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Reset Password
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

Well, you have done Laravel Custom Authentication system – Custom Login, Register, Forget Password in your Laravel app. I hope you enjoy more this tutorial. If you have any query please send a comment below. 

Introduction

Clear cache in laravel means you will have noticed sometimes when you code it does not reflect on the web browser because of Laravel is serving pages on the cache. In this tutorial, we will learn about how to clear cache and optimize the framework bootstrap files in Laravel project.

Let's get started

Clear cache in Laravel via terminal or command prompt

The following are the commands which will be used to clear the different cache files from your Laravel application. To run the command navigate to your application root directory and enter the below artisan commands.

 

# Clear Laravel application cache

To flush the Laravel application cache enter the following command.

php artisan cache:clear

# Clear route-cache

Enter the following command will remove the routes cache file.

php artisan route:clear

# Clear view cache

When you create a new blade file. Before serving Laravel automatically compiles your view file. Enter the following command to clear all compiled view cache files

php artisan view:clear

# Clear config cache

To remove all the configuration cache enter the following command

php artisan config:clear

Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

2 Comments

  1. lekelySeptember 21, 2021 at 8:30 PM

    Expected response code 250 but got code "530", with message "530 5.7.0 Must issue a STARTTLS command first. o7sm24118597wro.45 - gsmtp "

    ReplyDelete
  2. lekelySeptember 21, 2021 at 8:30 PM

    Expected response code 250 but got code "530", with message "530 5.7.0 Must issue a STARTTLS command first. o7sm24118597wro.45 - gsmtp "

    ReplyDelete

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)

close