[WIP] add user notifications and text templates

.forgejo/issue_template/bug.yml

@@ -0,0 +1,35 @@
+name: Bug Report
+about: File a bug report
+labels:
+  - Kind/Bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also tell us, what did you expect to happen?
+      placeholder: Tell us what you see!
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox (Windows)
+        - Firefox (MacOS)
+        - Firefox (Linux)
+        - Firefox (Android)
+        - Firefox (iOS)
+        - Chrome (Windows)
+        - Chrome (MacOS)
+        - Chrome (Linux)
+        - Chrome (Android)
+        - Chrome (iOS)
+        - Safari
+        - Microsoft Edge

.forgejo/issue_template/feature.yml

@@ -0,0 +1,27 @@
+name: 'New Feature'
+about: 'This template is for new features'
+labels:
+  - Kind/Feature
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before creating a Feature Ticket, please check for duplicates.
+  - type: markdown
+    attributes:
+      value: |
+        ### Implementation Checklist
+        - [ ] concept
+        - [ ] frontend
+        - [ ] backend
+        - [ ] unittests
+        - [ ] tested on staging
+    visible: [ content ]
+  - type: textarea
+    id: description
+    attributes:
+      label: 'Feature Description'
+      description: 'Explain the the feature.'
+      placeholder: Description
+    validations:
+      required: true

.forgejo/workflows/pull_request.yml

@@ -0,0 +1,20 @@
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: docker
+    container:
+      image: ghcr.io/catthehacker/ubuntu:act-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+          cache-dependency-path: '**/requirements.dev.txt'
+      - name: Install dependencies
+        working-directory: core
+        run: pip3 install -r requirements.dev.txt
+      - name: Run django tests
+        working-directory: core
+        run: python3 manage.py test

.forgejo/workflows/testing.yml

@@ -0,0 +1,60 @@
+on:
+  push:
+    branches:
+      - testing
+
+jobs:
+  test:
+    runs-on: docker
+    container:
+      image: ghcr.io/catthehacker/ubuntu:act-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+          cache-dependency-path: '**/requirements.dev.txt'
+      - name: Install dependencies
+        working-directory: core
+        run: pip3 install -r requirements.dev.txt
+      - name: Run django tests
+        working-directory: core
+        run: python3 manage.py test
+
+  deploy:
+    needs: [test]
+    runs-on: docker
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install ansible
+        run: |
+          apt update -y
+          apt install python3-pip -y
+          python3 -m pip install ansible
+          python3 -m pip install ansible-lint
+
+      - name: Populate relevant files
+        run: |
+          mkdir ~/.ssh
+          echo "${{ secrets.C3LF_SSH_TESTING }}" > ~/.ssh/id_ed25519
+          chmod 0600 ~/.ssh/id_ed25519
+          ls -lah ~/.ssh
+          command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )
+          eval $(ssh-agent -s)
+          ssh-add ~/.ssh/id_ed25519
+          echo "andromeda.lab.or.it ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIDXPoO0PE+B9PYwbGaLo98zhbmjAkp6eBtVeZe43v/+T" >> ~/.ssh/known_hosts
+          mkdir /etc/ansible
+          echo "${{ secrets.C3LF_INVENTORY_TESTING }}" > /etc/ansible/hosts
+
+      - name: Check ansible version
+        run: |
+          ansible --version
+
+      - name: List ansible hosts
+        run: |
+          ansible -m ping Andromeda
+
+      - name: Deploy testing
+        run: |
+          cd deploy/ansible
+          ansible-playbook playbooks/deploy-c3lf-sys3.yml

core/.coveragerc

