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 @@
@change="handleFileChange"
accept="image/*"
style="display: none;">
+
+
+
+
+ {% if p_form.non_field_errors %}
+
+ {% for error in p_form.non_field_errors %}
+
+
+ {{ error }}
+
+ {% endfor %}
+
+ {% endif %}
+
+
+ {% for field in p_form %}
+ {% if field.errors %}
+ {% for error in field.errors %}
+
+ {% endfor %}
+ {% endif %}
+ {% endfor %}
+
+
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