profile form

admin_frontend/templates/admin_frontend/base.html

@@ -27,6 +27,7 @@
           <div class="flex items-center gap-3">
             {% if request.user.is_authenticated %}
               <span class="text-sm text-gray-600">{{ request.user.username }}</span>
+              <a class="text-sm text-blue-600 hover:text-blue-700" href="{% url 'orgs_admin:my_profile' %}">{% trans "My Profile" %}</a>
               <form method="post" action="{% url 'admin_frontend:logout' %}">
                 {% csrf_token %}
                 <button class="text-sm text-red-600 hover:text-red-700">Logout</button>
@@ -58,7 +59,7 @@
         <div id="toasts" class="fixed bottom-4 right-4 z-50 space-y-2">
           {% for message in messages %}
             <div class="toast px-4 py-3 rounded border shadow {{ message.tags|default:'' }}">
-              {% trans message %}
+              {{ message }}
             </div>
           {% endfor %}
         </div>

orgs/forms.py

@@ -1,7 +1,13 @@
 from __future__ import annotations
 
 from django import forms
-from .models import Organization
+from django.contrib.auth import get_user_model
+from django.core.exceptions import ValidationError
+from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Layout, Field
+
+from .models import Organization, UserProfile
+from api.models import Profile as ApiProfile
 
 
 class OrganizationForm(forms.ModelForm):
@@ -11,3 +17,110 @@ class OrganizationForm(forms.ModelForm):
 
 
 ## ProvidedService moved to recycle_core app; form now lives in recycle_core.forms
+
+
+class UserSelfForm(forms.ModelForm):
+    class Meta:
+        model = get_user_model()
+        fields = ["first_name", "last_name", "email"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("first_name"),
+            Field("last_name"),
+            Field("email"),
+        )
+
+
+class ProfileSelfForm(forms.ModelForm):
+    tags = forms.CharField(label="Tags", required=False, help_text="Comma-separated")
+
+    class Meta:
+        model = ApiProfile
+        fields = ["bio", "interests", "industry"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("bio"),
+            Field("interests"),
+            Field("industry"),
+            Field("tags"),
+        )
+        if self.instance and getattr(self.instance, "pk", None):
+            try:
+                names = list(self.instance.tags.names())
+                self.fields["tags"].initial = ", ".join(names)
+            except Exception:
+                self.fields["tags"].initial = ""
+
+    def save(self, commit: bool = True):
+        profile = super().save(commit)
+        tags = [t.strip() for t in self.cleaned_data.get("tags", "").split(",") if t.strip()]
+        try:
+            if commit and hasattr(profile, "tags"):
+                profile.tags.set(tags)
+        except Exception:
+            pass
+        return profile
+
+
+class UserProfilePhotoForm(forms.ModelForm):
+    remove_photo = forms.BooleanField(label="Remove current photo", required=False)
+
+    class Meta:
+        model = UserProfile
+        fields = ["my_photo", "remove_photo"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        # Friendlier widget: accept images only, keep input visually hidden (we trigger via button)
+        self.fields["my_photo"].widget = forms.ClearableFileInput(attrs={
+            "accept": "image/*",
+            "class": "hidden",
+            "id": "id_my_photo",
+        })
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("my_photo"),
+            Field("remove_photo"),
+        )
+
+    def clean_my_photo(self):
+        f = self.cleaned_data.get("my_photo")
+        if not f:
+            return f
+        # Basic size/type validation (max ~5MB)
+        try:
+            content_type = getattr(f, "content_type", "")
+            if content_type and not content_type.startswith("image/"):
+                raise ValidationError("Please upload an image file.")
+        except Exception:
+            # If storage/file doesn't provide content_type, best-effort skip
+            pass
+        max_bytes = 5 * 1024 * 1024
+        if getattr(f, "size", 0) and f.size > max_bytes:
+            raise ValidationError("Image too large (max 5MB).")
+        return f
+
+    def save(self, commit: bool = True):
+        instance: UserProfile = super().save(commit=False)
+        remove = self.cleaned_data.get("remove_photo", False)
+        new_file = self.cleaned_data.get("my_photo")
+        if remove and not new_file:
+            # Clear current photo
+            try:
+                if instance.my_photo:
+                    instance.my_photo.delete(save=False)
+            except Exception:
+                pass
+            instance.my_photo = None
+        if commit:
+            instance.save()
+        return instance

orgs/migrations/0007_userprofile_my_photo.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.24 on 2025-09-29 05:15
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('orgs', '0006_delete_providedservice'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='my_photo',
+            field=models.ImageField(blank=True, null=True, upload_to='user_photos/'),
+        ),
+    ]

orgs/models.py

@@ -69,6 +69,7 @@ class UserProfile(TimestampedModel):
     user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="recycle_profile")
     organization = models.ForeignKey(Organization, on_delete=models.CASCADE, related_name="users")
     role = models.CharField(max_length=16, choices=ROLE_CHOICES, default=ROLE_MANAGER)
+    my_photo = models.ImageField(upload_to="user_photos/", blank=True, null=True)
 
     def __str__(self) -> str:
         return f"{self.user.username} ({self.role})"

orgs/templates/orgs/my_profile.html

