feature: 📜 add important terms and privacy pages

moku/config/urls.py

@@ -21,6 +21,7 @@ from django.urls import include, path
 
 from moku.views.auth import LoginView, LogoutView
 from moku.views.post import FeedView
+from moku.views.static import ChangelogView, PrivacyView, TermsView
 from moku.views.user import EditProfileView, EditSettingsView, ProfileView, SignupView
 
 urlpatterns = [
@@ -31,6 +32,9 @@ urlpatterns = [
     path("signup", SignupView.as_view(), name="signup"),
     path("profile", EditProfileView.as_view(), name="profile.edit"),
     path("settings", EditSettingsView.as_view(), name="settings"),
+    path("changelog", ChangelogView.as_view(), name="changelog"),
+    path("privacy", PrivacyView.as_view(), name="privacy"),
+    path("terms", TermsView.as_view(), name="terms"),
     path("user/<str:username>", ProfileView.as_view(), name="profile"),
 ]
 

moku/forms/user.py

@@ -9,6 +9,7 @@ from moku.models.user import User, UserSettings
 
 class UserForm(UserCreationForm):
     captcha = ReCaptchaField(required=True)
+    check = forms.BooleanField(required=True)
 
     class Meta(UserCreationForm.Meta):
         model = User
@@ -24,7 +25,12 @@ class UserForm(UserCreationForm):
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.fields["captcha"].error_messages = {"required": _("make sure you've ticked the captcha.")}
+        self.fields["captcha"].error_messages = {
+            "required": _("make sure you've ticked the captcha."),
+        }
+        self.fields["check"].error_messages = {
+            "required": _("you must agree to the terms of use and privacy policy."),
+        }
 
 
 class UserSettingsForm(forms.ModelForm):

moku/static/css/moku.css

@@ -150,6 +150,13 @@ form .field {
     row-gap: .4rem;
 }
 
+form .checkbox {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: flex-start;
+    column-gap: .8rem;
+}
+
 form .field .help {
     color: var(--charcoal);
     font-size: 1.4rem;
@@ -317,6 +324,58 @@ header nav ul {
     border-left: 2px solid var(--tangerine);
 }
 
+.block {
+    max-width: 528px;
+    display: grid;
+    row-gap: .8rem;
+}
+
+.block h2 {
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.block h3 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-block-start: 1.2rem;
+}
+
+.block ul {
+    padding-inline-start: 3.2rem;
+    list-style: disc;
+    display: grid;
+    row-gap: .4rem;
+}
+
+.block strong {
+    font-weight: bold;
+}
+
+.block em {
+    font-style: italic;
+}
+
+footer {
+    margin-block-start: 1.8rem;
+}
+
+footer nav ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 1.2rem;
+}
+
+footer nav ul li a {
+    font-size: 1.4rem;
+    color: var(--charcoal);
+}
+
+footer nav ul li a:hover {
+    color: var(--orange);
+}
+
 @media(min-width: 768px) {
     body {
         padding: 4rem 1.2rem 2.4rem 1.2rem;

moku/templates/moku/base.jinja

@@ -40,5 +40,15 @@
             </ul>
         {% endif %}
         {% block content %}{% endblock content %}
+        <footer>
+            <nav>
+                <ul>
+                    <li><a href="{{ url('changelog') }}">changelog</a></li>
+                    <li><a href="{{ url('terms') }}">terms of use</a></li>
+                    <li><a href="{{ url('privacy') }}">privacy policy</a></li>
+                    <li><a href="https://ko-fi.com/mokublog" target="_blank" rel="noreferrer">donate❤️</a></li>
+                </ul>
+            </nav>
+        </footer>
     </body>
 </html>

moku/templates/moku/changelog.jinja

@@ -0,0 +1,11 @@
+{% extends "moku/base.jinja" %}
+
+{% block content %}
+    <div class="content block">
+        <h2>changelog 📜</h2>
+        <h3>2024-03-25</h3>
+        <ul>
+            <li>moku.blog launched! 🎉</li>
+        </ul>
+    </div>
+{% endblock content %}

moku/templates/moku/privacy.jinja

@@ -0,0 +1,29 @@
+{% extends "moku/base.jinja" %}
+
+{% block content %}
+    <div class="content block">
+        <h2>privacy 🕵️</h2>
+        <p>privacy is a big concern to us, so we wanted to keep this page as simple as possible.</p>
+        <p>by using moku.blog in any form, you <strong>hereby consent</strong> to this policy.</p>
+        <h3>what data do we hold?</h3>
+        <p>when you sign up, you provide a username, email address and password. this is the only required data. further optional data can be voluntarily given, such as an 'about me', location and pronouns. additionally, you can provide settings such as your preferred language.</p>
+        <p>we also store the data given when you decide to make a post, including emoji, food, verb and image. these are stored in our database, linked to your user profile.</p>
+        <h3>data privacy</h3>
+        <p>the data you share with us is stored only for the purpose of using the website. we do not ask for anything that does not provide value in the website itself, and we do <strong>not</strong> pass any user data to any third parties.</p>
+        <p>the only exception is that we may generate anonymized usage statistics. this means, we might count how many users are visiting our pages without recording which user visited where. this data is completely anonymous and, once again, is not shared to third parties.</p>
+        <h3>your rights</h3>
+        <p>you should feel in control of your data. everyone who uses the site is entitled to the following:</p>
+        <ul>
+            <li><strong>access</strong> - you have the right to request a copy of all your personal data.</li>
+            <li><strong>rectification</strong> - you have the right to request that we correct any personal information you believe to be incorrect. you also have the right to request that we complete any personal information you believe to be incomplete.</li>
+            <li><strong>erasure</strong> - you have the right to request that we erase your personal data completely, under certain conditions.</li>
+            <li><strong>restrict processing</strong> - you have the right to request that we restrict the processing of your personal data, under certain conditions.</li>
+            <li><strong>object processing</strong> - you have to right to object to our processing of your personal data, under certain conditions.</li>
+            <li><strong>data portability</strong> - you have the right to request that we transfer the data we have collected to another organisation, or directly to you, under certain conditions.</li>
+        </ul>
+        <p>to exercise any of these rights, please get in touch by email at <strong>m5ka@posteo.de</strong></p>
+        <h3>children's information</h3>
+        <p>protection of children online is a massive priority for us and we encourage parents to be aware of and guide their children's online activity.</p>
+        <p>moku.blog does not knowingly collect any personal identifiable information from children under the age of 13. if you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best to prompty remove such information from our records.</p>
+    </div>
+{% endblock content %}

moku/templates/moku/signup.jinja

@@ -30,6 +30,18 @@
                 {{ form.captcha }}
                 <span class="help">{% trans %}please let us know you're not a robot. i'm scared of robots!{% endtrans %}</span>
             </div>
+            <div class="field">
+                <div class="checkbox">
+                    {{ form.check }}
+                    <label for="id_check">
+                        {% with terms_url=url('terms'), privacy_url=url('privacy') %}
+                            {% trans %}
+                                i agree to the <a href="{{ terms_url }}" target="_blank" rel="noreferrer">terms of use</a> and <a href="{{ privacy_url }}" target="_blank" rel="noreferrer">privacy policy</a>.
+                            {% endtrans %}
+                        {% endwith %}
+                    </label>
+                </div>
+            </div>
             <button type="submit">{% trans %}sign up!{% endtrans %}</button>
         </form>
     </div>

moku/templates/moku/terms.jinja

@@ -0,0 +1,19 @@
+{% extends "moku/base.jinja" %}
+
+{% block content %}
+    <div class="content block">
+        <h2>terms of use ✅</h2>
+        <p>in order to use moku.blog, you need to agree to the following rules. if you don't follow these, your account may be removed.</p>
+        <h3>the rules</h3>
+        <ul>
+            <li>you must be at least <strong>13 years old</strong> to use this website.</li>
+            <li>racism, homophobia, biphobia, transphobia, ableism, misogyny and other <strong>oppressive attitudes are explicitly forbidden</strong> in this community. moku.blog is queer-led and we will always foster an inclusive community as our number one priority, no exceptions.</li>
+            <li>using moku.blog in a way that is <strong>against the law</strong>, such as promoting malware, phishing or infringing copyright, is not allowed.</li>
+            <li>content posted to moku.blog must be <strong>suitable for all ages</strong>. pornographic content, blood and gore are strictly forbidden and will result in immediate action taken against you.</li>
+            <li><strong>spamming and advertising</strong> is not allowed. it's also very annoying.</li>
+            <li><strong>harassing and bullying</strong> other uses will not be tolerated in this community.</li>
+            <li><strong>revealing personal information</strong> about yourself or others (known as "doxxing") is strictly forbidden and will result in immediate consequences.</li>
+        </ul>
+        <p>thanks for reading to the bottom of these! they help us to keep our community feeling safe. 🥰</p>
+    </div>
+{% endblock content %}

moku/views/static.py

@@ -0,0 +1,13 @@
+from django.views.generic import TemplateView
+
+
+class ChangelogView(TemplateView):
+    template_name = "moku/changelog.jinja"
+
+
+class PrivacyView(TemplateView):
+    template_name = "moku/privacy.jinja"
+
+
+class TermsView(TemplateView):
+    template_name = "moku/terms.jinja"