Intégration des smileys clems (#4408)

* Intégration des smileys clems

* Et un autre mouvement de smileys!

* Ajoute smileys dans gulp

* Génère et gère le cookie

* roses are red...

* Un peu de doc

* Test is love, test is life

* Et on oublie pas la recette !

* Et il faut tester, avant

* fix test

* logique inverse!

* Les derniers petits trucs

* Page des cookies

Gulpfile.js

@@ -113,7 +113,7 @@ gulp.task('css:sprite', () =>
 
 // Optimizes the images
 gulp.task('images', ['css:sprite'], () =>
-    gulp.src('assets/{images,smileys}/*')
+    gulp.src('assets/{images,smileys}/**/*')
         .pipe(imagemin())
         .pipe(gulp.dest('dist/')));
 

assets/js/editor.js

@@ -108,34 +108,34 @@
 
         smilies: {
             0: {
-                smiley_sm: { title: ":)",         start: ":)",         end: "", image: "https://zestedesavoir.com/static/smileys/smile.png" },
-                smiley_he: { title: ":D",         start: ":D",         end: "", image: "https://zestedesavoir.com/static/smileys/heureux.png" },
-                smiley_cl: { title: ";)",         start: ";)",         end: "", image: "https://zestedesavoir.com/static/smileys/clin.png" },
-                smiley_la: { title: ":p",         start: ":p",         end: "", image: "https://zestedesavoir.com/static/smileys/langue.png" },
-                smiley_ri: { title: ":lol:",      start: ":lol:",      end: "", image: "https://zestedesavoir.com/static/smileys/rire.gif" },
-                smiley_un: { title: ":euh:",      start: ":euh:",      end: "", image: "https://zestedesavoir.com/static/smileys/unsure.gif" },
-                smiley_tr: { title: ":(",         start: ":(",         end: "", image: "https://zestedesavoir.com/static/smileys/triste.png" },
-                smiley_hu: { title: ":o",         start: ":o",         end: "", image: "https://zestedesavoir.com/static/smileys/huh.png" }
+                smiley_sm: { title: ":)",         start: ":)",         end: "", image: "/static/smileys/smile.png" },
+                smiley_he: { title: ":D",         start: ":D",         end: "", image: "/static/smileys/heureux.png" },
+                smiley_cl: { title: ";)",         start: ";)",         end: "", image: "/static/smileys/clin.png" },
+                smiley_la: { title: ":p",         start: ":p",         end: "", image: "/static/smileys/langue.png" },
+                smiley_ri: { title: ":lol:",      start: ":lol:",      end: "", image: "/static/smileys/rire.gif" },
+                smiley_un: { title: ":euh:",      start: ":euh:",      end: "", image: "/static/smileys/unsure.gif" },
+                smiley_tr: { title: ":(",         start: ":(",         end: "", image: "/static/smileys/triste.png" },
+                smiley_hu: { title: ":o",         start: ":o",         end: "", image: "/static/smileys/huh.png" }
             },
             1: {
-                smiley_c1: { title: ":colere2:",  start: ":colere2:",  end: "", image: "https://zestedesavoir.com/static/smileys/mechant.png" },
-                smiley_oo: { title: "o_O",        start: "o_O",        end: "", image: "https://zestedesavoir.com/static/smileys/blink.gif" },
-                smiley_uu: { title: "^^",         start: "^^",         end: "", image: "https://zestedesavoir.com/static/smileys/hihi.png" },
-                smiley_si: { title: ":-°",        start: ":-°",        end: "", image: "https://zestedesavoir.com/static/smileys/siffle.png" },
-                smiley_an: { title: ":ange:",     start: ":ange:",     end: "", image: "https://zestedesavoir.com/static/smileys/ange.png" },
-                smiley_c2: { title: ":colere:",   start: ":colere:",   end: "", image: "https://zestedesavoir.com/static/smileys/angry.gif" },
-                smiley_di: { title: ":diable:",   start: ":diable:",   end: "", image: "https://zestedesavoir.com/static/smileys/diable.png" },
-                smiley_ma: { title: ":magicien:", start: ":magicien:", end: "", image: "https://zestedesavoir.com/static/smileys/magicien.png" }
+                smiley_c1: { title: ":colere2:",  start: ":colere2:",  end: "", image: "/static/smileys/mechant.png" },
+                smiley_oo: { title: "o_O",        start: "o_O",        end: "", image: "/static/smileys/blink.gif" },
+                smiley_uu: { title: "^^",         start: "^^",         end: "", image: "/static/smileys/hihi.png" },
+                smiley_si: { title: ":-°",        start: ":-°",        end: "", image: "/static/smileys/siffle.png" },
+                smiley_an: { title: ":ange:",     start: ":ange:",     end: "", image: "/static/smileys/ange.png" },
+                smiley_c2: { title: ":colere:",   start: ":colere:",   end: "", image: "/static/smileys/angry.gif" },
+                smiley_di: { title: ":diable:",   start: ":diable:",   end: "", image: "/static/smileys/diable.png" },
+                smiley_ma: { title: ":magicien:", start: ":magicien:", end: "", image: "/static/smileys/magicien.png" }
             },
             2: {
-                smiley_ni: { title: ":ninja:",    start: ":ninja:",    end: "", image: "https://zestedesavoir.com/static/smileys/ninja.png" },
-                smiley_gd: { title: ">_<",  start: ">_<",  end: "", image: "https://zestedesavoir.com/static/smileys/pinch.png" },
-                smiley_pi: { title: ":pirate:",   start: ":pirate:",   end: "", image: "https://zestedesavoir.com/static/smileys/pirate.png" },
-                smiley_pl: { title: ":'(",        start: ":'(",        end: "", image: "https://zestedesavoir.com/static/smileys/pleure.png" },
-                smiley_ro: { title: ":honte:",    start: ":honte:",    end: "", image: "https://zestedesavoir.com/static/smileys/rouge.png" },
-                smiley_so: { title: ":soleil:",   start: ":soleil:",   end: "", image: "https://zestedesavoir.com/static/smileys/soleil.png" },
-                smiley_ww: { title: ":waw:",      start: ":waw:",      end: "", image: "https://zestedesavoir.com/static/smileys/waw.png" },
-                smiley_zz: { title: ":zorro:",    start: ":zorro:",    end: "", image: "https://zestedesavoir.com/static/smileys/zorro.png" }
+                smiley_ni: { title: ":ninja:",    start: ":ninja:",    end: "", image: "/static/smileys/ninja.gif" },
+                smiley_gd: { title: ">_<",  start: ">_<",  end: "", image: "/static/smileys/pinch.png" },
+                smiley_pi: { title: ":pirate:",   start: ":pirate:",   end: "", image: "/static/smileys/pirate.png" },
+                smiley_pl: { title: ":'(",        start: ":'(",        end: "", image: "/static/smileys/pleure.png" },
+                smiley_ro: { title: ":honte:",    start: ":honte:",    end: "", image: "/static/smileys/rouge.png" },
+                smiley_so: { title: ":soleil:",   start: ":soleil:",   end: "", image: "/static/smileys/soleil.png" },
+                smiley_ww: { title: ":waw:",      start: ":waw:",      end: "", image: "/static/smileys/waw.png" },
+                smiley_zz: { title: ":zorro:",    start: ":zorro:",    end: "", image: "/static/smileys/zorro.png" }
             }
         },
 

doc/source/install/configs/nginx/sites-available/zestedesavoir

@@ -65,6 +65,7 @@ server {
 	# Cache headers on static resources
 	location ~* ^/(static|media|errors)/ {
 		include snippets/static-cache.conf;
+		include snippets/clem_smileys.conf;
 	}
 
 	# Error pages

doc/source/install/configs/nginx/snippets/clem_smileys.conf

@@ -0,0 +1,11 @@
+if ($http_cookie ~ 'use_old_smileys=True') {
+        # Le smiley ninja est un png dans sa version "old":
+        rewrite ^/static/smileys/ninja.gif$ /static/smileys/ninja.png;
+        # Redirige vers les anciens smileys
+        rewrite ^/static/smileys/(.+)$ /static/smileys/old/$1 break;
+}
+
+if ($http_cookie !~ 'use_old_smileys=True') {
+        # Le smiley ninja est un gif dans sa version "Clem" (pour les anciens messages):
+        rewrite ^/static/smileys/ninja.png$ /static/smileys/ninja.gif;
+}

templates/pages/cookies.html

@@ -71,6 +71,11 @@ <h4>{% trans "Cookies techniques" %}</h4>
         <dd>{% blocktrans %}Ce cookie contient une chaîne de caractères aléatoires qui permet de se prémunir des attaques <a href="http://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery">CSRF</a>. Composant indispensable de la sécurité du site, vous ne pourrez rien poster sans ce cookie.{% endblocktrans %}</dd>
         <dt><tt>hasconsent</tt></dt>
         <dd>{% blocktrans %}Ce cookie indique si vous acceptez l'analyse d'audience. Il peut prendre les valeurs <tt>true</tt> (analyse acceptée) ou <tt>false</tt> (analyse refusée).{% endblocktrans %}</dd>
+        {% if app.member.old_smileys_allowed %}
+            <dt><tt>{{ app.member.old_smileys_cookie_key }}</tt></dt>
+            {% url 'update-member' as update_member  %}
+            <dd>{% blocktrans with url=update_member %}Ce cookie est utilisé pour afficher les "vieux" smileys en lieu et place des smileys Clem (auquel cas il prend la valeur <tt>True</tt>), si vous activez cette option <a href="{{ url }}">dans votre profil</a>.{% endblocktrans %}</dd>
+        {% endif %}
     </dl>
 
     <h4>{% trans "Cookies d'analyse d'audience" %}</h4>

update.md

@@ -1095,3 +1095,11 @@ Mise à jour d'ElasticSearch (#420)
 1. `sudo apt update`
 2. `sudo apt upgrade elasticsearch`
 3. `systemctl restart elasticsearch.service`
+
+Smileys Clem (#4408)
+--------------------
+
++ Ajouter `ZDS_APP['member']['old_smileys_allowed'] = True` au `settings_prod.py`.
++ Télécharger le fichier [`clem_smileys.conf`](https://github.com/zestedesavoir/zds-site/blob/dev/doc/source/install/configs/nginx/snippets/clem_smileys.conf) et le placer dans `/etc/nginx/snippets/zds/`.
++ Éditer `/etc/nginx/sites-available/zestedesavoir` et ajouter `include snippets/zds/clem_smileys.conf;` dans le bloc `location ~* ^/(static|media|errors)/ {` (après la ligne 66?)
++ Redémarrer nginx: `systemctl restart nginx` 

zds/member/forms.py

@@ -217,16 +217,19 @@ class ProfileForm(MiniProfileForm):
     - Display menus on hover
     - Receive an email when receiving a personal message
     """
+
+    multi_choices = [
+        ('show_sign', _(u'Afficher les signatures')),
+        ('is_hover_enabled', _(u'Dérouler les menus au survol')),
+        ('allow_temp_visual_changes', _(u'Activer les changements visuels temporaires')),
+        ('show_markdown_help', _(u"Afficher l'aide Markdown dans l'éditeur")),
+        ('email_for_answer', _(u"Recevoir un courriel lors d'une réponse à un message privé")),
+    ]
+
     options = forms.MultipleChoiceField(
         label='',
         required=False,
-        choices=(
-            ('show_sign', _(u'Afficher les signatures')),
-            ('is_hover_enabled', _(u'Dérouler les menus au survol')),
-            ('allow_temp_visual_changes', _(u'Activer les changements visuels temporaires')),
-            ('show_markdown_help', _(u"Afficher l'aide Markdown dans l'éditeur")),
-            ('email_for_answer', _(u"Recevoir un courriel lors d'une réponse à un message privé")),
-        ),
+        choices=tuple(multi_choices),
         widget=forms.CheckboxSelectMultiple,
     )
 
@@ -251,6 +254,9 @@ def __init__(self, *args, **kwargs):
         self.helper.form_class = 'content-wrapper'
         self.helper.form_method = 'post'
 
+        if settings.ZDS_APP['member']['old_smileys_allowed']:
+            self.fields['options'].choices.insert(3, ('use_old_smileys', _(u'Utiliser les anciens smileys')))
+
         # to get initial value form checkbox show email
         initial = kwargs.get('initial', {})
         self.fields['options'].initial = ''
@@ -264,6 +270,9 @@ def __init__(self, *args, **kwargs):
         if 'allow_temp_visual_changes' in initial and initial['allow_temp_visual_changes']:
             self.fields['options'].initial += 'allow_temp_visual_changes'
 
+        if 'use_old_smileys' in initial and initial['use_old_smileys']:
+            self.fields['options'].initial += 'use_old_smileys'
+
         if 'show_markdown_help' in initial and initial['show_markdown_help']:
             self.fields['options'].initial += 'show_markdown_help'
 

zds/member/migrations/0015_profile_use_old_smileys.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.7 on 2017-08-08 16:21
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('member', '0014_auto_20170807_1930'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='use_old_smileys',
+            field=models.BooleanField(default=False, verbose_name='Utilise les anciens smileys ?'),
+        ),
+    ]

zds/member/models.py

@@ -73,6 +73,7 @@ class Meta:
     can_write = models.BooleanField("Possibilité d'écrire", default=True)
     end_ban_write = models.DateTimeField("Fin d'interdiction d'écrire", null=True, blank=True)
     last_visit = models.DateTimeField('Date de dernière visite', null=True, blank=True)
+    use_old_smileys = models.BooleanField('Utilise les anciens smileys ?', default=False)
     _permissions = {}
     _groups = None
 
@@ -427,6 +428,33 @@ def remove_token_github_on_removing_from_dev_group(sender, instance, **kwargs):
         pass
 
 
+def remove_old_smileys_cookie(response):
+    """Remove the Clem smileys cookie by immediate expiration
+
+    :param response: the HTTP response
+    :type: django.http.response.HttpResponse
+    """
+
+    response.set_cookie(settings.ZDS_APP['member']['old_smileys_cookie_key'], '', expires=0)
+
+
+def set_old_smileys_cookie(response, profile):
+    """Set the Clem smileys cookie according to profile (and if allowed)
+
+    :param response: the HTTP response
+    :type: django.http.response.HttpResponse
+    :param profile: the profile
+    :type profile: Profile
+    """
+
+    if settings.ZDS_APP['member']['old_smileys_allowed']:
+        if profile.use_old_smileys:
+            # TODO: set max_age, expires and so all (see https://stackoverflow.com/a/1623910)
+            response.set_cookie(settings.ZDS_APP['member']['old_smileys_cookie_key'], profile.use_old_smileys)
+        else:
+            remove_old_smileys_cookie(response)
+
+
 @python_2_unicode_compatible
 class TokenForgotPassword(models.Model):
     """

zds/member/tests/tests_views.py

@@ -1452,6 +1452,79 @@ def test_remove_hat(self):
         # but check that the hat still exists in database
         self.assertTrue(Hat.objects.filter(name=hat_name).exists())
 
+    def test_old_smileys(self):
+        """Test the cookie"""
+
+        # NOTE: we have to use the "real" login and logout pages here
+        cookie_key = settings.ZDS_APP['member']['old_smileys_cookie_key']
+
+        profile_without_clem = ProfileFactory()
+        profile_without_clem = Profile.objects.get(pk=profile_without_clem.pk)
+        self.assertFalse(profile_without_clem.use_old_smileys)
+
+        user_without_clem = profile_without_clem.user
+        profile_with_clem = ProfileFactory()
+        profile_with_clem.use_old_smileys = True
+        profile_with_clem.save()
+        user_with_clem = profile_with_clem.user
+
+        settings.ZDS_APP['member']['old_smileys_allowed'] = True
+
+        # test that the cookie is set when connection
+        result = self.client.post(reverse('member-login'), {
+            'username': user_with_clem.username,
+            'password': 'hostel77',
+            'remember': 'remember'
+        }, follow=False)
+        self.assertEqual(result.status_code, 302)
+        self.client.get(reverse('homepage'))
+
+        self.assertIn(cookie_key, self.client.cookies)
+        self.assertNotEqual(self.client.cookies[cookie_key]['expires'], 0)
+
+        # test that logout set the cookies expiration to 0 (= no more cookie)
+        self.client.post(reverse('member-logout'), follow=True)
+        self.client.get(reverse('homepage'))
+        self.assertEqual(self.client.cookies[cookie_key]['expires'], 0)
+
+        # test that user without the setting have the cookie with expiration 0 (= no cookie)
+        result = self.client.post(reverse('member-login'), {
+            'username': user_without_clem.username,
+            'password': 'hostel77',
+            'remember': 'remember'
+        }, follow=False)
+
+        self.assertEqual(result.status_code, 302)
+        self.assertEqual(self.client.cookies[cookie_key]['expires'], 0)
+
+        # setting use_smileys sets the cookie
+        self.client.post(reverse('update-member'), {
+            'biography': '',
+            'site': '',
+            'avatar_url': '',
+            'sign': '',
+            'options': ['use_old_smileys']
+        })
+        self.client.get(reverse('homepage'))
+
+        profile_without_clem = Profile.objects.get(pk=profile_without_clem.pk)
+        self.assertTrue(profile_without_clem.use_old_smileys)
+        self.assertNotEqual(self.client.cookies[cookie_key]['expires'], 0)
+
+        # ... and that not setting it removes the cookie
+        self.client.post(reverse('update-member'), {
+            'biography': '',
+            'site': '',
+            'avatar_url': '',
+            'sign': '',
+            'options': []
+        })
+        self.client.get(reverse('homepage'))
+
+        profile_without_clem = Profile.objects.get(pk=profile_without_clem.pk)
+        self.assertFalse(profile_without_clem.use_old_smileys)
+        self.assertEqual(self.client.cookies[cookie_key]['expires'], 0)
+
     def test_hats_settings(self):
         hat_name = 'A hat'
         other_hat_name = 'Another hat'

zds/member/views.py

@@ -39,7 +39,7 @@
     PromoteMemberForm, KarmaForm, UsernameAndEmailForm, GitHubTokenForm, \
     BannedEmailProviderForm, HatRequestForm
 from zds.member.models import Profile, TokenForgotPassword, TokenRegister, KarmaNote, Ban, \
-    BannedEmailProvider, NewEmailProvider
+    BannedEmailProvider, NewEmailProvider, set_old_smileys_cookie, remove_old_smileys_cookie
 from zds.mp.models import PrivatePost, PrivateTopic
 from zds.notification.models import TopicAnswerSubscription, NewPublicationSubscription
 from zds.tutorialv2.models.models_database import PublishedContent, PickListOperation
@@ -121,6 +121,7 @@ def get_form(self, form_class=ProfileForm):
             'avatar_url': profile.avatar_url,
             'show_sign': profile.show_sign,
             'is_hover_enabled': profile.is_hover_enabled,
+            'use_old_smileys': profile.use_old_smileys,
             'allow_temp_visual_changes': profile.allow_temp_visual_changes,
             'show_markdown_help': profile.show_markdown_help,
             'email_for_answer': profile.email_for_answer,
@@ -147,14 +148,17 @@ def form_valid(self, form):
         self.update_profile(profile, form)
         self.save_profile(profile)
 
-        return redirect(self.get_success_url())
+        response = redirect(self.get_success_url())
+        set_old_smileys_cookie(response, profile)
+        return response
 
     def update_profile(self, profile, form):
         cleaned_data_options = form.cleaned_data.get('options')
         profile.biography = form.data['biography']
         profile.site = form.data['site']
         profile.show_sign = 'show_sign' in cleaned_data_options
         profile.is_hover_enabled = 'is_hover_enabled' in cleaned_data_options
+        profile.use_old_smileys = 'use_old_smileys' in cleaned_data_options
         profile.allow_temp_visual_changes = 'allow_temp_visual_changes' in cleaned_data_options
         profile.show_markdown_help = 'show_markdown_help' in cleaned_data_options
         profile.email_for_answer = 'email_for_answer' in cleaned_data_options
@@ -865,10 +869,16 @@ def login_view(request):
                     profile.last_ip_address = get_client_ip(request)
                     profile.save()
                     # redirect the user if needed
+                    # set the cookie for Clem smileys
+                    # (for people switching account or clearing cookies after a browser session)
                     try:
-                        return redirect(next_page)
+                        response = redirect(next_page)
+                        set_old_smileys_cookie(response, profile)
+                        return response
                     except:
-                        return redirect(reverse('homepage'))
+                        response = redirect(reverse('homepage'))
+                        set_old_smileys_cookie(response, profile)
+                        return response
                 else:
                     messages.error(request,
                                    _(u'Vous n\'êtes pas autorisé à vous connecter '
@@ -904,7 +914,10 @@ def logout_view(request):
 
     logout(request)
     request.session.clear()
-    return redirect(reverse('homepage'))
+    response = redirect(reverse('homepage'))
+    # disable Clem smileys:
+    remove_old_smileys_cookie(response)
+    return response
 
 
 def forgot_password(request):