@@ -0,0 +1,82 @@
+{% extends 'admin_frontend/base.html' %}
+{% load crispy_forms_tags %}
+{% block title %}My Profile{% endblock %}
+{% block content %}
+<div class="flex items-center justify-between mb-4">
+  <h1 class="text-xl font-semibold">My Profile</h1>
+  <a href="/webadmin/" class="btn-outline">Back</a>
+  <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
+</div>
+
+<form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4">
+  {% csrf_token %}
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+    <div class="md:col-span-2">
+      <h2 class="text-base font-semibold mb-2">Account</h2>
+      {{ form_user|crispy }}
+    </div>
+    {% if has_profile %}
+    <div class="md:col-span-2">
+      <h2 class="text-base font-semibold mb-2">Profile Photo</h2>
+      <div class="flex items-start gap-4">
+        <div>
+          <img id="my-photo-preview" src="{% if request.user.recycle_profile.my_photo %}{{ request.user.recycle_profile.my_photo.url }}{% else %}#{% endif %}" alt="Current photo" class="w-24 h-24 rounded object-cover border {% if not request.user.recycle_profile.my_photo %}hidden{% endif %}" />
+          {% if not request.user.recycle_profile.my_photo %}
+            <div id="my-photo-placeholder" class="w-24 h-24 rounded bg-gray-100 flex items-center justify-center text-gray-400 border">No photo</div>
+          {% endif %}
+        </div>
+        <div class="flex-1">
+          {{ form_photo.my_photo }}
+          <div class="flex items-center gap-3">
+            <button type="button" id="btn-pick-photo" class="btn-outline">Change photo</button>
+            {% if form_photo.remove_photo %}
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                {{ form_photo.remove_photo }} Remove current photo
+              </label>
+            {% endif %}
+          </div>
+          <p class="text-xs text-gray-500 mt-1">JPG/PNG, up to 5MB.</p>
+          <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+  </div>
+  <div class="mt-4">
+    <button class="btn-primary" type="submit">Save Changes</button>
+    <style>.btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}</style>
+  </div>
+</form>
+<script>
+  (function(){
+    const input = document.getElementById('id_my_photo');
+    const btn = document.getElementById('btn-pick-photo');
+    const preview = document.getElementById('my-photo-preview');
+    const placeholder = document.getElementById('my-photo-placeholder');
+    const removeCb = document.getElementById('id_remove_photo');
+    if (btn && input) {
+      btn.addEventListener('click', function(){ input.click(); });
+    }
+    if (input) {
+      input.addEventListener('change', function(){
+        if (input.files && input.files[0]) {
+          const file = input.files[0];
+          const url = URL.createObjectURL(file);
+          if (preview) { preview.src = url; preview.classList.remove('hidden'); }
+          if (placeholder) { placeholder.classList.add('hidden'); }
+          if (removeCb) { removeCb.checked = false; }
+        }
+      });
+    }
+    if (removeCb) {
+      removeCb.addEventListener('change', function(){
+        if (removeCb.checked) {
+          if (preview) { preview.classList.add('hidden'); }
+          if (placeholder) { placeholder.classList.remove('hidden'); }
+          if (input) { input.value = ''; }
+        }
+      });
+    }
+  })();
+</script>
+{% endblock %}

orgs/urls_admin.py

@@ -9,4 +9,5 @@ urlpatterns = [
     path("permissions/", views.permissions_overview, name="permissions_overview"),
     path("permissions/<int:pk>/", views.permissions_edit_group, name="permissions_edit_group"),
     path("permissions/<int:pk>/users/", views.permissions_group_users, name="permissions_group_users"),
+    path("me/", views.my_profile, name="my_profile"),
 ]

orgs/views_admin.py

@@ -10,7 +10,7 @@ from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage
 from django.db import models
 
 from .models import Organization, OrganizationSite, UserProfile
-from .forms import OrganizationForm
+from .forms import OrganizationForm, UserSelfForm, UserProfilePhotoForm
 
 from admin_frontend.templatetags.public_urls import public_route
 from cms.views import breadcrumbs
@@ -222,3 +222,39 @@ def permissions_group_users(request, pk: int):
         "orgs/permissions_group_users.html",
         {"group": group, "users": page_obj.object_list, "page_obj": page_obj, "q": q, "role": role, "role_choices": role_choices},
     )
+
+
+# ---------------------------------------------------------------------------
+# Self profile editing (current authenticated user)
+
+
+@breadcrumbs(label="My Profile", name="my_profile")
+def my_profile(request):
+    if not request.user.is_authenticated:
+        messages.error(request, "Please sign in to manage your profile.")
+        return redirect("admin_frontend:login")
+
+    user = request.user
+    user_profile = getattr(user, "recycle_profile", None)
+
+    if request.method == "POST":
+        form_user = UserSelfForm(request.POST, instance=user)
+        form_photo = UserProfilePhotoForm(request.POST, request.FILES, instance=user_profile) if user_profile else None
+        ok_user = form_user.is_valid()
+        ok_photo = True if form_photo is None else form_photo.is_valid()
+        if ok_user and ok_photo:
+            form_user.save()
+            if form_photo is not None:
+                form_photo.save()
+            messages.success(request, "Profile updated.")
+            return redirect(reverse("orgs_admin:my_profile"))
+        messages.error(request, "Please correct the errors below.")
+    else:
+        form_user = UserSelfForm(instance=user)
+        form_photo = UserProfilePhotoForm(instance=user_profile) if user_profile else None
+
+    return render(
+        request,
+        "orgs/my_profile.html",
+        {"form_user": form_user, "form_photo": form_photo, "has_profile": bool(user_profile)},
+    )

public_frontend/forms.py

@@ -1,6 +1,12 @@
 from __future__ import annotations
 
 from django import forms
