(feat): Implement Email

zubhub_backend/zubhub/creators/serializers.py

@@ -302,6 +302,10 @@ def validate_email(self, value):
                 _('No account found with this email. Verify and try again.'))
         return value
 
+    def get_email_options(self):
+        return {
+            'html_email_template_name': 'registration/password_reset_email.html'
+        }
 
 class CreatorGroupWithMembershipsSerializer(serializers.ModelSerializer):
     members = CreatorGroupMembershipSerializer(many=True)

zubhub_backend/zubhub/creators/views.py

@@ -32,6 +32,7 @@
 from projects.permissions import (SustainedRateThrottle, PostUserRateThrottle,
                                   GetUserRateThrottle, GetAnonRateThrottle,
                                   CustomUserRateThrottle)
+from zubhub.tasks import send_follower_notification_email
 # from ..projects.models import Project
 
 from .models import Location, CreatorGroup, PhoneConfirmationHMAC, GroupInviteConfirmationHMAC, CreatorGroupMembership
@@ -471,6 +472,14 @@ def get_object(self):
                         Activitylog.Type.FOLLOW,
                         f'/creators/{obj}'
                     )
+            context = {
+                "user": {
+                    "username": self.request.user.username,
+                    "avatar": self.request.user.avatar,
+                    "pk": self.request.user.pk
+                }
+            }
+            send_follower_notification_email.delay(obj.email, context)
         self.request.user.save()
 
         return obj

zubhub_backend/zubhub/projects/views.py

@@ -16,6 +16,7 @@
                                   SustainedRateThrottle, PostUserRateThrottle,
                                   GetUserRateThrottle, CustomUserRateThrottle)
 from activitylog.models import Activitylog  
+from zubhub.tasks import send_comment_notification_email, send_bookmark_notification_email
 from .models import Project, Comment, StaffPick, Category, Tag, PublishingRule
 from creators.models import Creator
 from .utils import (ProjectSearchCriteria, project_changed, detect_mentions,
@@ -410,6 +411,16 @@ def get_object(self):
                         f'/projects/{obj.pk}'
                     )
 
+                    context = {
+                        "project": {
+                            "title": obj.title,
+                            "description": obj.description,
+                            "pk": obj.pk,
+                            "image": obj.images.first().image_url,
+                        },
+                        "bookmarked_by": self.request.user.username,
+                    }
+                    send_bookmark_notification_email.delay(obj.creator.email, context)
 
             return obj
         else:
@@ -507,6 +518,18 @@ def create(self, request, *args, **kwargs):
                 f'/projects/{result.pk}'
             )
 
