Profile Page

app/Http/Controllers/ProfileController.php

@@ -7,10 +7,19 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
+use Illuminate\Support\Facades\Storage;
 use Illuminate\View\View;
 
 class ProfileController extends Controller
 {
+
+    public function index(Request $rrquest) {
+        return "Permission denied";
+    }
+    public function show(Request $request)
+    {
+        return view('profile.show', ['user' => $request->user()]);
+    }
     /**
      * Display the user's profile form.
      */
@@ -34,18 +43,41 @@ public function update(ProfileUpdateRequest $request): RedirectResponse
 
         $request->user()->save();
 
-        return Redirect::route('profile.edit')->with('status', 'profile-updated');
+        return Redirect::route('profile.show', ['profile' => $request->user()->id])->with('status', 'profile-updated');
     }
 
+    public function updateImage(Request $request)
+    {
+        $user = $request->user();
+
+        // Validate the image
+        $request->validate([
+            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
+        ]);
+
+        // Handle image upload
+        if ($request->hasFile('image')) {
+            // Delete the old image if it exists
+            if ($user->image) {
+                Storage::delete('public/' . $user->image);
+            }
+
+            // Store the new image
+            $user->image = $request->file('image')->store('images', 'public');
+            $user->save();
+        }
+
+        // Return the profile.show view with updated user data
+        return redirect()->route('profile.show', ['profile' => $user->id])
+                        ->with('success', 'Profile image updated successfully!');
+    }
+
+
     /**
      * Delete the user's account.
      */
     public function destroy(Request $request): RedirectResponse
     {
-        $request->validateWithBag('userDeletion', [
-            'password' => ['required', 'current_password'],
-        ]);
-
         $user = $request->user();
 
         Auth::logout();

app/Http/Requests/ProfileUpdateRequest.php

@@ -18,6 +18,7 @@ public function rules(): array
         return [
             'name' => ['required', 'string', 'max:255'],
             'email' => ['required', 'string', 'lowercase', 'email', 'max:255', Rule::unique(User::class)->ignore($this->user()->id)],
+            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
         ];
     }
 }

app/Models/User.php

@@ -17,7 +17,7 @@ class User extends Authenticatable
      * @var array
      */
     protected $fillable = [
-        'name', 'email', 'password',
+        'name', 'email', 'password', 'image',
     ];
 
     /**

database/migrations/2024_12_29_132449_add_image_to_users_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddImageToUsersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->string('image')->nullable()->after('email');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('image');
+        });
+    }
+}

public/assets/css/custom.css

@@ -27,3 +27,9 @@
 }
 
 /* Accounts */
+
+/* Profile */
+#profileImage:hover {
+    transition: 0.3s ease-in-out;
+    opacity: 0.5;
+}

public/assets/js/custom.js

@@ -898,4 +898,17 @@ function filterDestinationOptions(sourceDropdown, destDropdown) {
         destDropdown.selectedIndex = 0;
     }
 }
-/* Transaction To and From Dropdown */
+/* Transaction To and From Dropdown */
+
+/* Profile */
+function toggleEditMode() {
+    document.getElementById('profile-edit-btn').classList.toggle('d-none');
+    document.getElementById('profile-cancel-btn').classList.toggle('d-none');
+    document.getElementById('profile-save-btn').classList.toggle('d-none');
+
+    ['name', 'email'].forEach((field) => {
+        document.getElementById(`${field}-view`).classList.toggle('d-none');
+        document.getElementById(`${field}-input`).classList.toggle('d-none');
+    });
+}
+

resources/views/layouts/navigation.blade.php

@@ -48,11 +48,15 @@ class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-
                             @if (Auth::check())
                             <div class="dropdown">
                                 <a class="nav-link dropdown-toggle show border rounded-pill px-4" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    {{-- I want to show user icon here in i tag --}}
                                     <i class="fas fa-user pe-1"></i>
                                     {{ Auth::user()->name }}
                                 </a>
