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,23 +72,42 @@
                         </div>
                     </div>
                     <div class="col-12">
-                        <label class="form-label" for="image">
+                    <label class="form-label" for="image">Photo de profil</label>
-                            Photo de profil
+
-                        </label>
+                    <div class="d-flex align-items-center gap-4 mb-3">
-                        {if $objUser->getImage()}
+                        <!-- Avatar preview -->
-                            <div class="mb-2">
+                        <img
-                                <img src="{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}" alt="image actuel" class="rounded-circle" width="80" height="80">
+                            id="preview-avatar"
-                            </div>
+                            src="{if $objUser->getImage()}{$smarty.env.IMG_USER_PATH}{$objUser->getImage()}{else}assests/img/images.jpg{/if}"
-                        {/if}
+                            alt="Photo de profil"
-                        <input
+                            class="rounded-circle border"
-                            class="form-control"
+                            style="width:80px; height:80px; object-fit:cover;"
-                            type="file"
-                            id="image"
-                            name="image"
-                            accept="image/jpeg, image/png, image/webp"
                         >
-                        <div class="form-text">Formats acceptés : JPG, PNG, WEBP. Laisser vide pour ne pas changer.</div>
+                            
+                        <!-- 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() != "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="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">
                         <label class="form-label" for="user_mail">
                                                 Adresse e-mail 
@@ -187,6 +206,6 @@
     </div>
 </div>
 </main>
-
+{include file="views/_partial/delphoto.tpl"}
 {include file="views/_partial/apigeo.tpl"}
 {/block}