Delete Account

You can now delete the account in the profile settings
Also profile images associated with the user will be removed from the file system

+ fixed that HabitList deletion doesn't cause Habit Deletion

app.py

@@ -849,6 +849,14 @@ def save_heatmap_color():
         profile_image_url=current_user.profile_image,
         color=current_user.heatmap_color,
     )
+
+@app.route('/delete_account', methods=['POST'])
+@login_required
+def delete_account():
+    os.remove(current_user.profile_image)
+    current_user.delete()
+
+    return redirect(url_for('index'))
 ###########################################################
 
 

models/HabitList.py

@@ -34,6 +34,8 @@ class HabitList:
         if len(get_users(self.id)) > 1:
             self.remove_user(user_id)
         else:
+            for habit in self.get_habits():
+                habit.delete()
             delete_habitList(self.id)
 
 

static/css/heatmap.css

@@ -1,73 +1,73 @@
-    #heatmap {
+#heatmap {
-        display: grid;
+    display: grid;
-        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
+    grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
-        gap: 5px;
+    gap: 5px;
-        width: 100%;
+    width: 100%;
-        table-layout: fixed;
+    table-layout: fixed;
-    }
+}
 
+.day {
+    width: 50px;
+    height: 50px;
+    border: 1px solid #ccc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    table-layout: fixed;
+}
+
+@media (max-width: 1400px) {
+    .day {
+        width: 40px;
+        height: 40px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .day {
+        width: 35px;
+        height: 35px;
+    }
+}
+
+@media (max-width: 992px) {
+    .day {
+        width: 30px;
+        height: 30px;
+    }
+}
+
+@media (max-width: 767px) {
     .day {
         width: 50px;
         height: 50px;
-        border: 1px solid #ccc;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        table-layout: fixed;
     }
+}
 
-    @media (max-width: 1400px) {
+@media (max-width: 450px) {
-        .day {
+    .day {
-            width: 40px;
+        width: 40px;
-            height: 40px;
+        height: 40px;
-        }
     }
+}
 
-    @media (max-width: 1200px) {
+@media (max-width: 400px) {
-        .day {
+    .day {
-            width: 35px;
+        width: 35px;
-            height: 35px;
+        height: 35px;
-        }
     }
+}
 
-    @media (max-width: 992px) {
+@media (max-width: 350px) {
-        .day {
+    .day {
-            width: 30px;
+        width: 30px;
-            height: 30px;
+        height: 30px;
-        }
     }
+}
 
-    @media (max-width: 767px) {
+@media (max-width: 300px) {
-        .day {
+    .day {
-            width: 50px;
+        width: 25px;
-            height: 50px;
+        height: 25px;
-        }
-    }
-
-    @media (max-width: 450px) {
-        .day {
-            width: 40px;
-            height: 40px;
-        }
-    }
-
-    @media (max-width: 400px) {
-        .day {
-            width: 35px;
-            height: 35px;
-        }
-    }
-
-    @media (max-width: 350px) {
-        .day {
-            width: 30px;
-            height: 30px;
-        }
-    }
-
-    @media (max-width: 300px) {
-        .day {
-            width: 25px;
-            height: 25px;
-        }
     }
+}

static/script/script-index.js

@@ -21,7 +21,7 @@ function createHeatmap(data, day) {
             dayElement.classList.add('day');
             dayElement.style.backgroundColor = `rgba(${color}, ${opacity})`;
             if (day === i * 7 + j){
-                dayElement.style.borderColor = `rgba(255, 0, 0)`;
+                dayElement.style.borderColor = `rgba(0, 0, 0)`;
                 dayElement.style.borderWidth = "2px";
             }
             heatmapContainer.appendChild(dayElement);

static/script/script-profile.js

@@ -14,6 +14,11 @@ document.addEventListener("DOMContentLoaded", function() {
 
     const submitPasswordChangeButton = document.getElementById("submitPasswordChange");
 
+    const DeleteAccountButton = document.getElementById('deleteAccountButton')
+    const confirmDeleteModal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
+    const ConfirmDeleteButton = document.getElementById('confirmDeleteButton')
+    const deleteAccountForm = document.getElementById('deleteAccountForm')
+
     // Open file input when profile image is clicked
     profileImageOverlay.addEventListener("click", function() {
         profileImageInput.click();
@@ -37,9 +42,6 @@ document.addEventListener("DOMContentLoaded", function() {
     // Add event listener to edit button to open modal
     editButton.addEventListener("click", function() {
         editModal.show();
-        // document.getElementById("newName").value = "{{ name }}";
-        // document.getElementById("newEmail").value = "{{ email }}";
-        // document.getElementById("password").value = "";
     });
 
     // Add event listener to save changes button to submit form
@@ -182,4 +184,14 @@ document.addEventListener("DOMContentLoaded", function() {
         return isValid;
     }
 
+
+    // Add event listener to edit button to open modal
+    DeleteAccountButton.addEventListener("click", function() {
+        confirmDeleteModal.show();
+    });
+
+    //Submit delete account form
+    ConfirmDeleteButton.addEventListener('click', function () {
+        deleteAccountForm.submit();
+    });
 });

templates/profile.html

@@ -43,7 +43,7 @@
         </div>
     </div>
 
-  <!-- Password change fields -->
+    <!-- Password change fields -->
     <div class="card bg-light mb-4">
         <div class="card-body">
             <h5 class="card-title">Passwort ändern</h5>
@@ -63,8 +63,40 @@
                     <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" autocomplete="new-password">
                     <div class="invalid-feedback" id="confirmPasswordFeedback"></div>
                 </div>
+                <button type="button" class="btn btn-primary" id="submitPasswordChange">Änderungen speichern</button>
             </form>
-            <button type="button" class="btn btn-primary" id="submitPasswordChange">Änderungen speichern</button>
+            <div style="margin-top: 30px;">
+                <h5 class="card-title">Konto löschen</h5>
+                <form id="deleteAccountForm" action="/delete_account" method="POST">
+                    <button type="button" class="btn btn-danger" id="deleteAccountButton" data-toggle="modal" data-target="#confirmDeleteModal">
+                        Konto dauerhaft löschen
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- Delete Account Confirmation Modal -->
+<div class="modal fade" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog  mt-20" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="confirmDeleteModalLabel">Konto löschen</h5>
+                <span class="close-icon" data-bs-dismiss="modal" aria-label="Close">
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 72 72" class="close-icon">
+                        <path d="M 19 15 C 17.977 15 16.951875 15.390875 16.171875 16.171875 C 14.609875 17.733875 14.609875 20.266125 16.171875 21.828125 L 30.34375 36 L 16.171875 50.171875 C 14.609875 51.733875 14.609875 54.266125 16.171875 55.828125 C 16.951875 56.608125 17.977 57 19 57 C 20.023 57 21.048125 56.609125 21.828125 55.828125 L 36 41.65625 L 50.171875 55.828125 C 51.731875 57.390125 54.267125 57.390125 55.828125 55.828125 C 57.391125 54.265125 57.391125 51.734875 55.828125 50.171875 L 41.65625 36 L 55.828125 21.828125 C 57.390125 20.266125 57.390125 17.733875 55.828125 16.171875 C 54.268125 14.610875 51.731875 14.609875 50.171875 16.171875 L 36 30.34375 L 21.828125 16.171875 C 21.048125 15.391875 20.023 15 19 15 z" stroke="none"></path>
+                    </svg>
+                </span>
+            </div>
+            <div class="modal-body">
+                Sind Sie sicher, dass Sie Ihr Konto dauerhaft löschen möchten?
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                <button type="submit" class="btn btn-danger" id="confirmDeleteButton">Löschen</button>
+            </div>
         </div>
     </div>
 </div>
@@ -72,7 +104,7 @@
 
 <!-- Edit Modal -->
 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog mt-20" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="editModalLabel">Bearbeiten</h5>