+from django.contrib.auth import get_user_model
+from django.core.exceptions import ValidationError
+from crispy_forms.helper import FormHelper
+from crispy_forms.layout import Layout, Field
+from django.contrib.auth import get_user_model
+from orgs.models import UserProfile
 
 
 class MultiFileInput(forms.ClearableFileInput):
@@ -41,3 +47,140 @@ class ContactForm(forms.Form):
     phone = forms.CharField(max_length=64, required=False)
     subject = forms.CharField(max_length=255, required=False)
     message = forms.CharField(widget=forms.Textarea)
+
+
+class RegistrationForm(forms.Form):
+    username = forms.CharField(max_length=150)
+    email = forms.EmailField()
+    password1 = forms.CharField(widget=forms.PasswordInput)
+    password2 = forms.CharField(widget=forms.PasswordInput)
+    role = forms.ChoiceField(choices=[(k, v) for k, v in UserProfile.ROLE_CHOICES if k != UserProfile.ROLE_OWNER])
+
+    def clean_username(self):
+        username = self.cleaned_data["username"].strip()
+        User = get_user_model()
+        if User.objects.filter(username__iexact=username).exists():
+            raise forms.ValidationError("Username already taken.")
+        return username
+
+    def clean_email(self):
+        email = self.cleaned_data["email"].strip()
+        User = get_user_model()
+        if User.objects.filter(email__iexact=email).exists():
+            raise forms.ValidationError("Email already registered.")
+        return email
+
+    def clean(self):
+        data = super().clean()
+        p1 = data.get("password1")
+        p2 = data.get("password2")
+        if p1 and p2 and p1 != p2:
+            self.add_error("password2", "Passwords do not match.")
+        return data
+
+
+class PublicUserForm(forms.ModelForm):
+    class Meta:
+        model = get_user_model()
+        fields = ["first_name", "last_name", "email"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("first_name"),
+            Field("last_name"),
+            Field("email"),
+        )
+
+
+from api.models import Profile as ApiProfile
+from orgs.models import UserProfile
+
+
+class PublicProfileForm(forms.ModelForm):
+    tags = forms.CharField(label="Tags", required=False, help_text="Comma-separated")
+
+    class Meta:
+        model = ApiProfile
+        fields = ["bio", "interests", "industry"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("bio"),
+            Field("interests"),
+            Field("industry"),
+            Field("tags"),
+        )
+        if self.instance and getattr(self.instance, "pk", None):
+            try:
+                names = list(self.instance.tags.names())
+                self.fields["tags"].initial = ", ".join(names)
+            except Exception:
+                self.fields["tags"].initial = ""
+
+    def save(self, commit: bool = True):
+        profile = super().save(commit)
+        tags = [t.strip() for t in self.cleaned_data.get("tags", "").split(",") if t.strip()]
+        try:
+            if commit and hasattr(profile, "tags"):
+                profile.tags.set(tags)
+        except Exception:
+            pass
+        return profile
+
+
+class PublicUserPhotoForm(forms.ModelForm):
+    remove_photo = forms.BooleanField(label="Remove current photo", required=False)
+
+    class Meta:
+        model = UserProfile
+        fields = ["my_photo", "remove_photo"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["my_photo"].widget = forms.ClearableFileInput(attrs={
+            "accept": "image/*",
+            "class": "hidden",
+            "id": "id_my_photo",
+        })
+        self.helper = FormHelper()
+        self.helper.form_tag = False
+        self.helper.layout = Layout(
+            Field("my_photo"),
+            Field("remove_photo"),
+        )
+
+    def clean_my_photo(self):
+        f = self.cleaned_data.get("my_photo")
+        if not f:
+            return f
+        try:
+            content_type = getattr(f, "content_type", "")
+            if content_type and not content_type.startswith("image/"):
+                raise ValidationError("Please upload an image file.")
+        except Exception:
+            pass
+        max_bytes = 5 * 1024 * 1024
+        if getattr(f, "size", 0) and f.size > max_bytes:
+            raise ValidationError("Image too large (max 5MB).")
+        return f
+
+    def save(self, commit: bool = True):
+        instance: UserProfile = super().save(commit=False)
+        remove = self.cleaned_data.get("remove_photo", False)
+        new_file = self.cleaned_data.get("my_photo")
+        if remove and not new_file:
+            try:
+                if instance.my_photo:
+                    instance.my_photo.delete(save=False)
+            except Exception:
+                pass
+            instance.my_photo = None
+        if commit:
+            instance.save()
+        return instance

public_frontend/templates/public_frontend/base.html

@@ -20,19 +20,29 @@
         <a href="/#blog" class="hover:text-black/70">{% trans "Blog" %}</a>
         <a href="/#contact" class="hover:text-black/70">{% trans "Contact" %}</a>
       </nav>
-      <form method="post" action="{% url 'set_language' %}" class="hidden md:block ml-4">
-        {% csrf_token %}
-        <input type="hidden" name="next" value="{{ request.get_full_path }}" />
-        {% get_available_languages as langs %}
-        {% get_language_info_list for langs as languages %}
-        <label for="lang" class="sr-only">Language</label>
-        <select id="lang" name="language" class="text-sm border border-gray-300 rounded px-2 py-1 bg-white"
-                onchange="this.form.submit()">
-          {% for lang in languages %}
-            <option value="{{ lang.code }}" {% if lang.code == LANGUAGE_CODE %}selected{% endif %}>{{ lang.name_local }}</option>
-          {% endfor %}
-        </select>
-      </form>
+      <div class="hidden md:flex items-center gap-4 ml-4">
+        {% if request.user.is_authenticated %}
+          <span class="text-sm text-gray-600">{{ request.user.username }}</span>
+          <a class="text-sm text-blue-600 hover:text-blue-700" href="{% url 'public_frontend:my_profile' %}">{% trans "My Profile" %}</a>
+          <a class="text-sm text-blue-600 hover:text-blue-700" href="{% url 'public_frontend:logout' %}">{% trans "Logout" %}</a>
+        {% else %}
+          <a class="text-sm text-blue-600 hover:text-blue-700" href="{% url 'public_frontend:login' %}">{% trans "Login" %}</a>
+          <a class="text-sm text-blue-600 hover:text-blue-700" href="{% url 'public_frontend:register' %}">{% trans "Register" %}</a>
+        {% endif %}
+        <form method="post" action="{% url 'set_language' %}">
+          {% csrf_token %}
+          <input type="hidden" name="next" value="{{ request.get_full_path }}" />
+          {% get_available_languages as langs %}
+          {% get_language_info_list for langs as languages %}
+          <label for="lang" class="sr-only">Language</label>
+          <select id="lang" name="language" class="text-sm border border-gray-300 rounded px-2 py-1 bg-white"
+                  onchange="this.form.submit()">
+            {% for lang in languages %}
+              <option value="{{ lang.code }}" {% if lang.code == LANGUAGE_CODE %}selected{% endif %}>{{ lang.name_local }}</option>
+            {% endfor %}
+          </select>
+        </form>
+      </div>
     </div>
   </header>
   <main class="mx-auto max-w-7xl p-4 sm:p-6 lg:p-8 min-h-[80vh]">

public_frontend/templates/public_frontend/login.html

@@ -0,0 +1,36 @@
+{% extends 'public_frontend/base.html' %}
+{% load i18n %}
+{% block title %}{% trans "Login" %}{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto">
+  <h1 class="text-2xl font-semibold mb-4">{% trans "Login" %}</h1>
+  <div class="bg-white rounded shadow p-4">
+    <form method="post" action="" class="grid gap-4">
+      {% csrf_token %}
+      {% if form.non_field_errors %}
+        <div class="text-sm text-rose-700">{{ form.non_field_errors }}</div>
+      {% endif %}
+      <div>
+        <label class="block text-sm font-medium mb-1" for="id_username">{% trans "Username" %}</label>
+        <input type="text" name="username" id="id_username" value="{{ form.username.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+        {% if form.username.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.username.errors|join:', ' }}</div>{% endif %}
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1" for="id_password">{% trans "Password" %}</label>
+        <input type="password" name="password" id="id_password" required class="w-full border rounded px-3 py-2">
+        {% if form.password.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.password.errors|join:', ' }}</div>{% endif %}
+      </div>
+      {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
+      <div>
+        <button class="btn-primary" type="submit">{% trans "Sign In" %}</button>
+      </div>
+    </form>
+    <p class="text-sm text-gray-600 mt-3">{% trans "Don't have an account?" %} <a href="{% url 'public_frontend:register' %}" class="text-blue-700 hover:underline">{% trans "Register" %}</a></p>
+  </div>
+</div>
+<style>
+  .btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}
+</style>
+{% endblock %}
+

public_frontend/templates/public_frontend/my_profile.html

@@ -0,0 +1,89 @@
+{% extends 'public_frontend/base.html' %}
+{% load crispy_forms_tags i18n %}
+{% block title %}{% trans "My Profile" %}{% endblock %}
+{% block content %}
+<div class="max-w-3xl mx-auto">
+  <h1 class="text-2xl font-semibold mb-4">{% trans "My Profile" %}</h1>
+  <form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4">
+    {% csrf_token %}
+    <div class="grid grid-cols-1 gap-6">
+      <div>
+        <h2 class="text-base font-semibold mb-2">{% trans "Account" %}</h2>
+        <div class="grid md:grid-cols-2 gap-4 mb-2">
+          <div>
+            <label class="block text-sm font-medium mb-1">{% trans "Username" %}</label>
+            <input type="text" value="{{ username_value }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
+          </div>
+          <div>
+            <label class="block text-sm font-medium mb-1">{% trans "Role" %}</label>
+            <input type="text" value="{{ role_label }}" class="w-full border rounded px-3 py-2 bg-gray-50" disabled>
+          </div>
+        </div>
+        {{ form_user|crispy }}
+      </div>
+      {% if has_profile %}
+      <div>
+        <h2 class="text-base font-semibold mb-2">{% trans "Profile Photo" %}</h2>
+        <div class="flex items-start gap-4">
+          <div>
+            <img id="my-photo-preview" src="{% if request.user.recycle_profile.my_photo %}{{ request.user.recycle_profile.my_photo.url }}{% else %}#{% endif %}" alt="Current photo" class="w-24 h-24 rounded object-cover border {% if not request.user.recycle_profile.my_photo %}hidden{% endif %}" />
+            {% if not request.user.recycle_profile.my_photo %}
+              <div id="my-photo-placeholder" class="w-24 h-24 rounded bg-gray-100 flex items-center justify-center text-gray-400 border">No photo</div>
+            {% endif %}
+          </div>
+          <div class="flex-1">
+            {{ form_photo.my_photo }}
+            <div class="flex items-center gap-3">
+              <button type="button" id="btn-pick-photo" class="btn-outline">Change photo</button>
+              {% if form_photo.remove_photo %}
+                <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                  {{ form_photo.remove_photo }} Remove current photo
+                </label>
+              {% endif %}
+            </div>
+            <p class="text-xs text-gray-500 mt-1">JPG/PNG, up to 5MB.</p>
+            <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+    <div class="mt-4">
+      <button class="btn-primary" type="submit">{% trans "Save Changes" %}</button>
+      <style>.btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}</style>
+    </div>
+  </form>
+</div>
+<script>
+  (function(){
+    const input = document.getElementById('id_my_photo');
+    const btn = document.getElementById('btn-pick-photo');
+    const preview = document.getElementById('my-photo-preview');
+    const placeholder = document.getElementById('my-photo-placeholder');
+    const removeCb = document.getElementById('id_remove_photo');
+    if (btn && input) {
+      btn.addEventListener('click', function(){ input.click(); });
+    }
+    if (input) {
+      input.addEventListener('change', function(){
+        if (input.files && input.files[0]) {
+          const file = input.files[0];
+          const url = URL.createObjectURL(file);
+          if (preview) { preview.src = url; preview.classList.remove('hidden'); }
+          if (placeholder) { placeholder.classList.add('hidden'); }
+          if (removeCb) { removeCb.checked = false; }
+        }
+      });
+    }
+    if (removeCb) {
+      removeCb.addEventListener('change', function(){
+        if (removeCb.checked) {
+          if (preview) { preview.classList.add('hidden'); }
+          if (placeholder) { placeholder.classList.remove('hidden'); }
+          if (input) { input.value = ''; }
+        }
+      });
+    }
+  })();
+</script>
+{% endblock %}

