Added support for profile pictures

application/app/admin.py

@@ -45,10 +45,13 @@ class CustomUserAdmin(UserAdmin):
 
     fieldsets_ = list((*UserAdmin.fieldsets,))
     fieldsets_.insert(1, (
-            "Balance",
+        "Balance",
-            {"fields": ("balance", "allow_order_with_negative_balance")},
+        {"fields": ("balance", "allow_order_with_negative_balance")},
-        )
+    ))
-    )
+    fieldsets_.insert(2, (
+        "Profile Picture",
+        {"fields": ("profile_picture_filename",)},
+    ))
     fieldsets = tuple(fieldsets_)
 
     list_display = ["username", "balance", "is_active", "allow_order_with_negative_balance"]

application/app/models.py

@@ -20,6 +20,7 @@ class User(AbstractUser):
 
     balance = models.DecimalField(max_digits=8, decimal_places=2, default=0.00)
     allow_order_with_negative_balance = models.BooleanField(default=False)
+    profile_picture_filename = models.CharField(default="default.svg", max_length=25)
 
     def delete(self, *args, **kwargs):
         self.balance = 0

application/app/templates/registration/login.html

@@ -2,6 +2,7 @@
 {% extends "baseLayout.html" %}
 
 {% load i18n %}
+{% load static %}
 
 {% block title %}
     {% translate "Drinks - Login" %}
@@ -68,19 +69,20 @@
         <ul class="userlist">
             {% for user_ in user_list %}
                 <li class="userlistButton button" data-username="{{ user_.username }}">
-                        
+                    <img src="{% static 'profilepictures/'|add:user_.profile_picture_filename %}">
-                    {% if user_.first_name %}
+                    <div>
+                        {% if user_.first_name %}
 
-                        {% if user_.last_name %}
+                            {% if user_.last_name %}
-                            {{ user_.last_name }},
+                                {{ user_.last_name }},
+                            {% endif %}
+
+                            {{ user_.first_name }}
+
+                        {% else %}
+                            {{ user_.username }}
                         {% endif %}
-
+                    </div>
-                        {{ user_.first_name }}
-
-                    {% else %}
-                        {{ user_.username }}
-                    {% endif %}
-
                 </li>
             {% endfor %}
         </ul>

application/app/templates/userPanel.html

@@ -1,18 +1,22 @@
 {% load i18n %}
+{% load static %}
 
 <div class="userPanel">
     <div class="userInfo">
-        {% if user.first_name != "" %}
+        <img src="{% static 'profilepictures/'|add:user.profile_picture_filename %}">
-            {% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
+        <span>
-        {% else %}
+            {% if user.first_name != "" %}
-            {% translate "User" %}: {{ user.username }}
+                {% translate "User" %}: {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
-        {% endif %}
+            {% else %}
-        &nbsp;-&nbsp;
+                {% translate "User" %}: {{ user.username }}
-        {% if user.balance < 0.01 %}
+            {% endif %}
-            <span class="userBalanceWarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
+            &nbsp;-&nbsp;
-        {% else %}
+            {% if user.balance < 0.01 %}
-            <span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
+                <span class="userBalanceWarn">{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
-        {% endif %}
+            {% else %}
+                <span>{% translate "Balance" %}: {{ user.balance }}{{ currency_suffix }}</span>
+            {% endif %}
+        </span>
     </div>
     <div class="horizontalButtonList">
         <a class="button" id="navBarBtnHome" href="/">Home</a>

static/css/login.css

@@ -25,14 +25,27 @@ main > h1 {
     justify-content: center;
     align-items: center;
 }
-.userlist li {
+.userlist > li {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: center;
-    padding: .8rem 1.1rem;
     margin-bottom: .5rem;
+    padding: 0 .5rem;
+}
+.userlist > li > img {
+    margin-right: auto;
+    margin-left: 0;
+    height: 2rem;
+    width: 2rem;
+}
+.userlist > li > div {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+    padding: .8rem 1.1rem;
 }
 .userlistButton {
     font-size: 1.1rem;
@@ -102,11 +115,6 @@ form .horizontalButtonList {
     .userlist {
         width: 100%;
     }
-    .userlist li {
-        width: 100%;
-        padding-left: 0;
-        padding-right: 0;
-    }
     .pinpad table tr td button {
         height: 4.2rem;
         width: 4.2rem;

static/css/main.css

@@ -67,10 +67,17 @@ main {
     align-items: center;
     margin-top: 1rem;
     font-size: 1rem;
-    width: 90%;
+    width: 94%;
 }
-.userInfo span {
+.userInfo > span {
     font-size: 1.1rem;
+    vertical-align: middle;
+}
+.userInfo > img {
+    vertical-align: middle;
+    width: 1.8rem;
+    height: 1.8rem;
+    margin: .5rem;
 }
 .userPanel > .horizontalButtonList {
     margin-left: auto;

static/profilepictures/default.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     id="layer1">
+    <circle
+       style="fill:#808080;fill-opacity:1;stroke:#fffcfe;stroke-opacity:1"
+       id="path848"
+       cx="8"
+       cy="4.5"
+       r="2.5" />
+    <path
+       style="fill:#7f7f7f;fill-opacity:1;stroke:#fffcff;stroke-opacity:1"
+       id="path3433"
+       d="m -3,-13.499699 a 5,5 0 0 1 -2.5,4.3301274 5,5 0 0 1 -5,0 5,5 0 0 1 -2.5,-4.3301274 h 5 z"
+       transform="scale(-1)" />
+  </g>
+</svg>