-                                <ul class="dropdown-menu">
+                                <ul class="dropdown-menu pb-0">
+                                    <li>
+                                        <a href="{{route('profile.show', ['profile' => Auth::user()->id])}}" class="nav-link dropdown-item">
+                                            Profile
+                                        </a>
+                                    </li>
                                     <li>
                                         <form method="POST" action="{{ route('logout') }}">
                                             @csrf

resources/views/profile/partials/delete-toast.blade.php

@@ -0,0 +1,11 @@
+{{-- Deletion Toast --}}
+<div id="profileDeleteToast"
+class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3"
+role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
+<div class="d-flex">
+    <div id="profileDeleteToastBody" class="toast-body">
+        Account deletion in progress... <span id="delete-countdown">5</span>
+    </div>
+    <a class="btn btn-link pe-3 my-1 ps-0  text-white ms-auto" onclick="cancelDeletion()">Undo</a>
+</div>
+</div>

resources/views/profile/partials/update-password-form.blade.php

@@ -1,48 +1,34 @@
-<section>
-    <header>
-        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-            {{ __('Update Password') }}
-        </h2>
+<form method="post" id="updatePasswordForm" action="{{ route('password.update') }}">
+    @csrf
+    @method('put')
 
-        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-            {{ __('Ensure your account is using a long, random password to stay secure.') }}
-        </p>
-    </header>
+    <div class="mb-3">
+        <label for="update_password_current_password" class="form-label">{{ __('Current Password') }}</label>
+        <input type="password" id="update_password_current_password" name="current_password" class="form-control mt-1"
+            autocomplete="current-password" required>
+        @error('current_password')
+            <div class="text-danger mt-2">{{ $message }}</div>
+        @enderror
+    </div>
 
-    <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
-        @csrf
-        @method('put')
+    <div class="mb-3">
+        <label for="update_password_password" class="form-label">{{ __('New Password') }}</label>
+        <input type="password" id="update_password_password" name="password" class="form-control mt-1"
+            autocomplete="new-password" required>
+        @error('password')
+            <div class="text-danger mt-2">{{ $message }}</div>
+        @enderror
+    </div>
 
-        <div>
-            <x-input-label for="update_password_current_password" :value="__('Current Password')" />
-            <x-text-input id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
-            <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
-        </div>
+    <div class="mb-3">
+        <label for="update_password_password_confirmation" class="form-label">{{ __('Confirm Password') }}</label>
+        <input type="password" id="update_password_password_confirmation" name="password_confirmation"
+            class="form-control mt-1" autocomplete="new-password" required>
+        @error('password_confirmation')
+            <div class="text-danger mt-2">{{ $message }}</div>
+        @enderror
+    </div>
 
-        <div>
-            <x-input-label for="update_password_password" :value="__('New Password')" />
-            <x-text-input id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
-        </div>
-
-        <div>
-            <x-input-label for="update_password_password_confirmation" :value="__('Confirm Password')" />
-            <x-text-input id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
-            <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
-        </div>
-
-        <div class="flex items-center gap-4">
-            <x-primary-button>{{ __('Save') }}</x-primary-button>
-
-            @if (session('status') === 'password-updated')
-                <p
-                    x-data="{ show: true }"
-                    x-show="show"
-                    x-transition
-                    x-init="setTimeout(() => show = false, 2000)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
-                >{{ __('Saved.') }}</p>
-            @endif
-        </div>
-    </form>
-</section>
+    <button type="submit" class="btn btn-primary w-100">{{ __('Save') }}</button>
+</form>
+</div>

resources/views/profile/partials/update-password-modal.blade.php

@@ -0,0 +1,16 @@
+<div class="modal fade" id="ProfileUpdatePasswordModal" tabindex="-1" role="dialog" aria-labelledby="updatePasswordModalTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header px-5">
+                <h6 class="modal-title" id="ProfileUpdatePasswordTitle">Update Password</h6>
+                <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">×</span>
+                </button>
+            </div>
+            <div class="modal-body px-5">
+                @include("profile.partials.update-password-form")
+            </div>
+        </div>
+    </div>
+</div>