jolie beau

controllers/UserCtrl.php

@@ -243,6 +243,10 @@ class UserCtrl  extends MotherCtrl {
 											}
 										}
 									}
+									if ($_POST['delete_image'] === '1') {
+									    $objUser->setImage('images.jpg');
+									}
+
 												
 									if (count($arrError) == 0 && isset($strImageName)) {
 										$strDest    = $_ENV['IMG_USER_PATH'] . $strImageName;

views/_partial/delphoto.tpl

@@ -0,0 +1,31 @@
+<script>
+    const defaultAvatar = "{$smarty.env.IMG_USER_PATH}images.jpg";
+
+    // Suppression du listener précédent avant d'en ajouter un nouveau
+    const inputImage   = document.getElementById('image');
+    const btnDelete    = document.getElementById('btn-delete-image');
+    const previewAvatar = document.getElementById('preview-avatar');
+    const deleteInput  = document.getElementById('delete_image');
+
+    inputImage?.addEventListener('change', function () {
+        const file = this.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = e => {
+            previewAvatar.src = e.target.result;
+            previewAvatar.style.opacity = '1';
+        };
+        reader.readAsDataURL(file);
+        deleteInput.value = '0';
+        if (btnDelete) {
+            btnDelete.disabled = false;
+        }
+    });
+
+    btnDelete?.addEventListener('click', function () {
+        deleteInput.value = '1';
+        previewAvatar.src = defaultAvatar;
+        previewAvatar.style.opacity = '0.5';
+        this.disabled = true;
+    });
+</script>

views/useredit.tpl

@@ -72,21 +72,40 @@
                         </div>
                     </div>
                     <div class="col-12">
-                        <label class="form-label" for="image">
-                            Photo de profil
+                    <label class="form-label" for="image">Photo de profil</label>
+
+                    <div class="d-flex align-items-center gap-4 mb-3">
+                        <!-- Avatar preview -->
+                        <img
+                            id="preview-avatar"
+                            src="{if $objUser->getImage()}{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}{else}assests/img/images.jpg{/if}"
+                            alt="Photo de profil"
+                            class="rounded-circle border"
+                            style="width:80px; height:80px; object-fit:cover;"
+                        >
+                            
+                        <!-- Actions à droite de l'avatar -->
+                        <div class="d-flex flex-column gap-2">
+                            <label for="image" class="btn btn-outline-secondary btn-sm mb-0">
+                                <i class="fa-solid fa-upload me-1"></i> Changer la photo
                             </label>
-                        {if $objUser->getImage()}
-                            <div class="mb-2">
-                                <img src="{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}" alt="image actuel" class="rounded-circle" width="80" height="80">
-                            </div>
+                            {if $objUser->getImage() != "images.jpg"}
+                                <button type="button" class="btn btn-outline-danger btn-sm" id="btn-delete-image">
+                                    <i class="fa-solid fa-trash me-1"></i> Supprimer la photo
+                                </button>
                             {/if}
+                        </div>
+                    </div>
+                        
+                    <!-- Input file caché, déclenché par le label -->
                     <input
-                            class="form-control"
+                        class="d-none"
                         type="file"
                         id="image"
                         name="image"
                         accept="image/jpeg, image/png, image/webp"
                     >
+                    <input type="hidden" name="delete_image" id="delete_image" value="0">
                     <div class="form-text">Formats acceptés : JPG, PNG, WEBP. Laisser vide pour ne pas changer.</div>
                 </div>
                     <div class="col-12">
@@ -187,6 +206,6 @@
     </div>
 </div>
 </main>
-
+{include file="views/_partial/delphoto.tpl"}
 {include file="views/_partial/apigeo.tpl"}
 {/block}