public_frontend/templates/public_frontend/pickup_request.html

@@ -4,7 +4,7 @@
 {% load crispy_forms_tags widget_tweaks %}
 {% block content %}
 <h1 class="text-xl font-semibold mb-4">{% trans "Request a Pickup" %}</h1>
-<div x-data="pickupForm()">
+<div x-data="pickupForm()" x-init="setupPreview()">
   <div class="bg-white rounded shadow p-4" >
     <form x-ref="form" id="pickup-form" method="post" enctype="multipart/form-data" class="space-y-4">
       {% csrf_token %}
@@ -24,7 +24,8 @@
         </div>
       </div>
       {{ form.materials|attr:"x-ref:materials"|as_crispy_field }}
-      {{ form.photos|attr:"x-ref:photos"|as_crispy_field }}
+      {{ form.photos|attr:"x-ref:photos"|attr:"accept:image/*"|as_crispy_field }}
+      <div x-ref="photos_preview" id="photos-preview" class="mt-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2"></div>
       <div>
         <button id="open-review" class="btn btn-primary" type="button" @click="openReview">Review &amp; Submit</button>
       </div>
@@ -67,6 +68,43 @@
   function pickupForm(){
     return {
       rv: {name:'', email:'', phone:'', address:'', preferred_at:'', materials:'', photos: []},
+      setupPreview(){
+        const input = this.$refs.photos;
+        const render = () => this.renderPreviews(input && input.files ? Array.from(input.files) : []);
+        if (input) {
+          input.addEventListener('change', render);
+          // Initial render (in case the browser retained selection)
+          render();
+        }
+      },
+      renderPreviews(files){
+        const wrap = this.$refs.photos_preview;
+        if (!wrap) return;
+        // Clear existing
+        while (wrap.firstChild) wrap.removeChild(wrap.firstChild);
+        if (!files || files.length === 0) return;
+        files.forEach(f => {
+          const item = document.createElement('div');
+          item.className = 'relative border rounded overflow-hidden bg-white shadow-sm';
+          if (f.type && f.type.startsWith('image/')) {
+            const img = document.createElement('img');
+            img.src = URL.createObjectURL(f);
+            img.alt = f.name;
+            img.className = 'w-full h-24 object-cover';
+            item.appendChild(img);
+          } else {
+            const box = document.createElement('div');
+            box.className = 'h-24 flex items-center justify-center text-xs text-gray-600 p-2 text-center';
+            box.textContent = f.name;
+            item.appendChild(box);
+          }
+          const cap = document.createElement('div');
+          cap.className = 'absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] px-1 py-0.5 truncate';
+          cap.textContent = f.name;
+          item.appendChild(cap);
+          wrap.appendChild(item);
+        });
+      },
       openReview(){
         console.log(this.$refs.form)
         const fd = new FormData(this.$refs.form);
@@ -86,7 +124,7 @@
         if(this.$refs.dialog.close){ this.$refs.dialog.close(); } else { this.$refs.dialog.removeAttribute('open'); }
         this.$refs.form.submit();
       }
-    }
   }
