Notes of users that don't have validated their email addresses are displayed with a different background

apps/note/api/serializers.py

@@ -106,6 +106,8 @@ class ConsumerSerializer(serializers.ModelSerializer):
     """
     note = serializers.SerializerMethodField()
 
+    email_confirmed = serializers.SerializerMethodField()
+
     class Meta:
         model = Alias
         fields = '__all__'
@@ -120,6 +122,11 @@ class ConsumerSerializer(serializers.ModelSerializer):
             return NotePolymorphicSerializer().to_representation(obj.note)
         return dict(id=obj.id)
 
+    def get_email_confirmed(self, obj):
+        if isinstance(obj.note, NoteUser):
+            return obj.note.user.profile.email_confirmed
+        return True
+
 
 class TemplateCategorySerializer(serializers.ModelSerializer):
     """

static/js/base.js

@@ -89,21 +89,23 @@ function li(id, text,extra_css) {
     return "<li class=\"list-group-item py-1 d-flex justify-content-between align-items-center " + extra_css + "\"" +
         " id=\"" + id + "\">" + text + "</li>\n";
 }
+
 /**
- * Return style to apply according to the balance of the note
- * @param balance The balance of the note.
+ * Return style to apply according to the balance of the note and the validation status of the email address
+ * @param note The concerned note.
  */
-function displayStyle(balance){
-    if (balance < -5000){
-        return " text-danger bg-dark"
-    }
-    else if(balance <-1000){
-        return " text-danger"
-    }
-    else if(balance < 0){
-        return "text-warning"
-    }
-    return ""
+function displayStyle(note) {
+    let balance = note.balance;
+    var css = "";
+    if (balance < -5000)
+        css += " text-danger bg-dark";
+    else if (balance < -1000)
+        css += " text-danger";
+    else if (balance < 0)
+        css += " text-warning";
+    if (!note.email_confirmed)
+        css += " text-white bg-primary";
+    return css;
 }
 
 
@@ -121,24 +123,23 @@ function displayNote(note, alias, user_note_field=null, profile_pic_field=null)
     let img = note.display_image;
     if (alias !== note.name && note.name)
         alias += " (aka. " + note.name + ")";
-    if (user_note_field !== null)
-
+    if (user_note_field !== null) {
         $("#" + user_note_field).removeAttr('class');
-        $("#" + user_note_field).addClass(displayStyle(note.balance));
+        $("#" + user_note_field).addClass(displayStyle(note));
         $("#" + user_note_field).text(alias + (note.balance == null ? "" : (":\n" + pretty_money(note.balance))));
         if (profile_pic_field != null) {
             $("#" + profile_pic_field).attr('src', img);
             $("#" + profile_pic_field).click(function () {
                 console.log(note);
-            if(note.resourcetype == "NoteUser"){
+                if (note.resourcetype === "NoteUser") {
                     document.location.href = "/accounts/user/" + note.user;
-            }
-            else if(note.resourcetype == "NoteClub"){
+                } else if (note.resourcetype === "NoteClub") {
                     document.location.href = "/accounts/club/" + note.club;
                 }
             });
         }
     }
+}
 
 /**
  * Remove a note from the emitters.
@@ -233,7 +234,7 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
         let aliases_matched_obj = $("#" + alias_matched_id);
         let aliases_matched_html = "";
         // get matched Alias with note associated
-        if(pattern == ""){
+        if (pattern === "") {
             aliases_matched_obj = $("#" + alias_matched_id);
             aliases_matched_html = "";
             aliases_matched_obj.html("")
@@ -250,7 +251,8 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                     return;
                 consumers.results.forEach(function (consumer) {
                     let note = consumer.note;
-                extra_css = displayStyle(note.balance);
+                    note.email_confirmed = consumer.email_confirmed;
+                    let extra_css = displayStyle(note);
                     aliases_matched_html += li(alias_prefix + '_' + consumer.id,
                         consumer.name,
                         extra_css);
@@ -264,7 +266,8 @@ function autoCompleteNote(field_id, alias_matched_id, note_list_id, notes, notes
                         displayNote(consumer.note, consumer.name, user_note_field, profile_pic_field)
                     });
                     consumer_obj.click(function () {
-                    field.val(""); old_pattern = ""; // reset input field
+                        field.val("");
+                        old_pattern = ""; // reset input field
                         var disp = null;
                         notes_display.forEach(function (d) {
                             // We compare the note ids

templates/member/user_list.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load render_table from django_tables2 %}
 {% load crispy_forms_tags %}
+{% load i18n %}
 {% block content %}
     <input id="searchbar" type="text" class="form-control" placeholder="Nom/prénom/note/section ...">