Display the services.

src/project/static/css/style.css

@@ -256,7 +256,7 @@ div.content-view>h2 {
 
 div.services {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   gap: var(--double-space);
   flex-wrap: wrap;
 }

src/project/templates/base.html

@@ -78,13 +78,11 @@
                         </a>
                     </li>
 
-                    {% comment %}
                     <li>
                         <a href="/services" class="{% active_path "services" "current" %}">
                             Services
                         </a>
                     </li>
-                    {% endcomment %}
 
                     <li>
                         <a href="{% url "account_email" %}" class="{% active_path "account_email" "current" %}">

src/project/templates/services_overview.html

@@ -2,61 +2,39 @@
 
 {% block content %}
 
-    <div class="content-view">
-    Coming soon!
-    </div>
-
-    {% comment %}
     <div class="content-view">
         <h2>Services you subscribe to</h2>
         <div class="services">
+            {% for service in active_services %}
             <div>
                 <div class="description">
-                    <h3>Passit</h3>
-                    <p>Passit is a service that blabla</p>
+                    <h3>{{ service.name }}</h3>
+                    <p>...</p>
                     <a href="#">Read more &hellip;</a>
                 </div>
                 <a>Unsubscribe</a>
             </div>
+            {% empty %}
+            <p>You are not subscribed to any service.</p>
+            {% endfor %}
         </div>
     </div>
 
     <div class="content-view">
         <h2>Available services</h2>
         <div class="services">
+            {% for service in non_active_services %}
             <div>
                 <div class="description">
-                    <h3>Forgejo</h3>
-                    <p>Forgejo is a service that blabla</p>
-                    <a href="#">Read more &hellip;</a>
-                </div>
-                <a>Subscribe</a>
-            </div>
-            <div>
-                <div class="description">
-                    <h3>Mastodon</h3>
-                    <p>Mastodon is a service where you can write things to people around the world.</p>
-                    <a href="#">Read more &hellip;</a>
-                </div>
-                <a>Subscribe</a>
-            </div>
-            <div>
-                <div class="description">
-                    <h3>Matrix</h3>
-                    <p>Matrix is a service that blabla</p>
-                    <a href="#">Read more &hellip;</a>
-                </div>
-                <a>Subscribe</a>
-            </div>
-            <div>
-                <div class="description">
-                    <h3>NextCloud</h3>
-                    <p>NextCloud is a service that blabla</p>
-                    <a href="#">Read more &hellip;</a>
+                    <h3>{{ service.name }}</h3>
+                    <p>{{ service.description }}</p>
+                    <a href="{{ service.url }}" target="_blank">
+                        Visit
+                    </a>
                 </div>
                 <a>Subscribe</a>
             </div>
+            {% endfor %}
         </div>
     </div>
-    {% endcomment %}
 {% endblock %}

src/project/views.py

@@ -1,12 +1,13 @@
 """Project views."""
-
 from __future__ import annotations
+from membership.models import ServiceAccess
+from services.registry import ServiceRegistry
+from utils.view_utils import render
 
 from typing import TYPE_CHECKING
 
 from accounting.models import Order
 from django_view_decorator import view
-from utils.view_utils import render
 
 if TYPE_CHECKING:
     from django.http import HttpRequest
@@ -34,4 +35,28 @@ def index(request: HttpRequest) -> HttpResponse:
 )
 def services_overview(request: HttpRequest) -> HttpResponse:
     """View to show the services overview."""
-    return render(request, "services_overview.html")
+    active_services = [
+        access.service_implementation
+        for access in ServiceAccess.objects.filter(
+            user=request.user,
+        )
+    ]
+
+    active_service_classes = [service.__class__ for service in active_services]
+
+    services = [
+        service
+        for _, service in ServiceRegistry.get_items()
+        if service not in active_service_classes
+    ]
+
+    context = {
+        "non_active_services": services,
+        "active_services": active_services,
+    }
+
+    return render(
+        request=request,
+        template_name="services_overview.html",
+        context=context,
+    )

src/services/registry.py

@@ -13,6 +13,10 @@ class ServiceInterface(Interface):
 
     registry = ServiceRegistry
 
+    name: str
+    description: str
+    url: str
+
     public: bool = False
 
     # TODO: add a way to add a something which defines the required fields for a service

src/services/services.py

@@ -3,25 +3,43 @@ from .registry import ServiceInterface
 
 class MailService(ServiceInterface):
     slug = "mail"
+    name = "Mail"
+    url = "https://mail.data.coop"
+    description = "Mail service for data.coop"
 
 
 class MatrixService(ServiceInterface):
     slug = "matrix"
+    name = "Matrix"
+    url = "https://matrix.data.coop"
+    description = "Matrix service for data.coop"
 
 
 class MastodonService(ServiceInterface):
     slug = "mastodon"
+    name = "Mastodon"
+    url = "https://social.data.coop"
+    description = "Mastodon service for data.coop"
 
 
 class NextcloudService(ServiceInterface):
     slug = "nextcloud"
+    name = "Nextcloud"
+    url = "https://cloud.data.coop"
+    description = "Nextcloud service for data.coop"
 
 
 class HedgeDocService(ServiceInterface):
     slug = "hedgedoc"
+    name = "HedgeDoc"
+    url = "https://pad.data.coop"
     public = True
+    description = "HedgeDoc service for data.coop"
 
 
 class RalllyService(ServiceInterface):
     slug = "rallly"
+    name = "Rallly"
+    url = "https://when.data.coop"
     public = True
+    description = "Rallly service for data.coop"