From 0abc4053559da471f639a8e0974cd32e4b9c9e2e Mon Sep 17 00:00:00 2001
From: madman <hrishikesh0246@gmail.com>
Date: Wed, 23 Oct 2024 21:30:16 +0530
Subject: [PATCH] added max image size

---
 cardie/authentication/forms.py               | 13 ++++-
 cardie/authentication/templates/profile.html | 30 ++++++++++
 cardie/static/main/profile.css               | 58 ++++++++++++++++++++
 3 files changed, 100 insertions(+), 1 deletion(-)

diff --git a/cardie/authentication/forms.py b/cardie/authentication/forms.py
index 24f7de7..db7f85a 100644
--- a/cardie/authentication/forms.py
+++ b/cardie/authentication/forms.py
@@ -1,6 +1,6 @@
 from django import forms
 from .models import Profile, User
-
+from django.core.exceptions import ValidationError
 
 
 class UserUpdateForm(forms.ModelForm):
@@ -17,3 +17,14 @@ class ProfileUpdateForm(forms.ModelForm):
     class Meta:
         model = Profile
         fields = ['profile_image', 'bio']
+
+    def clean_profile_image(self):
+        image = self.cleaned_data.get('profile_image', False)
+        if image:
+            if image.size > 2 * 1024 * 1024:
+                raise ValidationError(
+                    "Image size is too large! Please upload an image smaller than 2MB."
+                )
+            return image
+        else:
+            raise ValidationError("Couldn't read uploaded image")
diff --git a/cardie/authentication/templates/profile.html b/cardie/authentication/templates/profile.html
index 199619f..f60896c 100644
--- a/cardie/authentication/templates/profile.html
+++ b/cardie/authentication/templates/profile.html
@@ -154,6 +154,36 @@ <h2 class="ui_text_subheader_left">Account Actions</h2>
                 @change="handleFileChange"
                 accept="image/*"
                 style="display: none;">
+
+            <!-- New Error Display Section -->
+            <div class="error-container">
+                <!-- Form-wide errors -->
+                {% if p_form.non_field_errors %}
+                <div class="error-message" x-init="setTimeout(() => $el.remove(), 5000)">
+                    {% for error in p_form.non_field_errors %}
+                        <div class="error-item">
+                            <i class="ph-bold ph-x-circle"></i>
+                            <span>{{ error }}</span>
+                        </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+
+                <!-- Field-specific errors -->
+                {% for field in p_form %}
+                    {% if field.errors %}
+                        {% for error in field.errors %}
+                        <div class="error-message" x-init="setTimeout(() => $el.remove(), 5000)">
+                            <div class="error-item">
+                                <i class="ph-bold ph-x-circle"></i>
+                                <span>{{ error }}</span>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    {% endif %}
+                {% endfor %}
+
+            </div>
         </div>
     </div>
 </form>
diff --git a/cardie/static/main/profile.css b/cardie/static/main/profile.css
index 3375ad7..d10f09c 100644
--- a/cardie/static/main/profile.css
+++ b/cardie/static/main/profile.css
@@ -240,4 +240,62 @@ body {
         border-bottom: 1px solid var(--card-border);
         padding: 10px 0;
     }
+}
+
+.error-container {
+    margin-top: 1rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.error-message {
+    background-color: #EF4444;
+    border: 1px solid #DC2626;
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+    margin-top: 0.5rem;
+    animation: slideIn 0.3s ease-out;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.error-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: white;
+    font-size: 1rem;
+    font-weight: 500;
+}
+
+.error-item i {
+    font-size: 1.5rem;
+    color: white;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(-10px);
+        opacity: 0;
+    }
+}
+
+.error-message.hiding {
+    animation: slideOut 0.3s ease-in forwards;
 }
\ No newline at end of file