@@ -0,0 +1,14 @@
+[run]
+source = .
+
+[report]
+fail_under = 100
+show_missing = True
+skip_covered = True
+omit =
+    */tests/*
+    */migrations/*
+    core/asgi.py
+    core/wsgi.py
+    core/settings.py
+    manage.py

core/authentication/api_v2.py

@@ -12,25 +12,7 @@ from knox.models import AuthToken
 from knox.views import LoginView as KnoxLoginView
 
 from authentication.models import ExtendedUser
-
+from authentication.serializers import UserSerializer, GroupSerializer
-
-class UserSerializer(serializers.ModelSerializer):
-    permissions = serializers.SerializerMethodField()
-    groups = serializers.SlugRelatedField(many=True, read_only=True, slug_field='name')
-
-    class Meta:
-        model = ExtendedUser
-        fields = ('id', 'username', 'email', 'first_name', 'last_name', 'permissions', 'groups')
-        read_only_fields = ('id', 'username', 'email', 'first_name', 'last_name', 'permissions', 'groups')
-
-    def get_permissions(self, obj):
-        return list(set(obj.get_permissions()))
-
-
-@receiver(post_save, sender=ExtendedUser)
-def create_auth_token(sender, instance=None, created=False, **kwargs):
-    if created:
-        AuthToken.objects.create(user=instance)
 
 
 class UserViewSet(viewsets.ModelViewSet):
@@ -38,26 +20,17 @@ class UserViewSet(viewsets.ModelViewSet):
     serializer_class = UserSerializer
 
 
-class GroupSerializer(serializers.ModelSerializer):
-    permissions = serializers.SerializerMethodField()
-    members = serializers.SerializerMethodField()
-
-    class Meta:
-        model = Group
-        fields = ('id', 'name', 'permissions', 'members')
-
-    def get_permissions(self, obj):
-        return ["*:" + p.codename for p in obj.permissions.all()]
-
-    def get_members(self, obj):
-        return [u.username for u in obj.user_set.all()]
-
-
 class GroupViewSet(viewsets.ModelViewSet):
     queryset = Group.objects.all()
     serializer_class = GroupSerializer
 
 
+@receiver(post_save, sender=ExtendedUser)
+def create_auth_token(sender, instance=None, created=False, **kwargs):
+    if created:
+        AuthToken.objects.create(user=instance)
+
+
 @api_view(['GET'])
 @permission_classes([IsAuthenticated])
 def selfUser(request):

core/authentication/serializers.py

@@ -0,0 +1,32 @@
+from rest_framework import serializers
+from django.contrib.auth.models import Group
+
+from authentication.models import ExtendedUser
+
+
+class UserSerializer(serializers.ModelSerializer):
+    permissions = serializers.SerializerMethodField()
+    groups = serializers.SlugRelatedField(many=True, read_only=True, slug_field='name')
+
+    class Meta:
+        model = ExtendedUser
+        fields = ('id', 'username', 'email', 'first_name', 'last_name', 'permissions', 'groups')
+        read_only_fields = ('id', 'username', 'email', 'first_name', 'last_name', 'permissions', 'groups')
+
+    def get_permissions(self, obj):
+        return list(set(obj.get_permissions()))
+
+
+class GroupSerializer(serializers.ModelSerializer):
+    permissions = serializers.SerializerMethodField()
+    members = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Group
+        fields = ('id', 'name', 'permissions', 'members')
+
+    def get_permissions(self, obj):
+        return ["*:" + p.codename for p in obj.permissions.all()]
+
+    def get_members(self, obj):
+        return [u.username for u in obj.user_set.all()]

core/core/settings.py

@@ -15,6 +15,9 @@ import sys
 import dotenv
 from pathlib import Path
 
+def truthy_str(s):
+    return s.lower() in ['true', '1', 't', 'y', 'yes', 'yeah', 'yup', 'certainly', 'sure', 'positive', 'uh-huh', '👍']
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
@@ -24,12 +27,14 @@ dotenv.load_dotenv(BASE_DIR / '.env')
 # See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = 'django-insecure-tm*$w_14iqbiy-!7(8#ba7j+_@(7@rf2&a^!=shs&$03b%2*rv'
+SECRET_KEY = os.getenv('DJANGO_SECRET_KEY', 'django-insecure-tm*$w_14iqbiy-!7(8#ba7j+_@(7@rf2&a^!=shs&$03b%2*rv')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+DEBUG = truthy_str(os.getenv('DEBUG_MODE_ACTIVE', 'False'))
 
-ALLOWED_HOSTS = [os.getenv('HTTP_HOST', 'localhost')]
+PRIMARY_HOST = os.getenv('HTTP_HOST', 'localhost')
+
+ALLOWED_HOSTS = [PRIMARY_HOST]
 
 MAIL_DOMAIN = os.getenv('MAIL_DOMAIN', 'localhost')
 
@@ -40,6 +45,12 @@ LEGACY_USER_PASSWORD = os.getenv('LEGACY_API_PASSWORD', 'legacy_password')
 
 SYSTEM3_VERSION = "0.0.0-dev.0"
 
+ACTIVE_SPAM_TRAINING = truthy_str(os.getenv('ACTIVE_SPAM_TRAINING', 'False'))
+
+TELEGRAM_BOT_TOKEN = os.getenv('TELEGRAM_BOT_TOKEN', '1234567890:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghi')
+
+TELEGRAM_GROUP_CHAT_ID = os.getenv('TELEGRAM_GROUP_CHAT_ID', '-1234567890')
+
 # Application definition
 
 INSTALLED_APPS = [
@@ -50,11 +61,13 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'django_extensions',
+    'django_prometheus',
     'rest_framework',
     'knox',
     'drf_yasg',
     'channels',
     'authentication',
+    'notifications',
     'files',
     'tickets',
     'inventory',
@@ -85,6 +98,7 @@ SWAGGER_SETTINGS = {
 }
 
 MIDDLEWARE = [
+    'django_prometheus.middleware.PrometheusBeforeMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -92,6 +106,7 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'django_prometheus.middleware.PrometheusAfterMiddleware',
 ]
 
 ROOT_URLCONF = 'core.urls'
@@ -204,10 +219,12 @@ CHANNEL_LAYERS = {
     'default': {
         'BACKEND': 'channels_redis.core.RedisChannelLayer',
         'CONFIG': {
-            'hosts': [('localhost', 6379)],
+            'hosts': [(os.getenv('REDIS_HOST', 'localhost'), 6379)],
         },
     }
 
 }
 
+PROMETHEUS_METRIC_NAMESPACE = 'c3lf'
+
 TEST_RUNNER = 'core.test_runner.FastTestRunner'

core/core/urls.py

@@ -31,5 +31,7 @@ urlpatterns = [
     path('api/2/', include('mail.api_v2')),
     path('api/2/', include('notify_sessions.api_v2')),
     path('api/2/', include('authentication.api_v2')),
+    path('api/2/', include('notifications.api_v2')),
     path('api/', get_info),
+    path('', include('django_prometheus.urls')),
 ]

core/inventory/serializers.py

@@ -3,12 +3,21 @@ from rest_framework import serializers
 
 from files.models import File
 from inventory.models import Event, Container, Item
+from mail.models import EventAddress
+
+
+class EventAdressSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = EventAddress
+        fields = ['address']
 
 
 class EventSerializer(serializers.ModelSerializer):
+    addresses = EventAdressSerializer(many=True, required=False)
+
     class Meta:
         model = Event
-        fields = ['eid', 'slug', 'name', 'start', 'end', 'pre_start', 'post_end']
+        fields = ['eid', 'slug', 'name', 'start', 'end', 'pre_start', 'post_end', 'addresses']
         read_only_fields = ['eid']
 
 

core/inventory/tests/v2/test_events.py

@@ -54,3 +54,15 @@ class EventTestCase(TestCase):
         response = client.delete(f'/api/2/events/{event.eid}/')
         self.assertEqual(response.status_code, 204)
         self.assertEqual(len(Event.objects.all()), 1)
+
+    def test_items2(self):
+        from mail.models import EventAddress
+        event1 = Event.objects.create(slug='TEST1', name='Event')
+        EventAddress.objects.create(event=Event.objects.get(slug='TEST1'), address='foo@bar.baz')
+        response = self.client.get('/api/2/events/')
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(1, len(response.json()))
+        self.assertEqual('TEST1', response.json()[0]['slug'])
+        self.assertEqual('Event', response.json()[0]['name'])
+        self.assertEqual(1, len(response.json()[0]['addresses']))
+

core/mail/migrations/0005_alter_eventaddress_event.py

@@ -0,0 +1,20 @@
+# Generated by Django 4.2.7 on 2024-11-03 18:30
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('inventory', '0004_alter_event_created_at_alter_item_created_at'),
+        ('mail', '0004_alter_emailattachment_file'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='eventaddress',
+            name='event',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='addresses', to='inventory.event'),
+        ),
+    ]

core/mail/migrations/0006_email_raw_file.py

@@ -0,0 +1,36 @@
+# Generated by Django 4.2.7 on 2024-11-08 20:37
+from django.core.files.base import ContentFile
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('mail', '0005_alter_eventaddress_event'),
+    ]
+
+    def move_raw_mails_to_file(apps, schema_editor):
+        Email = apps.get_model('mail', 'Email')
+        for email in Email.objects.all():
+            raw_content = email.raw
+            path = "mail_{}".format(email.id)
+            if len(raw_content):
+                email.raw_file.save(path, ContentFile(raw_content))
+            email.save()
+
+    operations = [
+        migrations.AddField(
+            model_name='email',
+            name='raw_file',
+            field=models.FileField(null=True, upload_to='raw_mail/'),
+        ),
+        migrations.RunPython(move_raw_mails_to_file),
+        migrations.RemoveField(
+            model_name='email',
+            name='raw',
+        ),
+        migrations.AlterField(
+            model_name='email',
+            name='raw_file',
+            field=models.FileField(upload_to='raw_mail/'),
+        ),
+    ]

core/mail/models.py

@@ -3,7 +3,7 @@ import random
 from django.db import models
 from django_softdelete.models import SoftDeleteModel
 
-from core.settings import MAIL_DOMAIN
+from core.settings import MAIL_DOMAIN, ACTIVE_SPAM_TRAINING
 from files.models import AbstractFile
 from inventory.models import Event
 from tickets.models import IssueThread
@@ -18,7 +18,7 @@ class Email(SoftDeleteModel):
     recipient = models.CharField(max_length=255)
     reference = models.CharField(max_length=255, null=True, unique=True)
     in_reply_to = models.CharField(max_length=255, null=True)
-    raw = models.TextField()
+    raw_file = models.FileField(upload_to='raw_mail/')
     issue_thread = models.ForeignKey(IssueThread, models.SET_NULL, null=True, related_name='emails')
     event = models.ForeignKey(Event, models.SET_NULL, null=True)
 
@@ -28,10 +28,22 @@ class Email(SoftDeleteModel):
             self.reference = f'<{random.randint(0, 1000000000):09}@{MAIL_DOMAIN}>'
             self.save()
 
+    def train_spam(self):
+        if ACTIVE_SPAM_TRAINING:
+            import subprocess
+            path = self.raw_file.path
+            subprocess.run(["rspamc", "learn_spam", path])
+
+    def train_ham(self):
+        if ACTIVE_SPAM_TRAINING:
+            import subprocess
+            path = self.raw_file.path
+            subprocess.run(["rspamc", "learn_ham", path])
+
 
 class EventAddress(models.Model):
     id = models.AutoField(primary_key=True)
-    event = models.ForeignKey(Event, models.SET_NULL, null=True)
+    event = models.ForeignKey(Event, models.SET_NULL, null=True, related_name='addresses')
     address = models.CharField(max_length=255)
 
 

core/mail/protocol.py

@@ -1,4 +1,5 @@
 import logging
+from re import match
 
 import aiosmtplib
 from channels.layers import get_channel_layer
@@ -6,10 +7,15 @@ from channels.db import database_sync_to_async
 from django.core.files.base import ContentFile
 
 from mail.models import Email, EventAddress, EmailAttachment
+from notifications.templates import render_auto_reply
 from notify_sessions.models import SystemEvent
 from tickets.models import IssueThread
 
 
+class SpecialMailException(Exception):
+    pass
+
+
 def find_quoted_printable(s, marker):
     positions = [i for i in range(len(s)) if s.lower().startswith('=?utf-8?' + marker + '?', i)]
     for pos in positions:
@@ -82,6 +88,22 @@ def make_reply(reply_email, references=None, event=None):
     return reply
 
 
+def make_notification(message, to, title):  # TODO where should replies to this go
+    from email.message import EmailMessage
+    from core.settings import MAIL_DOMAIN
+    notification = EmailMessage()
+    notification["From"] = "notifications@%s" % MAIL_DOMAIN
+    notification["To"] = to
+    notification["Subject"] = f"[C3LF Notification]%s" % title
+    # notification["Reply-To"] = f"{event}@{MAIL_DOMAIN}"
+    # notification["In-Reply-To"] = email.reference
+    # notification["Message-ID"] = email.id + "@" + MAIL_DOMAIN
+
+    notification.set_content(message)
+
+    return notification
+
+
 async def send_smtp(message):
     await aiosmtplib.send(message, hostname="127.0.0.1", port=25, use_tls=False, start_tls=False)
 
@@ -180,13 +202,13 @@ def receive_email(envelope, log=None):
     header_in_reply_to = parsed.get('In-Reply-To')
     header_message_id = parsed.get('Message-ID')
 
-    if header_from != envelope.mail_from:
+    if match(r'^([a-zA-Z ]*<)?MAILER-DAEMON@', header_from) and envelope.mail_from.strip("<>") == "":
-        log.warning("Header from does not match envelope from")
+        log.warning("Ignoring mailer daemon")
-        log.info(f"Header from: {header_from}, envelope from: {envelope.mail_from}")
+        raise SpecialMailException("Ignoring mailer daemon")
 
-    if header_to != envelope.rcpt_tos[0]:
+    if Email.objects.filter(reference=header_message_id).exists():  # break before issue thread is created
-        log.warning("Header to does not match envelope to")
+        log.warning("Email already exists")
-        log.info(f"Header to: {header_to}, envelope to: {envelope.rcpt_tos[0]}")
+        raise Exception("Email already exists")
 
     recipient = envelope.rcpt_tos[0].lower() if envelope.rcpt_tos else header_to.lower()
     sender = envelope.mail_from if envelope.mail_from else header_from
@@ -201,7 +223,7 @@ def receive_email(envelope, log=None):
 
     email = Email.objects.create(
         sender=sender, recipient=recipient, body=body, subject=subject, reference=header_message_id,
-        in_reply_to=header_in_reply_to, raw=envelope.content, event=target_event,
+        in_reply_to=header_in_reply_to, raw_file=ContentFile(envelope.content), event=target_event,
         issue_thread=active_issue_thread)
     for attachment in attachments:
         email.attachments.add(attachment)
@@ -213,16 +235,7 @@ def receive_email(envelope, log=None):
         references = collect_references(active_issue_thread)
         if not sender.startswith('noreply'):
             subject = f"Re: {subject} [#{active_issue_thread.short_uuid()}]"
-            body = '''Your request (#{}) has been received and will be reviewed by our lost&found angels.
+            body = render_auto_reply(active_issue_thread)
-
-We are reviewing incoming requests during the event and teardown. Immediately after the event, expect a delay as the \
-workload is high. We will not forget about your request and get back in touch once we have updated information on your \
-request. Requests for devices, wallets, credit cards or similar items will be handled with priority.
-
-If you happen to find your lost item or just want to add additional information, please reply to this email. Please \
-do not create a new request.
-
-Your c3lf (Cloakroom + Lost&Found) Team'''.format(active_issue_thread.short_uuid())
             reply_email = Email.objects.create(
                 sender=recipient, recipient=sender, body=body, subject=subject,
                 in_reply_to=header_message_id, event=target_event, issue_thread=active_issue_thread)
@@ -233,7 +246,7 @@ Your c3lf (Cloakroom + Lost&Found) Team'''.format(active_issue_thread.short_uuid
             active_issue_thread.state = 'pending_open'
             active_issue_thread.save()
 
-    return email, new, reply
+    return email, new, reply, active_issue_thread
 
 
 class LMTPHandler:
@@ -255,7 +268,7 @@ class LMTPHandler:
         content = None
         try:
             content = envelope.content
-            email, new, reply = await receive_email(envelope, log)
+            email, new, reply, thread = await receive_email(envelope, log)
             log.info(f"Created email {email.id}")
             systemevent = await database_sync_to_async(SystemEvent.objects.create)(type='email received',
                                                                                    reference=email.id)
@@ -263,14 +276,28 @@ class LMTPHandler:
             channel_layer = get_channel_layer()
             await channel_layer.group_send(
                 'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
-                            "message": "email received"}
+                            "message": "email received"})
-            )
             log.info(f"Sent message to frontend")
+
             if new and reply:
                 log.info('Sending message to %s' % reply['To'])
                 await send_smtp(reply)
                 log.info("Sent auto reply")
 
+            if thread:
+                await channel_layer.group_send(
+                    'general', {"type": "generic.event", "name": "user_notification", "event_id": systemevent.id,
+                                "ticket_id": thread.id, "new": new})
+            else:
+                print("No thread found")
+
+            return '250 Message accepted for delivery'
+        except SpecialMailException as e:
+            import uuid
+            random_filename = 'special-' + str(uuid.uuid4())
+            with open(random_filename, 'wb') as f:
+                f.write(content)
+            log.warning(f"Special mail exception: {e} saved to {random_filename}")
             return '250 Message accepted for delivery'
         except Exception as e:
             from hashlib import sha256

core/mail/tests/v2/test_mails.py

@@ -760,7 +760,6 @@ dGVzdGltYWdl
         response = self.client.post(f'/api/2/tickets/{issue_thread.id}/reply/', {
             'message': 'test'
         })
-        aiosmtplib.send.assert_called_once()
         self.assertEqual(response.status_code, 201)
         self.assertEqual(5, len(Email.objects.all()))
         self.assertEqual(5, len(Email.objects.filter(issue_thread=issue_thread)))
@@ -776,6 +775,7 @@ dGVzdGltYWdl
         self.assertEqual('test subject', IssueThread.objects.all()[0].name)
         self.assertEqual('pending_new', IssueThread.objects.all()[0].state)
         self.assertEqual(None, IssueThread.objects.all()[0].assigned_to)
+        aiosmtplib.send.assert_called_once()
 
     def test_mail_4byte_unicode_emoji(self):
         from aiosmtpd.smtp import Envelope

core/mail/tests/v2/test_user_notifications.py

@@ -0,0 +1,20 @@
+from django.contrib.auth.models import Permission
+from django.test import TestCase
+
+from authentication.models import ExtendedUser
+from notifications.models import UserNotificationChannel
+
+
+class UserNotificationTestCase(TestCase):
+
+    def setUp(self):
+        super().setUp()
+        self.user = ExtendedUser.objects.create_user('testuser', 'test', 'test')
+        self.user.user_permissions.add(*Permission.objects.all())
+        self.user.save()
+        self.channel = UserNotificationChannel.objects.create(user=self.user, channel_type='telegram',
+                                                              channel_target='123456789',
+                                                              event_filter='*', active=True)
+
+    async def test_telegram_notify(self):
+        pass

core/notifications/admin.py

@@ -0,0 +1,15 @@
+from django.contrib import admin
+
+from notifications.models import MessageTemplate, UserNotificationChannel
+
+
+class MessageTemplateAdmin(admin.ModelAdmin):
+    pass
+
+
+class UserNotificationChannelAdmin(admin.ModelAdmin):
+    pass
+
+
+admin.site.register(MessageTemplate, MessageTemplateAdmin)
+admin.site.register(UserNotificationChannel, UserNotificationChannelAdmin)

core/notifications/api_v2.py

@@ -0,0 +1,51 @@
+from django.contrib.auth.decorators import permission_required
+from rest_framework import routers, viewsets
+from django.urls import re_path
+from rest_framework.decorators import api_view, permission_classes
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+
+from notifications.models import MessageTemplate, UserNotificationChannel
+from rest_framework import serializers
+
+from notifications.templates import TEMPLATE_VARS
+from authentication.serializers import UserSerializer
+
+
+class MessageTemplateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = MessageTemplate
+        fields = '__all__'
+
+
+class UserNotificationChannelSerializer(serializers.ModelSerializer):
+    user = UserSerializer()
+
+    class Meta:
+        model = UserNotificationChannel
+        fields = '__all__'
+
+
+class MessageTemplateViewSet(viewsets.ModelViewSet):
+    serializer_class = MessageTemplateSerializer
+    queryset = MessageTemplate.objects.all()
+
+
+class UserNotificationChannelViewSet(viewsets.ModelViewSet):
+    serializer_class = UserNotificationChannelSerializer
+    queryset = UserNotificationChannel.objects.all()
+
+
+@api_view(['GET'])
+@permission_classes([IsAuthenticated])
+@permission_required('tickets.add_issuethread_manual', raise_exception=True)  # TDOO: change this permission
+def get_template_vars(self):
+    return Response(TEMPLATE_VARS, status=200)
+
+
+router = routers.SimpleRouter()
+router.register(r'message_templates', MessageTemplateViewSet)
+router.register(r'user_notification_channels', UserNotificationChannelViewSet)
+urlpatterns = ([
+                   re_path('message_template_variables', get_template_vars),
+               ] + router.urls)

core/notifications/defaults.py

@@ -0,0 +1,16 @@
+auto_reply_body = '''Your request (#{{ ticket_uuid }}) has been received and will be reviewed by our lost&found angels.
+
+We are reviewing incoming requests during the event and teardown. Immediately after the event, expect a delay as the \
+workload is high. We will not forget about your request and get back in touch once we have updated information on your \
+request. Requests for devices, wallets, credit cards or similar items will be handled with priority.
+
+If you happen to find your lost item or just want to add additional information, please reply to this email. Please \
+do not create a new request.
+
+Your c3lf (Cloakroom + Lost&Found) Team'''
+
+new_issue_notification = '''New issue "{{ ticket_name | limit_length }}" [{{ ticket_uuid }}] created
+{{ ticket_url }}'''
+
+reply_issue_notification = '''Reply to issue "{{ ticket_name }}" [{{ ticket_uuid }}] (was {{ previous_state_pretty }})
+{{ ticket_url }}'''

core/notifications/dispatch.py

@@ -0,0 +1,85 @@
+import asyncio
+
+from aiohttp.client import ClientSession
+from channels.layers import get_channel_layer
+from channels.db import database_sync_to_async
+from urllib.parse import quote as urlencode
+
+from core.settings import TELEGRAM_BOT_TOKEN, TELEGRAM_GROUP_CHAT_ID
+from mail.protocol import send_smtp, make_notification
+from notifications.models import UserNotificationChannel
+from notifications.templates import render_notification_new_ticket_async, render_notification_reply_ticket_async
+from tickets.models import IssueThread
+
+
+async def http_get(url):
+    async with ClientSession() as session:
+        async with session.get(url) as response:
+            return await response.text()
+
+
+async def telegram_notify(message, chat_id):
+    encoded_message = urlencode(message)
+    url = f"https://api.telegram.org/bot{TELEGRAM_BOT_TOKEN}/sendMessage?chat_id={chat_id}&text={encoded_message}"
+    return await http_get(url)
+
+
+async def email_notify(message, title, email):
+    mail = make_notification(message, email, title)
+    await send_smtp(mail)
+
+
+class NotificationDispatcher:
+    channel_layer = None
+    room_group_name = "general"
+
+    def __init__(self):
+        self.channel_layer = get_channel_layer('default')
+        if not self.channel_layer:
+            raise Exception("Could not get channel layer")
+
+    @database_sync_to_async
+    def get_notification_targets(self):
+        channels = UserNotificationChannel.objects.filter(active=True)
+        return list(channels)
+
+    @database_sync_to_async
+    def get_ticket(self, ticket_id):
+        return IssueThread.objects.filter(id=ticket_id).select_related('event').first()
+
+    async def run_forever(self):
+        # Infinite loop to continuously listen for messages
+        print("Listening for messages...")
+        channel_name = await self.channel_layer.new_channel()
+        await self.channel_layer.group_add(self.room_group_name, channel_name)
+        print("Channel name:", channel_name)
+        while True:
+            # Blocking receive to get the message from the channel layer
+            message = await self.channel_layer.receive(channel_name)
+
+            if (message and 'type' in message and message['type'] == 'generic.event' and 'name' in message and
+                    message['name'] == 'user_notification'):
+                if 'ticket_id' in message and 'event_id' in message and 'new' in message:
+                    ticket = await self.get_ticket(message['ticket_id'])
+                    await self.dispatch(ticket, message['event_id'], message['new'])
+                else:
+                    print("Error: Invalid message format")
+
+    async def dispatch(self, ticket, event_id, new):
+        message = await render_notification_new_ticket_async(
+            ticket) if new else await render_notification_reply_ticket_async(ticket)
+        title = f"[#{ticket.short_uuid()}] {ticket.name}"
+        print("Dispatching message:", message, "with event_id:", event_id)
+        targets = await self.get_notification_targets()
+        jobs = []
+        jobs.append(telegram_notify(message, TELEGRAM_GROUP_CHAT_ID))
+        for target in targets:
+            if target.channel_type == 'telegram':
+                print("Sending telegram notification to:", target.channel_target)
+                jobs.append(telegram_notify(message, target.channel_target))
+            elif target.channel_type == 'email':
+                print("Sending email notification to:", target.channel_target)
+                jobs.append(email_notify(message, title, target.channel_target))
+            else:
+                print("Unknown channel type:", target.channel_type)
+        await asyncio.gather(*jobs)

core/notifications/migrations/0001_initial.py

@@ -0,0 +1,51 @@
+# Generated by Django 4.2.7 on 2024-05-03 21:02
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+from notifications.defaults import auto_reply_body, new_issue_notification, reply_issue_notification
+from notifications.models import MessageTemplate
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    def create_required_templates(apps, schema_editor):
+        MessageTemplate.objects.create(name='auto_reply', message=auto_reply_body, marked_required=True)
+        MessageTemplate.objects.create(name='new_issue_notification', message=new_issue_notification,
+                                       marked_required=True)
+        MessageTemplate.objects.create(name='reply_issue_notification', message=reply_issue_notification,
+                                       marked_required=True)
+
+    operations = [
+        migrations.CreateModel(
+            name='MessageTemplate',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=255)),
+                ('message', models.TextField()),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('marked_confidential', models.BooleanField(default=False)),
+                ('marked_required', models.BooleanField(default=False)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='UserNotificationChannel',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('channel_type',
+                 models.CharField(choices=[('telegram', 'telegram'), ('email', 'email')], max_length=255)),
+                ('channel_target', models.CharField(max_length=255)),
+                ('event_filter', models.CharField(max_length=255)),
+                ('active', models.BooleanField(default=True)),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.RunPython(create_required_templates),
+    ]

core/notifications/models.py

@@ -0,0 +1,29 @@
+from django.db import models
+
+from authentication.models import ExtendedUser
+
+
+class MessageTemplate(models.Model):
+    name = models.CharField(max_length=255)
+    message = models.TextField()
+    created = models.DateTimeField(auto_now_add=True)
+    marked_confidential = models.BooleanField(default=False)
+    marked_required = models.BooleanField(default=False)  # may not be deleted
+
+    def __str__(self):
+        return self.name
+
+
+class UserNotificationChannel(models.Model):
+    user = models.ForeignKey(ExtendedUser, models.CASCADE)
+    channel_type = models.CharField(choices=[('telegram', 'telegram'), ('email', 'email')], max_length=255)
+    channel_target = models.CharField(max_length=255)
+    event_filter = models.CharField(max_length=255)
+    active = models.BooleanField(default=True)
+    created = models.DateTimeField(auto_now_add=True)
+
+    def validate_constraints(self, exclude=None):  # TODO: email -> emailaddress, telegram -> chatid
+        return True
+
+    def __str__(self):
+        return self.user.username + '(' + self.channel_type + ')'

core/notifications/templates.py

@@ -0,0 +1,69 @@
+import jinja2
+from channels.db import database_sync_to_async
+from core.settings import PRIMARY_HOST
+
+from notifications.models import MessageTemplate
+
+TEMPLATE_VARS = ['ticket_name', 'ticket_uuid', 'ticket_id', 'ticket_url',
+                'current_state', 'previous_state', 'current_state_pretty', 'previous_state_pretty',
+                'event_slug', 'event_name',
+                'username', 'user_nick',
+                'web_host']  # TODO customer_name, tracking_code
+
+
+def limit_length(s, length=50):
+    if len(s) > length:
+        return s[:(length - 3)] + "..."
+    return s
+
+
+def ticket_url(ticket):
+    eventslug = ticket.event.slug if ticket.event else "37C3"  # TODO 37C3 should not be hardcoded
+    return f"https://{PRIMARY_HOST}/{eventslug}/ticket/{ticket.id}/"
+
+
+def render_template(template, **kwargs):
+    try:
+        environment = jinja2.Environment()
+        environment.filters['limit_length'] = limit_length
+        tmpl = MessageTemplate.objects.get(name=template)
+        template = environment.from_string(tmpl.message)
+        return template.render(**kwargs, web_host=PRIMARY_HOST)
+    except MessageTemplate.DoesNotExist:
+        return None
+
+
+def get_ticket_vars(ticket):
+    states = list(ticket.state_changes.order_by('-timestamp'))
+    return {
+        'ticket_name': ticket.name,
+        'ticket_uuid': ticket.short_uuid(),
+        'ticket_id': ticket.id,
+        'ticket_url': ticket_url(ticket),
+        'current_state': states[0].state if states else 'none',
+        'previous_state': states[1].state if len(states) > 1 else 'none',
+        'current_state_pretty': states[0].get_state_display() if states else 'none',
+        'previous_state_pretty': states[1].get_state_display() if len(states) > 1 else 'none',
+        'event_slug': ticket.event.slug if ticket.event else "37C3",  # TODO 37C3 should not be hardcoded
+        'event_name': ticket.event.name if ticket.event else "37C3",
+    }
+
+
+def render_auto_reply(ticket):
+    return render_template('auto_reply', **get_ticket_vars(ticket))
+
+
+def render_notification_new_ticket(ticket):
+    return render_template('new_issue_notification', **get_ticket_vars(ticket))
+
+
+def render_notification_reply_ticket(ticket):
+    return render_template('reply_issue_notification', **get_ticket_vars(ticket))
+
+
+async def render_notification_new_ticket_async(ticket):
+    return await database_sync_to_async(render_notification_new_ticket)(ticket)
+
+
+async def render_notification_reply_ticket_async(ticket):
+    return await database_sync_to_async(render_notification_reply_ticket)(ticket)

core/requirements.dev.txt

@@ -1,3 +1,6 @@
+aiodns==3.2.0
+aiohttp==3.9.5
+aiosignal==1.3.1
 aiosmtpd==1.4.4.post2
 aiosmtplib==3.0.1
 anyio==4.1.0
@@ -28,6 +31,7 @@ django-rest-knox==4.2.0
 django-soft-delete==0.9.21
 djangorestframework==3.14.0
 drf-yasg==1.21.7
+frozenlist==1.4.1
 h11==0.14.0
 hyperlink==21.0.0
 idna==3.4
@@ -38,11 +42,13 @@ Jinja2==3.1.2
 MarkupSafe==2.1.3
 msgpack==1.0.7
 msgpack-python==0.5.6
+multidict==6.0.5
 openapi-codec==1.3.2
 packaging==23.2
 Pillow==10.1.0
 pyasn1==0.5.1
 pyasn1-modules==0.3.0
+pycares==4.4.0
 pycparser==2.21
 pyOpenSSL==23.3.0
 python-dotenv==1.0.0
@@ -65,4 +71,7 @@ urllib3==2.1.0
 uvicorn==0.24.0.post1
 watchfiles==0.21.0
 websockets==12.0
+yarl==1.9.4
 zope.interface==6.1
+django-prometheus==2.3.1
+prometheus_client==0.21.0

core/requirements.prod.txt

@@ -1,3 +1,6 @@
+aiodns==3.2.0
+aiohttp==3.9.5
+aiosignal==1.3.1
 aiosmtpd==1.4.4.post2
 aiosmtplib==3.0.1
 asgiref==3.7.2
@@ -38,3 +41,5 @@ urllib3==2.1.0
 uvicorn==0.24.0.post1
 watchfiles==0.21.0
 websockets==12.0
+django-prometheus==2.3.1
+prometheus_client==0.21.0

core/server.py

@@ -12,6 +12,7 @@ django.setup()
 from helper import init_loop
 from mail.protocol import LMTPHandler
 from mail.socket import UnixSocketLMTPController
+from notifications.dispatch import NotificationDispatcher
 
 
 class UvicornServer(uvicorn.Server):
@@ -54,6 +55,11 @@ async def lmtp(loop):
     log.info("LMTP done")
 
 
+async def notifications(loop):
+    dispatcher = NotificationDispatcher()
+    await dispatcher.run_forever()
+
+
 def main():
     import sdnotify
     import setproctitle
@@ -67,6 +73,7 @@ def main():
     loop.create_task(web(loop))
     #    loop.create_task(tcp(loop))
     loop.create_task(lmtp(loop))
+    loop.create_task(notifications(loop))
     n = sdnotify.SystemdNotifier()
     n.notify("READY=1")
     log.info("Server ready")

core/tickets/api_v2.py

@@ -10,6 +10,7 @@ from asgiref.sync import async_to_sync
 from channels.layers import get_channel_layer
 
 from core.settings import MAIL_DOMAIN
+from inventory.models import Event
 from mail.models import Email
 from mail.protocol import send_smtp, make_reply, collect_references
 from notify_sessions.models import SystemEvent

core/tickets/migrations/0011_train_old_spam.py

@@ -0,0 +1,31 @@
+# Generated by Django 4.2.7 on 2024-06-23 02:17
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('mail', '0006_email_raw_file'),
+        ('tickets', '0010_issuethread_event_itemrelation_and_more'),
+    ]
+
+    def train_old_mails(apps, schema_editor):
+        from tickets.models import IssueThread
+        for t in IssueThread.objects.all():
+            try:
+                state = t.state
+                i = 0
+                for e in t.emails.all():
+                    if e.raw_file:
+                        if state == 'closed_spam' and i == 0:
+                            e.train_spam()
+                        else:
+                            e.train_ham()
+                    i += 1
+            except:
+                pass
+
+    operations = [
+        migrations.RunPython(train_old_mails),
+    ]

core/tickets/models.py

@@ -60,6 +60,8 @@ class IssueThread(SoftDeleteModel):
         if self.state == value:
             return
         self.state_changes.create(state=value)
+        if value == 'closed_spam' and self.emails.exists():
+            self.emails.first().train_spam()
 
     @property
     def assigned_to(self):

deploy/ansible/inventory.yml.sample

@@ -12,3 +12,5 @@ c3lf-nodes:
       main_email: <main_email>
       legacy_api_user: <legacy_api_user>
       legacy_api_password: <legacy_api_password>
+      debug_mode_active: false
+      django_secret_key: 'django-insecure-tm*$w_14iqbiy-!7(8#ba7j+_@(7@rf2&a^!=shs&$03b%2*rv'

deploy/ansible/playbooks/templates/django.env.j2

@@ -1,3 +1,4 @@
+REDIS_HOST=localhost
 DB_HOST=localhost
 DB_PORT=3306
 DB_NAME=c3lf_sys3
@@ -9,3 +10,8 @@ LEGACY_API_USER={{ legacy_api_user }}
 LEGACY_API_PASSWORD={{ legacy_api_password }}
 MEDIA_ROOT=/var/www/c3lf-sys3/userfiles
 STATIC_ROOT=/var/www/c3lf-sys3/staticfiles
+ACTIVE_SPAM_TRAINING=True
+DEBUG_MODE_ACTIVE={{ debug_mode_active }}
+DJANGO_SECRET_KEY={{ django_secret_key }}
+TELEGRAM_GROUP_CHAT_ID={{ telegram_group_chat_id }}
+TELEGRAM_BOT_TOKEN={{ telegram_bot_token }}

deploy/ansible/playbooks/templates/nginx.conf.j2

@@ -70,6 +70,13 @@ server {
         alias /var/www/c3lf-sys3/staticfiles/;
     }
 
+    location /metrics {
+        allow 95.156.226.90;
+        allow 127.0.0.1;
+        allow ::1;
+        deny all;
+    }
+
     listen 443 ssl http2; # managed by Certbot
     ssl_certificate /etc/letsencrypt/live/{{ web_domain }}/fullchain.pem; # managed by Certbot
     ssl_certificate_key /etc/letsencrypt/live/{{ web_domain }}/privkey.pem; # managed by Certbot

deploy/dev/Dockerfile.backend

@@ -0,0 +1,13 @@
+FROM python:3.11-bookworm
+LABEL authors="lagertonne"
+
+ENV PYTHONUNBUFFERED 1
+RUN mkdir /code
+WORKDIR /code
+COPY requirements.dev.txt /code/
+COPY requirements.prod.txt /code/
+RUN apt update && apt install -y mariadb-client
+RUN pip install -r requirements.dev.txt
+RUN pip install -r requirements.prod.txt
+RUN pip install mysqlclient
+COPY .. /code/

deploy/dev/Dockerfile.frontend

@@ -0,0 +1,6 @@
+FROM docker.io/node:22
+
+RUN mkdir /web
+WORKDIR /web
+COPY package.json /web/
+RUN npm install

deploy/dev/docker-compose.yml

@@ -0,0 +1,48 @@
+services:
+  core:
+    build:
+      context: ../../core
+      dockerfile: ../deploy/dev/Dockerfile.backend
+    command: bash -c 'python manage.py migrate && python manage.py runserver 0.0.0.0:8000'
+    environment:
+      - HTTP_HOST=core
+      - DB_HOST=db
+      - DB_PORT=3306
+      - DB_NAME=system3
+      - DB_USER=system3
+      - DB_PASSWORD=system3
+    volumes:
+      - ../../core:/code
+    ports:
+      - "8000:8000"
+    depends_on:
+      - db
+
+  frontend:
+    build:
+      context: ../../web
+      dockerfile: ../deploy/dev/Dockerfile.frontend
+    command: npm run serve
+    volumes:
+      - ../../web:/web:ro
+      - /web/node_modules
+      - ./vue.config.js:/web/vue.config.js
+    ports:
+      - "8080:8080"
+    depends_on:
+      - core
+
+  db:
+    image: mariadb
+    environment:
+      MARIADB_RANDOM_ROOT_PASSWORD: true
+      MARIADB_DATABASE: system3
+      MARIADB_USER: system3
+      MARIADB_PASSWORD: system3
+    volumes:
+      - mariadb_data:/var/lib/mysql
+    ports:
+      - "3306:3306"
+
+volumes:
+  mariadb_data:

deploy/dev/vue.config.js

@@ -0,0 +1,27 @@
+// vue.config.js
+
+module.exports = {
+    devServer: {
+        headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Headers": "*",
+            "Access-Control-Allow-Methods": "*"
+        },
+        proxy: {
+            '^/media/2': {
+                target: 'http://core:8000/',
+            },
+            '^/api/2': {
+                target: 'http://core:8000/',
+            },
+            '^/api/1': {
+                target: 'http://core:8000/',
+            },
+            '^/ws/2': {
+                target: 'http://core:8000/',
+                ws: true,
+                logLevel: 'debug',
+            },
+        }
+    }
+}

deploy/testing/Dockerfile.backend

@@ -0,0 +1,11 @@
+FROM python:3.11-bookworm
+LABEL authors="lagertonne"
+
+ENV PYTHONUNBUFFERED 1
+RUN mkdir /code
+WORKDIR /code
+COPY requirements.prod.txt /code/
+RUN apt update && apt install -y mariadb-client
+RUN pip install -r requirements.prod.txt
+RUN pip install mysqlclient
+COPY .. /code/

deploy/testing/Dockerfile.frontend

@@ -0,0 +1,6 @@
+FROM docker.io/node:22
+
+RUN mkdir /web
+WORKDIR /web
+COPY package.json /web/
+RUN npm install

deploy/testing/docker-compose.yml

@@ -0,0 +1,55 @@
+services:
+  redis:
+    image: redis
+    ports:
+      - "6379:6379"
+
+  db:
+    image: mariadb
+    environment:
+      MARIADB_RANDOM_ROOT_PASSWORD: true
+      MARIADB_DATABASE: system3
+      MARIADB_USER: system3
+      MARIADB_PASSWORD: system3
+    volumes:
+      - mariadb_data:/var/lib/mysql
+    ports:
+      - "3306:3306"
+
+  core:
+    build:
+      context: ../../core
+      dockerfile: ../deploy/testing/Dockerfile.backend
+    command: bash -c 'python manage.py migrate && python /code/server.py'
+    environment:
+      - HTTP_HOST=core
+      - REDIS_HOST=redis
+      - DB_HOST=db
+      - DB_PORT=3306
+      - DB_NAME=system3
+      - DB_USER=system3
+      - DB_PASSWORD=system3
+    volumes:
+      - ../../core:/code
+    ports:
+      - "8000:8000"
+    depends_on:
+      - db
+      - redis
+
+  frontend:
+    build:
+      context: ../../web
+      dockerfile: ../deploy/testing/Dockerfile.frontend
+    command: npm run serve
+    volumes:
+      - ../../web:/web:ro
+      - /web/node_modules
+      - ./vue.config.js:/web/vue.config.js
+    ports:
+      - "8080:8080"
+    depends_on:
+      - core
+
+volumes:
+  mariadb_data:

deploy/testing/vue.config.js

@@ -0,0 +1,27 @@
+// vue.config.js
+
+module.exports = {
+    devServer: {
+        headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Headers": "*",
+            "Access-Control-Allow-Methods": "*"
+        },
+        proxy: {
+            '^/media/2': {
+                target: 'http://core:8000/',
+            },
+            '^/api/2': {
+                target: 'http://core:8000/',
+            },
+            '^/api/1': {
+                target: 'http://core:8000/',
+            },
+            '^/ws/2': {
+                target: 'http://core:8000/',
+                ws: true,
+                logLevel: 'debug',
+            },
+        }
+    }
+}

web/src/components/Navbar.vue

@@ -29,16 +29,7 @@
                 </router-link>
             </li>
         </ul>
-        <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1" v-if="hasPermissions">
+        <SearchBox v-if="hasPermissions" class="mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1"/>
-            <input
-                class="form-control w-100"
-                type="search"
-                placeholder="Search"
-                aria-label="Search"
-                @input="searchEventItems($event.target.value)"
-                disabled
-            >
-        </form>
         <div class="custom-control-inline mr-1" v-if="hasPermissions">
             <div class="btn-group btn-group-toggle mr-1" v-if="isItemView()">
                 <button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
@@ -103,9 +94,13 @@
 
 <script>
 import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
+import SearchBox from "@/components/inputs/SearchBox.vue";
 
 export default {
     name: 'Navbar',
+    components: {
+        SearchBox
+    },
     data: () => ({
         views: [
             {'title': 'items', 'path': 'items'},
@@ -122,7 +117,7 @@ export default {
         ...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions", "layout", "route"]),
     },
     methods: {
-        ...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
+        ...mapActions(['changeEvent', 'changeView']),
         ...mapMutations(['logout']),
         navigateTo(link) {
             if (this.route.path !== link)

web/src/components/Timeline.vue

@@ -40,10 +40,10 @@
                 <div class="">
                     <textarea placeholder="add comment..." v-model="newComment" class="form-control">
                     </textarea>
-                    <button class="btn btn-primary float-right" @click="addCommentAndClear">
+                    <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
                         <font-awesome-icon icon="comment"/>
                         Save Comment
-                    </button>
+                    </AsyncButton>
                 </div>
             </div>
         </li>
@@ -58,10 +58,10 @@
                 <div>
                     <textarea placeholder="reply mail..." v-model="newMail" class="form-control">
                     </textarea>
-                    <button class="btn btn-primary float-right" @click="sendMailAndClear">
+                    <AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear">
                         <font-awesome-icon icon="envelope"/>
                         Send Mail
-                    </button>
+                    </AsyncButton>
                 </div>
             </div>
         </li>
@@ -77,11 +77,12 @@ import {mapActions, mapGetters} from "vuex";
 import TimelineAssignment from "@/components/TimelineAssignment.vue";
 import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
 import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
+import AsyncButton from "@/components/inputs/AsyncButton.vue";
 
 export default {
     name: 'Timeline',
     components: {
-        TimelineShippingVoucher,
+        TimelineShippingVoucher, AsyncButton,
         TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
     },
     props: {
@@ -103,18 +104,15 @@ export default {
         },
     },
     methods: {
-        ...mapActions(['fetchShippingVouchers']),
+        ...mapActions(['sendMail', 'postComment']),
-        sendMailAndClear: function () {
+        sendMailAndClear: async function () {
-            this.$emit('sendMail', this.newMail);
+            await this.sendMail(this.newMail);
             this.newMail = "";
         },
-        addCommentAndClear: function () {
+        addCommentAndClear: async function () {
-            this.$emit('addComment', this.newComment);
+            await this.postComment(this.newComment);
             this.newComment = "";
         }
-    },
-    mounted() {
-        this.fetchShippingVouchers();
     }
 };
 </script>

web/src/components/inputs/AsyncButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <button @click.stop="handleClick" :disabled="disabled">
+        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
+              :class="{'d-none': !disabled}"></span>
+        <span class="ml-2" :class="{'d-none': !disabled}">In Progress...</span>
+        <span :class="{'d-none': disabled}"><slot></slot></span>
+    </button>
+</template>
+
+<script>
+
+export default {
+    name: 'AsyncButton',
+    data() {
+        return {
+            disabled: false,
+        };
+    },
+    props: {
+        task: {
+            type: Function,
+            required: true,
+        },
+    },
+    methods: {
+        async handleClick() {
+            console.log("AsyncButton.handleClick() called");
+            if (this.task && typeof this.task === 'function') {
+                this.disabled = true;
+                try {
+                    await this.task();
+                } catch (e) {
+                    console.error(e);
+                } finally {
+                    this.disabled = false;
+                }
+            }
+        },
+    }
+};
+</script>
+
+<style scoped>
+.spinner-border {
+    vertical-align: -0.125em;
+}
+</style>

web/src/components/inputs/FormatedText.vue

@@ -0,0 +1,112 @@
+<template>
+    <div contenteditable @input="onchange" ref="text">
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'FormatedText',
+    props: {
+        value: {
+            type: String,
+            required: true
+        },
+        format: {
+            type: Function,
+            default: null
+        }
+    },
+    data() {
+        return {
+            selection: {start: 0, end: 0, direction: 'forward', type: 'Caret'}
+        };
+    },
+    emits: ['input'],
+    methods: {
+        rawhtml(value) {
+            if (typeof this.format === 'function') {
+                return this.format(value.replace(/ /g, '&nbsp;'));
+            } else {
+                return value;
+            }
+        },
+        onchange(event) {
+            const div = this.$refs.text;
+            const sel = window.getSelection();
+            if (sel.rangeCount > 0) {
+                this.selection.start = this.calculateOffset(div, sel.anchorNode, sel.anchorOffset);
+                this.selection.end = this.calculateOffset(div, sel.focusNode, sel.focusOffset);
+                this.selection.direction = sel.direction;
+                this.selection.type = sel.type;
+            }
+            this.$emit('input', event.target.innerText.replace(/&nbsp;/g, ' ').replace(/\xA0/g, ' '));
+        },
+        calculateOffset(container, node, offset) {
+            let position = 0;
+            let found = false;
+            const walk = (elem) => {
+                if (elem === node) {
+                    found = true;
+                    return;
+                }
+                if (elem.nodeType === 3) {
+                    position += elem.length;
+                } else {
+                    for (let i = 0; i < elem.childNodes.length; i++) {
+                        walk(elem.childNodes[i]);
+                        if (found) {
+                            return;
+                        }
+                    }
+                }
+            };
+            walk(container);
+            return position + offset;
+        },
+        findNode(container, offset) {
+            let position = 0;
+            let found = false;
+            let node = null;
+            const walk = (elem) => {
+                if (position + elem.length >= offset) {
+                    found = true;
+                    node = elem;
+                    return;
+                }
+                if (elem.nodeType === 3) {
+                    position += elem.length;
+                } else {
+                    for (let i = 0; i < elem.childNodes.length; i++) {
+                        walk(elem.childNodes[i]);
+                        if (found) {
+                            return;
+                        }
+                    }
+                }
+            };
+            walk(container);
+            return [node, offset - position]
+        },
+    },
+    watch: {
+        value() {
+            if (this.selection) {
+                const div = this.$refs.text;
+                div.innerHTML = this.rawhtml(this.value);
+
+                const range = document.createRange();
+                const sel = window.getSelection();
+                range.setStart(...this.findNode(div, this.selection.start));
+                range.setEnd(...this.findNode(div, this.selection.end));
+
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+    },
+    mounted() {
+        const div = this.$refs.text;
+        div.innerHTML = this.rawhtml(this.value);
+    }
+};
+</script>

web/src/components/inputs/SearchBox.vue

@@ -0,0 +1,43 @@
+<template>
+    <input
+        class="form-control w-100"
+        type="search"
+        placeholder="Search"
+        aria-label="Search"
+        v-model="search_query"
+        @keyup.enter="dispatchSearch"
+    >
+</template>
+
+<script>
+
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+    name: 'SearchBox',
+    data() {
+        return {
+            search_query: ''
+        }
+    },
+    computed: {
+        ...mapGetters(['getActiveView'])
+    },
+    methods: {
+        ...mapActions(['searchEventItems', 'searchEventTickets']),
+        isItemView() {
+            return this.getActiveView === 'items' || this.getActiveView === 'item';
+        },
+        isTicketView() {
+            return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
+        },
+        dispatchSearch() {
+            if (this.isItemView()) {
+                this.searchEventItems(this.search_query);
+            } else if (this.isTicketView()) {
+                this.searchEventTickets(this.search_query);
+            }
+        }
+    }
+};
+</script>

web/src/router.js

@@ -7,15 +7,17 @@ import Files from './views/Files';
 import HowTo from './views/HowTo';
 import Login from '@/views/Login.vue';
 import Register from '@/views/Register.vue';
-import Debug from "@/views/admin/Debug.vue";
+import Dashboard from "@/views/admin/Dashboard.vue";
 import Tickets from "@/views/Tickets.vue";
 import Ticket from "@/views/Ticket.vue";
 import Admin from "@/views/admin/Admin.vue";
 import Empty from "@/views/Empty.vue";
 import Events from "@/views/admin/Events.vue";
+import Settings from "@/views/admin/Settings.vue";
 import AccessControl from "@/views/admin/AccessControl.vue";
 import {default as BoxesAdmin} from "@/views/admin/Boxes.vue"
 import Shipping from "@/views/admin/Shipping.vue";
+import Notifications from "@/views/admin/Notifications.vue";
 
 const routes = [
     {path: '/', redirect: '/37C3/items', meta: {requiresAuth: false}},
@@ -59,7 +61,11 @@ const routes = [
                     {requiresAuth: true, requiresPermission: 'delete_event'}
             },
             {
-                path: '', name: 'admin', component: Debug, meta:
+                path: 'settings/', name: 'settings', component: Settings, meta:
+                    {requiresAuth: true, requiresPermission: 'delete_event'}
+            },
+            {
+                path: '', name: 'admin', component: Dashboard, meta:
                     {requiresAuth: true, requiresPermission: 'delete_event'}
             },
             {
@@ -74,6 +80,10 @@ const routes = [
                 path: 'shipping/', name: 'shipping', component: Shipping, meta:
                     {requiresAuth: true, requiresPermission: 'delete_event'}
             },
+            {
+                path: 'notifications/', name: 'notifications', component: Notifications, meta:
+                    {requiresAuth: true, requiresPermission: 'delete_event'}
+            }
         ]
     },
     {path: '/user', name: 'user', component: Empty, meta: {requiresAuth: true}},

web/src/store.js

@@ -19,10 +19,14 @@ const store = createStore({
         users: [],
         groups: [],
         state_options: [],
+        messageTemplates: [],
+        messageTemplateVariables: [],
         shippingVouchers: [],
+        userNotificationChannels: [],
 
         lastEvent: '37C3',
         lastUsed: {},
+        searchQuery: '',
         remember: false,
         user: {
             username: null,
@@ -41,7 +45,9 @@ const store = createStore({
             users: 0,
             groups: 0,
             states: 0,
+            messageTemplates: 0,
             shippingVouchers: 0,
+            userNotificationChannels: 0,
         },
         persistent_loaded: false,
         shared_loaded: false,
@@ -221,10 +227,21 @@ const store = createStore({
         setThumbnail(state, {url, data}) {
             state.thumbnailCache[url] = data;
         },
+        setMessageTemplates(state, templates) {
+            state.messageTemplates = templates;
+            state.fetchedData = {...state.fetchedData, messageTemplates: Date.now()};
+        },
+        setMessageTemplateVariables(state, variables) {
+            state.messageTemplateVariables = variables;
+        },
         setShippingVouchers(state, codes) {
             state.shippingVouchers = codes;
             state.fetchedData = {...state.fetchedData, shippingVouchers: Date.now()};
         },
+        setUserNotificationChannels(state, channels) {
+            state.userNotificationChannels = channels;
+            state.fetchedData = {...state.fetchedData, userNotificationChannels: Date.now()};
+        },
     },
     actions: {
         async login({commit}, {username, password, remember}) {
@@ -355,10 +372,9 @@ const store = createStore({
             }
         },
         async searchEventItems({commit, getters, state}, query) {
-            const foo = utf8.encode(query);
+            const encoded_query = base64.encode(utf8.encode(query));
-            const bar = base64.encode(foo);
 
-            const {data, success} = await http.get(`/2/${getters.getEventSlug}/items/${bar}/`, state.user.token);
+            const {data, success} = await http.get(`/2/${getters.getEventSlug}/items/${encoded_query}/`, state.user.token);
             if (data && success)
                 commit('replaceLoadedItems', data);
         },
@@ -407,6 +423,13 @@ const store = createStore({
             if (data && success)
                 commit('replaceTickets', data);
         },
+        async searchEventTickets({commit, getters, state}, query) {
+            const encoded_query = base64.encode(utf8.encode(query));
+
+            const {data, success} = await http.get(`/2/${getters.getEventSlug}/tickets/${encoded_query}/`, state.user.token);
+            if (data && success)
+                commit('replaceTickets', data);
+        },
         async sendMail({commit, dispatch, state}, {id, message}) {
             const {data, success} = await http.post(`/2/tickets/${id}/reply/`, {message}, state.user.token);
             if (data && success) {
@@ -452,6 +475,39 @@ const store = createStore({
             const {data, success} = await http.patch(`/2/tickets/${id}/`, ticket, state.user.token);
             commit('updateTicket', data);
         },
+        async fetchMessageTemplates({commit, state}) {
+            if (!state.user.token) return;
+            if (state.messageTemplates.length > 0) return;
+            const {data, success} = await http.get('/2/message_templates/', state.user.token);
+            if (data && success) {
+                commit('setMessageTemplates', data);
+            }
+        },
+        async updateMessageTemplate({dispatch, state}, template) {
+            const {data, success} = await http.patch(`/2/message_templates/${template.id}/`,
+                {'message': template.message}, state.user.token);
+            if (data && success) {
+                state.fetchedData.messageTemplates = 0;
+                dispatch('fetchMessageTemplates');
+            }
+        },
+        async fetchMessageTemplateVariables({commit, state}) {
+            if (!state.user.token) return;
+            if (state.messageTemplateVariables.length > 0) return;
+            const {data, success} = await http.get('/2/message_template_variables/', state.user.token);
+            if (data && success) {
+                commit('setMessageTemplateVariables', data);
+            }
+        },
+        async createMessageTemplate({dispatch, state}, template_name) {
+            const {data, success} = await http.post('/2/message_templates/', {
+                name: template_name,
+                message: '-'
+            }, state.user.token);
+            if (data && success) {
+                dispatch('fetchMessageTemplates');
+            }
+        },
         async fetchShippingVouchers({commit, state}) {
             if (!state.user.token) return;
             if (state.fetchedData.shippingVouchers > Date.now() - 1000 * 60 * 60 * 24) return;
@@ -478,8 +534,16 @@ const store = createStore({
                 state.fetchedData.tickets = 0;
                 await Promise.all([dispatch('loadTickets'), dispatch('fetchShippingVouchers')]);
             }
+        },
+        async fetchUserNotificationChannels({commit, state}) {
+            if (!state.user.token) return;
+            if (state.fetchedData.userNotificationChannels > Date.now() - 1000 * 60 * 60 * 24) return;
+            const {data, success} = await http.get('/2/user_notification_channels/', state.user.token);
+            if (data && success) {
+                commit('setUserNotificationChannels', data);
             }
         },
+    },
     plugins: [
         persistentStatePlugin({ // TODO change remember to some kind of enable field
             prefix: "lf_",
@@ -506,6 +570,8 @@ const store = createStore({
                 "groups",
                 "loadedBoxes",
                 "loadedItems",
+                "messageTemplates",
+                "messageTemplatesVariables",
                 "shippingVouchers",
             ],
             watch: [
@@ -517,6 +583,8 @@ const store = createStore({
                 "groups",
                 "loadedBoxes",
                 "loadedItems",
+                "messageTemplates",
+                "messageTemplatesVariables",
                 "shippingVouchers",
             ],
             mutations: [

web/src/views/Ticket.vue

@@ -79,16 +79,6 @@ export default {
             shipping_voucher_type: null,
         }
     },
-    watch: {
-        ticket(val) {
-            if (this.selected_state == null) {
-                this.selected_state = val.state;
-            }
-            if (this.selected_assignee == null) {
-                this.selected_assignee = val.assigned_to
-            }
-        }
-    },
     computed: {
         ...mapState(['tickets', 'state_options', 'users']),
         ...mapGetters(['availableShippingVoucherTypes']),
@@ -134,8 +124,14 @@ export default {
         },
     },
     mounted() {
-        this.scheduleAfterInit(() => [this.fetchTicketStates(), this.loadTickets(), this.loadUsers(),
+		this.scheduleAfterInit(() => [Promise.all([this.fetchTicketStates(), this.loadTickets(), this.loadUsers(), this.fetchShippingVouchers()]).then(()=>{
-            this.fetchShippingVouchers()]);
+			if (this.ticket.state == "pending_new"){
+				this.selected_state = "pending_open";
+				this.changeTicketStatus(this.ticket)
+			};
+			this.selected_state = this.ticket.state;
+			this.selected_assignee = this.ticket.assigned_to
+		})]);
     }
 };
 </script>

web/src/views/admin/Admin.vue

@@ -8,9 +8,15 @@
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'admin'}" active-class="dummy" exact-active-class="active">Dashboard</router-link>
                             </li>
+                            <li class="nav-item">
+                                <router-link class="nav-link" :to="{name: 'settings'}" active-class="active">Settings</router-link>
+                            </li>
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>
                             </li>
+                            <li class="nav-item">
+                                <router-link class="nav-link" :to="{name: 'notifications'}" active-class="active">Notifications</router-link>
+                            </li>
                             <li class="nav-item">
                                 <router-link class="nav-link" :to="{name: 'shipping'}" active-class="active">Shipping</router-link>
                             </li>

web/src/views/admin/Dashboard.vue

@@ -0,0 +1,33 @@
+<template>
+    <div>
+        <h3 class="text-center">Events</h3>
+        <ul>
+            <li v-for="event in events" :key="event.id">
+                {{ event.slug }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex';
+import Table from '@/components/Table';
+
+export default {
+    name: 'Dashboard',
+    components: {},
+    computed: {
+        ...mapState(['events']),
+    },
+    methods: {
+        ...mapActions(['loadEvents']),
+
+    },
+    mounted() {
+        this.loadEvents();
+    }
+};
+</script>
+
+<style>
+</style>

web/src/views/admin/Debug.vue

@@ -1,62 +0,0 @@
-<template>
-    <div>
-    <!--qr-code :text="qr_url" color="#000" bg-color="#fff" error-level="H" class="qr-code"></qr-code-->
-    <h3 class="text-center">Events</h3>
-    <!--p>{{ events }}</p-->
-    <ul>
-        <li v-for="event in events" :key="event.id">
-            {{ event.slug }}
-        </li>
-    </ul>
-    <h3 class="text-center">Items</h3>
-    <!--p>{{ loadedItems }}</p-->
-    <ul>
-        <li v-for="item in loadedItems" :key="item.id">
-            {{ item.description }}
-        </li>
-    </ul>
-    <h3 class="text-center">Boxes</h3>
-    <!--p>{{ loadedBoxes }}</p-->
-    <ul>
-        <li v-for="box in loadedBoxes" :key="box.id">
-            {{ box.name }}
-        </li>
-    </ul>
-    <h3 class="text-center">Issues</h3>
-    <!--p>{{ issues }}</p-->
-    <ul>
-        <li v-for="issue in tickets" :key="issue.id">
-            {{ issue.id }}
-        </li>
-    </ul>
-    </div>
-</template>
-
-<script>
-import {mapActions, mapState} from 'vuex';
-import Table from '@/components/Table';
-
-export default {
-    name: 'Debug',
-    components: {Table},
-    computed: {
-        ...mapState(['events', 'loadedItems', 'loadedBoxes', 'tickets']),
-        qr_url() {
-            return window.location.href;
-        }
-    },
-    methods: {
-        ...mapActions(['changeEvent', 'loadTickets']),
-
-    },
-    mounted() {
-        this.loadTickets();
-    }
-};
-</script>
-
-<style>
-.qr-code img {
-    border: #fff solid 7px
-}
-</style>

web/src/views/admin/Notifications.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <Table :items="userNotificationChannels.map(channel => ({...channel, username: channel.user.username || {}}))"
+               :columns="['id', 'username', 'channel_type', 'channel_target', 'event_filter', /*'active', 'created'*/]">
+            <template #actions="{ item }">
+                <div class="btn-group">
+                    <button class="btn btn-danger" @click.stop="">
+                        <font-awesome-icon icon="trash"/>
+                        delete
+                    </button>
+                </div>
+            </template>
+        </Table>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <div class="input-group">
+                    <select class="form-control">
+                        <option value="1">user</option>
+                        <option value="2">admin</option>
+                    </select>
+                    <select class="form-control">
+                        <option value="email">Email</option>
+                        <option value="telegram">Telegram</option>
+                    </select>
+                    <input type="text" class="form-control" placeholder="channel_target">
+                    <input type="text" class="form-control" value="*">
+                    <div class="input-group-append">
+                        <button class="btn btn-primary">Add</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex';
+import Table from '@/components/Table';
+
+export default {
+    name: 'Notifications',
+    components: {Table},
+    computed: mapState(['userNotificationChannels']),
+    methods: mapActions(['fetchUserNotificationChannels']),
+    mounted() {
+        this.fetchUserNotificationChannels();
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/admin/Settings.vue

@@ -0,0 +1,109 @@
+<template>
+    <h3 class="text-center">Available Message Template Variables</h3>
+    <p>
+        <span v-for="(variable, key) in messageTemplateVariables" :key="key" class="badge badge-primary"
+              style="margin: 5px;">
+            {{ variable }}
+        </span>
+    </p>
+    <h3 class="text-center">Message Templates</h3>
+    <div v-for="template in messageTemplatesIntermediate" :key="template.id" class="card bg-dark"
+         style="margin-bottom: 10px;">
+        <div class="card-header">{{ template.name }}</div>
+        <FormatedText :value="template.message" :format="formatText" class="card-body"
+                      @input="changeMessageTemplate(template.id, $event)"/>
+        <div class="card-body">
+            <button class="btn btn-primary" @click="resetMessageTemplate(template.id)"
+                    :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Reset
+            </button>
+            <button class="btn btn-success" @click="saveMessageTemplate(template.id)"
+                    :disabled="messageTemplates.find(t => t.id === template.id).message === template.message">Save
+            </button>
+        </div>
+    </div>
+    <div class="card bg-dark">
+        <div class="card-body">
+            <div class="input-group">
+                <input type="text" class="form-control" v-model="newTemplateName" placeholder="New Template Name">
+                <button class="btn btn-success input-group-btn" @click="createMessageTemplateAndReset()"
+                        ref="createButton">Create
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapActions, mapState} from 'vuex';
+import Table from '@/components/Table';
+import FormatedText from "@/components/inputs/FormatedText.vue";
+
+export default {
+    name: 'Settings',
+    components: {FormatedText, Table},
+    data() {
+        return {
+            messageTemplatesIntermediate: [],
+            newTemplateName: '',
+        };
+    },
+    computed: mapState(['messageTemplates', 'messageTemplateVariables']),
+    methods: {
+        ...mapActions(['fetchMessageTemplates', 'fetchMessageTemplateVariables', 'updateMessageTemplate', 'createMessageTemplate']),
+        formatText(value) {
+            return value.replace(/{{(.+?)}}/g, (match, key) => {
+                return `<span class="text-primary">{{${key}}}</span>`;
+            }).replace(/\n/g, '<br>').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;');
+        },
+        changeMessageTemplate(id, message) {
+            console.log(id, message);
+            this.messageTemplatesIntermediate.forEach(template => {
+                if (template.id === id) {
+                    template.message = message;
+                }
+            });
+        },
+        saveMessageTemplate(id) {
+            this.updateMessageTemplate(this.messageTemplatesIntermediate.find(template => template.id === id));
+        },
+        resetMessageTemplate(id) {
+            this.messageTemplatesIntermediate.find(template => template.id === id).message =
+                this.messageTemplates.find(template => template.id === id).message;
+        },
+        async createMessageTemplateAndReset() {
+            this.$refs.createButton.disabled = true;
+            await this.createMessageTemplate(this.newTemplateName);
+            this.newTemplateName = '';
+            this.$refs.createButton.disabled = false;
+        },
+    },
+    mounted() {
+        this.fetchMessageTemplates().then(() => {
+            this.messageTemplatesIntermediate = JSON.parse(JSON.stringify(this.messageTemplates));
+        });
+        this.fetchMessageTemplateVariables();
+    },
+    watch: {
+        messageTemplates() {
+            for (const template of this.messageTemplates) {
+                if (!this.messageTemplatesIntermediate.find(t => t.id === template.id)) {
+                    this.messageTemplatesIntermediate.push(JSON.parse(JSON.stringify(template)));
+                }
+            }
+            for (const template of this.messageTemplatesIntermediate) {
+                if (!this.messageTemplates.find(t => t.id === template.id)) {
+                    this.messageTemplatesIntermediate = this.messageTemplatesIntermediate.filter(t => t.id !== template.id);
+                }
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    color: inherit;
+}
+</style>