Change Password Laravel User
### 1. Create a Form for Password Change
Create a view for the user to enter their current password, new password, and password confirmation. Since you're using **Inertia.js with Vue**, the form can be created as a Vue component.
#### Example Vue Component (`ChangePassword.vue`)
<template>
<div>
<h1>Change Password</h1>
<form @submit.prevent="changePassword">
<div>
<label for="current_password">Current Password</label>
<input type="password" v-model="form.current_password" id="current_password" />
</div>
<div>
<label for="new_password">New Password</label>
<input type="password" v-model="form.new_password" id="new_password" />
</div>
<div>
<label for="new_password_confirmation">Confirm New Password</label>
<input type="password" v-model="form.new_password_confirmation" id="new_password_confirmation" />
</div>
<button type="submit">Change Password</button>
</form>
<div v-if="error" class="error">{{ error }}</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
current_password: '',
new_password: '',
new_password_confirmation: '',
},
error: null,
};
},
methods: {
async changePassword() {
try {
await this.$inertia.post('/change-password', this.form);
this.form.current_password = '';
this.form.new_password = '';
this.form.new_password_confirmation = '';
alert('Password changed successfully!');
} catch (error) {
this.error = 'Failed to change password. Please try again.';
}
},
},
};
</script>### 2. Create a Route for Password Update
In `routes/web.php`, define a route that points to a controller method that handles the password update.
use AppHttpControllersUserController;
Route::post('/change-password', [UserController::class, 'changePassword'])->middleware('auth');### 3. Create the `changePassword` Method in the Controller
Create or modify a controller to handle the password change logic. In this example, I'm assuming you have a `UserController`.
#### Example `UserController.php`
namespace AppHttpControllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesHash;
use IlluminateSupportFacadesAuth;
class UserController extends Controller
{
public function changePassword(Request $request)
{
$request->validate([
'current_password' => ['required', 'string'],
'new_password' => ['required', 'string', 'min:8', 'confirmed'],
]);
$user = Auth::user();
// Check if the current password matches
if (!Hash::check($request->current_password, $user->password)) {
return back()->withErrors(['current_password' => 'Current password is incorrect']);
}
// Update the password
$user->password = Hash::make($request->new_password);
$user->save();
return response()->json(['success' => 'Password changed successfully']);
}
}### 4. Add Frontend Validation (Optional)
You can add frontend validation in the Vue component for a better user experience before submitting the form.
### 5. Test the Functionality
Make sure to test the functionality by attempting to change the password of a logged-in user with valid and invalid inputs.
This will allow users to change their passwords securely in your Laravel application using Inertia.js with Vue.