Guía Completa para Implementar un Módulo de Cambio de Contraseña en Laravel con Validación en Tiempo Real!

Si tu jefe te pide que desarrolles un módulo en Laravel para cambiar la contraseña, aquí te dejo una guía paso a paso de cómo podrías abordar este desarrollo:

Cabe destacar que este proceso lo hice en Laravel9, pero puede funcionar perfectamente en cualquier version de Laravel:

1. Modificar el modelo de Usuario (User) para incluir las nuevas columnas:

// app\Models\User.php

protected $fillable = [
    'name', 'email', 'password', 'current_password', 'new_password',
];

2. Crear el controlador para manejar la lógica del cambio de contraseña:

php artisan make:controller ChangePasswordController

3. Definir las rutas:

<?php

// routes/web.php

use App\Http\Controllers\ChangePasswordController;

Route::get('/change-password', [ChangePasswordController::class, 'showChangePasswordForm']);
Route::post('/change-password', [ChangePasswordController::class, 'changePassword'])->name('change.password');

4. Crear los métodos del controlador:

// app/Http/Controllers/ChangePasswordController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;


class ChangePasswordController extends Controller
{
    public function showChangePasswordForm()
    {
        return view('auth.change-password');
    }

    public function changePassword(Request $request)
    {
        $request->validate([
            'current_password' => 'required',
            'new_password' => 'required|string|min:8|confirmed',
        ]);

        $user = auth()->user();

        if (!Hash::check($request->current_password, $user->password)) {
            return redirect()->back()->with('error', 'La contraseña actual no es correcta');
        }

        $user->update([
            'password' => bcrypt($request->new_password),
        ]);

        return redirect()->back()->with('success', 'Contraseña actualizada correctamente');
    }
}

5. Crear la vista para el formulario de cambio de contraseña:

<!-- resources/views/auth/change-password.blade.php -->

@extends('layouts.app')  {{-- Asume que tienes un layout principal --}}

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Cambiar Contraseña</div>

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

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

                        <form method="POST" action="{{ route('change.password') }}">
                            @method('post')
                            @csrf

                            <div class="form-group">
                                <label for="current_password">Contraseña Actual:</label>
                                <input type="password" name="current_password" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="new_password">Nueva Contraseña:</label>
                                <input type="password" name="new_password" id="new_password" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="new_password_confirmation">Confirmar Nueva Contraseña:</label>
                                <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" required>
                                <small id="passwordHelpBlock" class="form-text text-muted">
                                    <span id="passwordMatch"></span>
                                </small>
                            </div>

                            <button type="submit" class="btn btn-primary">Cambiar Contraseña</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#new_password, #new_password_confirmation').on('input', function () {
                if ($('#new_password').val() == $('#new_password_confirmation').val()) {
                    $('#passwordMatch').html('Las contraseñas coinciden').css('color', 'green');
                } else {
                    $('#passwordMatch').html('Las contraseñas no coinciden').css('color', 'red');
                }
            });
        });
    </script>
@endsection

6. ¡Listo! Ahora puedes acceder al formulario de cambio de contraseña en /change-password y manejar la lógica en el controlador.

Espero que esto te haya servido.