+            context = {
+                "project": {
+                    "title": result.title, 
+                    "description": result.description, 
+                    "pk": result.pk, 
+                    "image": result.images.first().image_url
+                },
+                "comment": text,
+                "commented_by": creator_str,
+            }
+            send_comment_notification_email.delay(result.creator.email, context)
+
         return Response(ProjectSerializer(result, context={
             'request': request
         }).data,

zubhub_backend/zubhub/templates/account/email/email_confirmation_message.html

@@ -0,0 +1,30 @@
+{% extends "email/email_base.html" %}
+{% load static %}
+{% load default_template_tags %}
+
+{% block title %}Activate Your Account{% endblock %}
+
+{% block content %}
+  <h1 style="margin: 2em 0; font-size:2em">Activate Your Account</h1>
+
+  <p style="margin: 2em 0;">Dear <b>{{ user.username }}</b></p>
+  <p style="margin: 2em 0;">Welcome to ZubHub! We're thrilled to have you on board. To get started, we just need to confirm your email address. Please click on the button below to activate your account.</p>
+
+  <a
+    href="{% default_frontend_protocol %}://{% default_frontend_domain %}/email-confirm?user={{ user_display }}&&key={{ key }}"
+    style="margin: 2em 0; background-color:#00B8C4; text-decoration: none; padding: .8em 1.2em; color: #FCFDFF; display:inline-block; border-radius:.2em; mso-padding-alt:0; text-underline-color:#00B8C4"
+    >
+    <!--[if mso]>
+      <i style="mso-font-width:200%;mso-text-raise:100%" hidden>&emsp;</i>
+        <span style="mso-text-raise:50%;">
+          <![endif]-->Activate your account<!--[if mso]>
+        </span>
+      <i style="mso-font-width:200%;" hidden>&emsp;&#8203;</i>
+    <![endif]-->
+  </a>
+
+  <div style="margin: 2em 0">
+    <p style="margin: 0.5 0;">Please note that this link will expire in 30 minutes.</p>
+    <p style="margin: 0.5 0; color: #757575">If you didn’t try to sign-in or create an account on ZubHub, you can safely ignore this email.</p>
+  </div>
+{% endblock %}

zubhub_backend/zubhub/templates/account/email/email_confirmation_signup_message.html

@@ -0,0 +1 @@
+{% include "account/email/email_confirmation_message.html" %}

zubhub_backend/zubhub/templates/email/badge.html

@@ -0,0 +1,22 @@
+{% extends "email/email_base.html" %}
+{% load static %}
+
+{% block title %}You got a new badge!{% endblock %}
+
+{% block content %}
+  <h1 style="margin: 2em 0; font-size:2em">You got a new badge!</h1>
+  <p style="margin: 2em 0;">Congratulations! You’ve unlocked a new achievement and earned the prestigious <b>{{ badge.name }}</b> badge. &#127775;</p>
+  <center style="margin: 4em 0;">
+    <img
+      src={{ badge.image }}
+      alt="Badge image"
+      style="width: 10em; background-color: #FFFF;">
+    <h3 style="margin: 0.5em 0; font-size:1.17em">{{ badge.name }}</h3>
+  </center>
+  <p style="margin: 2em 0;">{{ badge.message }} Click
+    <a href={{ badge.link }} style="color:#00B8C4; text-decoration: none;">
+      here
+    </a>
+    to view more.
+  </p>
+{% endblock %}

zubhub_backend/zubhub/templates/email/bookmark.html

@@ -0,0 +1,27 @@
+{% extends "email/email_base.html" %}
+{% load static %}
+
+{% block title %}You've been bookmarked!{% endblock %}
+
+{% block content %}
+  <h1 style="margin: 2em 0; font-size: 2em">You've been bookmarked!</h1>
+
+  <p style="margin: 2em 0;">Your post just got bookmarked. Your content is worth saving!</p>
+
+  <img src={{ project.image }} alt="Project Image" style="width: 100%; max-height: 16em; object-fit: cover; background-color: #000; border-radius: 1em 1em 0 0;">
+  <h3 style="margin: 0.5em 0; font-size:1.17em">{{ project.title }}</h3>
+  <p style="margin: 0; color: #757575">{{ project.description|striptags }}</p>
+  <hr style="border-width: 0; background: #757575; color: #757575; height: .1px; margin: 1em 0;">
+  <center>
+    <p style="margin: 0.5 0; width: 90%"><b>{{ bookmarked_by }}</b> have bookmarked your project.</p>
+  </center>
+
+  <div style="margin: 3em 0 0 0">
+    <p style="margin: 0;">Join the conversation now and engage with your audience. Click
+      <a href="https://zubhub.unstructured.studio/projects/{{ project.pk }}" style="color: #00B8C4; text-decoration: none;">
+        here
+      </a>
+      to view more.
+    </p>
+  </div>
+{% endblock %}

zubhub_backend/zubhub/templates/email/comment.html

@@ -0,0 +1,27 @@
+{% extends "email/email_base.html" %}
+{% load static %}
+
+{% block title %}You got a comment!{% endblock %}
+
+{% block content %}
+  <h1 style="margin: 2em 0; font-size: 2em">You got a comment!</h1>
+
+  <p style="margin: 2em 0;">Great news! Someone just left a comment on your post. &#127881;</p>
+
+  <img src={{ project.image }} alt="Project Image" style="width: 100%; max-height: 16em; object-fit: cover; background-color: #000; border-radius: 1em 1em 0 0;">
+  <h3 style="margin: 0.5em 0; font-size:1.17em">{{ project.title }}</h3>
+  <p style="margin: 0; color: #757575">{{ project.description|striptags }}</p>
+  <hr style="border-width: 0; background: #757575; color: #757575; height: .1px; margin: 1em 0;">
+  <center>
+    <p style="margin: 0.5 0; font-size: 0.8em; width: 90%">{{ commented_by }} says "{{ comment }}"</p>
+  </center>
+
+  <div style="margin: 3em 0 0 0">
+    <p style="margin: 0;">Join the conversation now and engage with your audience. Click
+      <a href="https://zubhub.unstructured.studio/projects/{{ project.pk }}" style="color: #00B8C4; text-decoration: none;">
+        here
+      </a>
+      to view comment and respond.
+    </p>
+  </div>
+{% endblock %}