+}
 </script>
 {% endblock %}

public_frontend/templates/public_frontend/register.html

@@ -0,0 +1,50 @@
+{% extends 'public_frontend/base.html' %}
+{% load i18n %}
+{% block title %}{% trans "Register" %}{% endblock %}
+{% block content %}
+<div class="max-w-xl mx-auto">
+  <h1 class="text-2xl font-semibold mb-4">{% trans "Create an Account" %}</h1>
+  <div class="bg-white rounded shadow p-4">
+    <form method="post" action="" class="grid gap-4">
+      {% csrf_token %}
+      <div>
+        <label class="block text-sm font-medium mb-1" for="id_username">{% trans "Username" %}</label>
+        <input type="text" name="username" id="id_username" value="{{ form.username.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+        {% if form.username.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.username.errors|join:", " }}</div>{% endif %}
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1" for="id_email">{% trans "Email" %}</label>
+        <input type="email" name="email" id="id_email" value="{{ form.email.value|default:'' }}" required class="w-full border rounded px-3 py-2">
+        {% if form.email.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.email.errors|join:", " }}</div>{% endif %}
+      </div>
+      <div class="grid md:grid-cols-2 gap-4">
+        <div>
+          <label class="block text-sm font-medium mb-1" for="id_password1">{% trans "Password" %}</label>
+          <input type="password" name="password1" id="id_password1" required class="w-full border rounded px-3 py-2">
+        </div>
+        <div>
+          <label class="block text-sm font-medium mb-1" for="id_password2">{% trans "Confirm Password" %}</label>
+          <input type="password" name="password2" id="id_password2" required class="w-full border rounded px-3 py-2">
+          {% if form.password2.errors %}<div class="text-sm text-rose-700 mt-1">{{ form.password2.errors|join:", " }}</div>{% endif %}
+        </div>
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1" for="id_role">{% trans "Role" %}</label>
+        <select name="role" id="id_role" class="w-full border rounded px-3 py-2">
+          {% for val,label in form.fields.role.choices %}
+            <option value="{{ val }}" {% if form.role.value == val %}selected{% endif %}>{{ label }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div>
+        <button class="btn-primary" type="submit">{% trans "Register" %}</button>
+      </div>
+    </form>
+    <p class="text-sm text-gray-600 mt-3">{% trans "Already have an account?" %} <a href="/accounts/login/" class="text-blue-700 hover:underline">{% trans "Login" %}</a></p>
+  </div>
+</div>
+<style>
+  .btn-primary{background:#1d4ed8;color:#fff;padding:.5rem .75rem;border-radius:.375rem}
+</style>
+{% endblock %}
+

public_frontend/urls.py

@@ -1,10 +1,16 @@
 from django.urls import path
 from . import views
+from django.contrib.auth import views as auth_views
+from .views import PublicLoginView
 
 app_name = "public_frontend"
 
 urlpatterns = [
     path("", views.home, name="home"),
+    path("login/", PublicLoginView.as_view(), name="login"),
+    path("logout/", auth_views.LogoutView.as_view(next_page="public_frontend:home"), name="logout"),
+    path("me/", views.my_profile, name="my_profile"),
+    path("register/", views.register, name="register"),
     path("services/<int:pk>/", views.service_detail, name="service_detail"),
     path("materials/", views.materials_list, name="materials_list"),
     path("listings/", views.listings_list, name="listings_list"),

public_frontend/views.py

@@ -5,18 +5,21 @@ from django.contrib import messages
 from django.urls import reverse
 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 
-from orgs.models import Organization
+from orgs.models import Organization, UserProfile
 from recycle_core.models import ProvidedService
 from recycle_core.models import Material, ScrapListing, PickupOrder
 from cms.models import Post, PostCategory
 
-from .forms import PickupRequestForm, ContactForm
+from .forms import PickupRequestForm, ContactForm, RegistrationForm, PublicUserForm, PublicUserPhotoForm
 from .models import Lead
 from recycle_core.controllers.pickup_request import (
     PickupRequestController,
     PickupRequestData,
 )
 
+from django.contrib.auth.views import LoginView
+from django.urls import reverse
+
 
 def home(request):
     org = getattr(request, "org", None)
@@ -42,6 +45,7 @@ def home(request):
 
     pickup_form = PickupRequestForm()
     contact_form = ContactForm()
+    register_form = RegistrationForm()
 
     return render(
         request,
@@ -54,6 +58,7 @@ def home(request):
             "pickup_form": pickup_form,
             "contact_form": contact_form,
             "org": org,
+            "register_form": register_form,
         },
     )
 
@@ -153,6 +158,41 @@ def contact(request):
     return render(request, "public_frontend/contact.html", {"form": form, "org": org})
 
 
+def register(request):
+    from django.contrib.auth import get_user_model
+    from django.contrib.auth.models import Group
+    from orgs.models import UserProfile
+
+    org = getattr(request, "org", None)
+    if not org:
+        messages.error(request, "Organization context missing.")
+        return redirect("public_frontend:home")
+
+    form = RegistrationForm(request.POST or None)
+    if request.method == "POST":
+        if form.is_valid():
+            User = get_user_model()
+            user = User(username=form.cleaned_data["username"], email=form.cleaned_data["email"], is_active=False)
+            user.set_password(form.cleaned_data["password1"])
+            user.save()
+            role = form.cleaned_data["role"]
+            # Create org profile
+            UserProfile.objects.create(user=user, organization=org, role=role)
+            # Add to group matching the role if exists
+            try:
+                g = Group.objects.filter(name=role).first()
+                if g:
+                    user.groups.add(g)
+            except Exception:
+                pass
+            messages.success(request, "Account created. Please wait for admin approval.")
+            return redirect("public_frontend:home")
+        else:
+            messages.error(request, "Please correct the errors below.")
+
+    return render(request, "public_frontend/register.html", {"form": form, "org": org})
+
+
 def blog_list(request):
     org = getattr(request, "org", None)
     qs = Post.objects.all().order_by("-published_at", "-created_at")
@@ -178,3 +218,44 @@ def blog_detail(request, slug: str):
     # Ensure markdown is rendered; fallback to raw content if needed
     html = getattr(post, "content_html", None) or getattr(post, "content", "")
     return render(request, "public_frontend/blog_detail.html", {"post": post, "html": html, "org": org})
+
+
+class PublicLoginView(LoginView):
+    template_name = "public_frontend/login.html"
+    redirect_authenticated_user = True
+
+    def get_success_url(self):
+        return reverse("public_frontend:home")
+
+
+from django.contrib.auth.decorators import login_required
+from django.contrib.auth import get_user_model
+
+
+@login_required
+def my_profile(request):
+    user = request.user
+    profile = getattr(user, "recycle_profile", None)
+    role_code = getattr(profile, "role", None)
+    role_label = dict(UserProfile.ROLE_CHOICES).get(role_code, "-") if role_code else "-"
+    if request.method == "POST":
+        form_user = PublicUserForm(request.POST, instance=user)
+        form_photo = PublicUserPhotoForm(request.POST, request.FILES, instance=profile) if profile else None
+        ok_user = form_user.is_valid()
+        ok_photo = True if form_photo is None else form_photo.is_valid()
+        if ok_user and ok_photo:
+            form_user.save()
+            if form_photo is not None:
+                form_photo.save()
+            messages.success(request, "Profile updated.")
+            return redirect(reverse("public_frontend:my_profile"))
+        messages.error(request, "Please correct the errors below.")
+    else:
+        form_user = PublicUserForm(instance=user)
+        form_photo = PublicUserPhotoForm(instance=profile) if profile else None
+
+    return render(
+        request,
+        "public_frontend/my_profile.html",
+        {"form_user": form_user, "form_photo": form_photo, "has_profile": bool(profile), "username_value": user.username, "role_label": role_label},
+    )

recycle_core/forms.py

@@ -171,6 +171,7 @@ class UserEditForm(forms.Form):
     first_name = forms.CharField(max_length=150, required=False)
     last_name = forms.CharField(max_length=150, required=False)
     role = forms.ChoiceField(choices=UserProfile.ROLE_CHOICES)
+    is_active = forms.BooleanField(required=False, label="Active")
     password1 = forms.CharField(widget=forms.PasswordInput, required=False)
     password2 = forms.CharField(widget=forms.PasswordInput, required=False)
 
@@ -183,6 +184,49 @@ class UserEditForm(forms.Form):
         return cleaned
 
 
+class UserProfilePhotoForm(forms.ModelForm):
+    remove_photo = forms.BooleanField(label="Remove current photo", required=False)
+
+    class Meta:
+        model = UserProfile
+        fields = ["my_photo", "remove_photo"]
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["my_photo"].widget = forms.ClearableFileInput(attrs={
+            "accept": "image/*",
+            "class": "hidden",
+            "id": "id_my_photo",
+        })
+
+    def clean_my_photo(self):
+        f = self.cleaned_data.get("my_photo")
+        if not f:
+            return f
+        content_type = getattr(f, "content_type", "")
+        if content_type and not content_type.startswith("image/"):
+            raise ValidationError("Please upload an image file.")
+        max_bytes = 5 * 1024 * 1024
+        if getattr(f, "size", 0) and f.size > max_bytes:
+            raise ValidationError("Image too large (max 5MB).")
+        return f
+
+    def save(self, commit: bool = True):
+        instance: UserProfile = super().save(commit=False)
+        remove = self.cleaned_data.get("remove_photo", False)
+        new_file = self.cleaned_data.get("my_photo")
+        if remove and not new_file:
+            try:
+                if instance.my_photo:
+                    instance.my_photo.delete(save=False)
+            except Exception:
+                pass
+            instance.my_photo = None
+        if commit:
+            instance.save()
+        return instance
+
+
 # Weighing -------------------------------------------------------------------
 
 

recycle_core/templates/recycle_core/user_form.html

@@ -8,8 +8,7 @@
   <a href="{{ cancel_url }}" class="btn-outline">Back</a>
   <style>.btn-outline{border:1px solid #cbd5e1;padding:0.375rem 0.5rem;border-radius:0.375rem}</style>
 </div>
-
-<form method="post" class="bg-white rounded shadow p-4 space-y-4">
+<form method="post" enctype="multipart/form-data" class="bg-white rounded shadow p-4 space-y-4">
   {% csrf_token %}
   <input type="hidden" name="next" value="{{ request.get_full_path }}">
   {% if creating %}
@@ -20,6 +19,18 @@
       <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
     </div>
     {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
+    {% if form.is_active %}
+      <div class="mt-2">
+        <div class="flex items-center gap-2">
+          {{ form.is_active }}
+          <label for="{{ form.is_active.id_for_label }}" class="text-sm font-medium">Active</label>
+        </div>
+        {% if form.is_active.errors %}
+          <div class="text-sm text-rose-700 mt-1">{{ form.is_active.errors|join:", " }}</div>
+        {% endif %}
+      </div>
+    {% endif %}
+    
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
       <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% endif %}</div>
@@ -35,6 +46,45 @@
       <div>{% if form.last_name %}{{ form.last_name|as_crispy_field }}{% endif %}</div>
     </div>
     {% if form.role %}{{ form.role|as_crispy_field }}{% endif %}
+    {% if form.is_active %}
+      <div class="mt-2">
+        <div class="flex items-center gap-2">
+          {{ form.is_active }}
+          <label for="{{ form.is_active.id_for_label }}" class="text-sm font-medium">Active</label>
+        </div>
+        {% if form.is_active.errors %}
+          <div class="text-sm text-rose-700 mt-1">{{ form.is_active.errors|join:", " }}</div>
+        {% endif %}
+      </div>
+    {% endif %}
+    {% if form_photo %}
+    <div class="mt-4">
+      <h3 class="text-sm font-semibold mb-2">Profile Photo</h3>
+      <div class="flex items-start gap-4">
+        <div>
+          {% with photo=item.recycle_profile.my_photo %}
+            <img id="my-photo-preview" src="{% if photo %}{{ photo.url }}{% else %}#{% endif %}" alt="Current photo" class="w-24 h-24 rounded object-cover border {% if not photo %}hidden{% endif %}" />
+            {% if not photo %}
+              <div id="my-photo-placeholder" class="w-24 h-24 rounded bg-gray-100 flex items-center justify-center text-gray-400 border">No photo</div>
+            {% endif %}
+          {% endwith %}
+        </div>
+        <div class="flex-1">
+          {{ form_photo.my_photo }}
+          <div class="flex items-center gap-3">
+            <button type="button" id="btn-pick-photo" class="btn-outline">Change photo</button>
+            {% if form_photo.remove_photo %}
+              <label class="inline-flex items-center gap-2 text-sm text-gray-700">
+                {{ form_photo.remove_photo }} Remove current photo
+              </label>
+            {% endif %}
+          </div>
+          <p class="text-xs text-gray-500 mt-1">JPG/PNG, up to 5MB.</p>
+          <style>.btn-outline{border:1px solid #cbd5e1;padding:.375rem .5rem;border-radius:.375rem}</style>
+        </div>
+      </div>
+    </div>
+    {% endif %}
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>{% if form.password1 %}{{ form.password1|as_crispy_field }}{% endif %}</div>
       <div>{% if form.password2 %}{{ form.password2|as_crispy_field }}{% endif %}</div>
@@ -46,4 +96,36 @@
     <style>.btn{background:#1d4ed8;color:#fff;padding:0.5rem 0.75rem;border-radius:0.375rem}</style>
   </div>
 </form>
+<script>
+  (function(){
+    const input = document.getElementById('id_my_photo');
+    const btn = document.getElementById('btn-pick-photo');
+    const preview = document.getElementById('my-photo-preview');
+    const placeholder = document.getElementById('my-photo-placeholder');
+    const removeCb = document.getElementById('id_remove_photo');
+    if (btn && input) {
+      btn.addEventListener('click', function(){ input.click(); });
+    }
+    if (input) {
+      input.addEventListener('change', function(){
+        if (input.files && input.files[0]) {
+          const file = input.files[0];
+          const url = URL.createObjectURL(file);
+          if (preview) { preview.src = url; preview.classList.remove('hidden'); }
+          if (placeholder) { placeholder.classList.add('hidden'); }
+          if (removeCb) { removeCb.checked = false; }
+        }
+      });
+    }
+    if (removeCb) {
+      removeCb.addEventListener('change', function(){
+        if (removeCb.checked) {
+          if (preview) { preview.classList.add('hidden'); }
+          if (placeholder) { placeholder.classList.remove('hidden'); }
+          if (input) { input.value = ''; }
+        }
+      });
+    }
+  })();
+</script>
 {% endblock %}

recycle_core/views.py

@@ -153,7 +153,7 @@ def materials_list(request):
 
 
 # Organization Users (owner-only)
-from .forms import UserCreateForm, UserEditForm
+from .forms import UserCreateForm, UserEditForm, UserProfilePhotoForm
 
 
 @owner_required
@@ -223,12 +223,22 @@ def org_user_edit(request, pk: int):
         "first_name": user.first_name,
         "last_name": user.last_name,
         "role": getattr(profile, "role", UserProfile.ROLE_MANAGER),
+        "is_active": user.is_active,
     })
+    form_photo = UserProfilePhotoForm(request.POST or None, request.FILES or None, instance=profile) if profile else None
+    print(form_photo)
     if request.method == "POST":
-        if form.is_valid():
+        ok_main = form.is_valid()
+        ok_photo = True if form_photo is None else form_photo.is_valid()
+        if ok_main and ok_photo:
             user.email = form.cleaned_data.get("email") or ""
             user.first_name = form.cleaned_data.get("first_name") or ""
             user.last_name = form.cleaned_data.get("last_name") or ""
+            desired_active = bool(form.cleaned_data.get("is_active"))
+            if user.id == request.user.id and not desired_active:
+                messages.error(request, "You cannot deactivate your own account.")
+            else:
+                user.is_active = desired_active
             p1 = form.cleaned_data.get("password1")
             if p1:
                 user.set_password(p1)
@@ -239,13 +249,17 @@ def org_user_edit(request, pk: int):
             if org is not None:
                 profile.organization = org
             profile.save()
+            if form_photo is not None:
+                form_photo.instance = profile
+                form_photo.save()
             messages.success(request, f"User '{user.username}' updated.")
             next_url = request.POST.get("next") or request.GET.get("next")
             if next_url:
                 return redirect(next_url)
             return redirect("recycle_core:org_users_list")
         messages.error(request, "Please correct the errors below.")
-    return render(request, "recycle_core/user_form.html", {"nav": _nav_items(), "form": form, "item": user, "creating": False, "cancel_url": reverse("recycle_core:org_users_list")})
+    print(f"fp = {form_photo}")
+    return render(request, "recycle_core/user_form.html", {"nav": _nav_items(), "form": form, "form_photo": form_photo, "item": user, "creating": False, "cancel_url": reverse("recycle_core:org_users_list")})
 
 
 @owner_required