Add integrations view

src/newsreader/accounts/templates/accounts/components/settings-form.html

@@ -7,20 +7,11 @@
       <a class="link button button--primary" href="{% url 'accounts:password-change' %}">
         {% trans "Change password" %}
       </a>
+      <a class="link button button--primary" href="{% url 'accounts:integrations' %}">
+        {% trans "Third party integrations" %}
+      </a>
 
       {% include "components/form/confirm-button.html" %}
-
-      {% if reddit_authorization_url %}
-        <a class="link button button--reddit" href="{{ reddit_authorization_url }}">
-          {% trans "Authorize Reddit account" %}
-        </a>
-      {% endif %}
-
-      {% if reddit_refresh_url %}
-        <a class="link button button--reddit" href="{{ reddit_refresh_url }}">
-          {% trans "Refresh Reddit access token" %}
-        </a>
-      {% endif %}
     </fieldset>
   </section>
 {% endblock actions %}

src/newsreader/accounts/templates/accounts/views/integrations.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block content %}
+  <main id="integrations--page" class="main">
+    <section class="section">
+      {% include "components/header/header.html" with title="Integrations" only %}
+
+      <div class="integrations">
+        <h3 class="integrations__title">Reddit</h3>
+        <div class="integrations__controls">
+          <button class="link button button--reddit {% if not reddit_authorization_url %}button--disabled{% endif %}" href="{% if reddit_authorization_url %}{{ reddit_authorization_url }}{% else %}#{% endif %}"{% if not reddit_authorization_url %} disabled{% endif %}>
+            {% trans "Authorize Reddit account" %}
+          </button>
+
+          <button class="link button button--reddit {% if not reddit_refresh_url %}button--disabled{% endif %}" href="{% if reddit_refresh_url %}{{ reddit_refresh_url }}{% else %}#{% endif %}"{% if not reddit_refresh_token %} disabled {% endif %}>
+            {% trans "Refresh Reddit access token" %}
+          </button>
+
+          <button class="link button button--reddit">
+            {% trans "Deauthorize Reddit account" %}
+          </button>
+        </div>
+      </div>
+      <div class="integrations">
+        <h3 class="integrations__title">Twitter</h3>
+        <div class="integrations__controls">
+          <button class="link button button--twitter" href="#">
+            {% trans "Authorize Twitter account" %}
+          </button>
+
+          <button class="link button button--twitter" href="#">
+            {% trans "Refresh Twitter access token" %}
+          </button>
+
+          <button class="link button button--twitter" href="#">
+            {% trans "Deauthorize Twitter account" %}
+          </button>
+        </div>
+      </div>
+    </section>
+  </main>
+{% endblock %}

src/newsreader/accounts/urls.py

@@ -5,6 +5,7 @@ from newsreader.accounts.views import (
     ActivationCompleteView,
     ActivationResendView,
     ActivationView,
+    IntegrationsView,
     LoginView,
     LogoutView,
     PasswordChangeView,
@@ -22,8 +23,10 @@ from newsreader.accounts.views import (
 
 
 urlpatterns = [
+    # Auth
     path("login/", LoginView.as_view(), name="login"),
     path("logout/", LogoutView.as_view(), name="logout"),
+    # Register
     path("register/", RegistrationView.as_view(), name="register"),
     path(
         "register/complete/",
@@ -41,6 +44,7 @@ urlpatterns = [
         ActivationView.as_view(),
         name="activate",
     ),
+    # Password
     path("password-reset/", PasswordResetView.as_view(), name="password-reset"),
     path(
         "password-reset/done/",
@@ -62,15 +66,23 @@ urlpatterns = [
         login_required(PasswordChangeView.as_view()),
         name="password-change",
     ),
-    path("settings/", login_required(SettingsView.as_view()), name="settings"),
+    # Integrations
+    # TODO update reddit callback url in reddit app settings
     path(
-        "settings/reddit/callback/",
+        "settings/integrations/reddit/callback/",
         login_required(RedditTemplateView.as_view()),
         name="reddit-template",
     ),
     path(
-        "settings/reddit/refresh/",
+        "settings/integrations/reddit/refresh/",
         login_required(RedditTokenRedirectView.as_view()),
         name="reddit-refresh",
     ),
+    path(
+        "settings/integrations",
+        login_required(IntegrationsView.as_view()),
+        name="integrations",
+    ),
+    # Settings
+    path("settings/", login_required(SettingsView.as_view()), name="settings"),
 ]

src/newsreader/accounts/views/__init__.py

@@ -1,5 +1,6 @@
 from newsreader.accounts.views.auth import LoginView, LogoutView
 from newsreader.accounts.views.integrations import (
+    IntegrationsView,
     RedditTemplateView,
     RedditTokenRedirectView,
 )

src/newsreader/accounts/views/integrations.py

@@ -12,6 +12,38 @@ from newsreader.news.collection.reddit import (
 from newsreader.news.collection.tasks import RedditTokenTask
 
 
+class IntegrationsView(TemplateView):
+    template_name = "accounts/views/integrations.html"
+
+    def get_context_data(self, **kwargs):
+        return {
+            **super().get_context_data(**kwargs),
+            **self.get_reddit_context(**kwargs),
+        }
+
+    def get_reddit_context(self, **kwargs):
+        user = self.request.user
+        reddit_authorization_url = None
+        reddit_refresh_url = None
+
+        reddit_task_active = cache.get(f"{user.email}-reddit-refresh")
+
+        if (
+            user.reddit_refresh_token
+            and not user.reddit_access_token
+            and not reddit_task_active
+        ):
+            reddit_refresh_url = reverse_lazy("accounts:reddit-refresh")
+
+        if not user.reddit_refresh_token:
+            reddit_authorization_url = get_reddit_authorization_url(user)
+
+        return {
+            "reddit_authorization_url": reddit_authorization_url,
+            "reddit_refresh_url": reddit_refresh_url,
+        }
+
+
 class RedditTemplateView(TemplateView):
     template_name = "accounts/views/reddit.html"
 

src/newsreader/accounts/views/settings.py

@@ -1,4 +1,3 @@
-from django.core.cache import cache
 from django.urls import reverse_lazy
 from django.views.generic.edit import FormView, ModelFormMixin
 
@@ -23,28 +22,5 @@ class SettingsView(ModelFormMixin, FormView):
     def get_object(self, **kwargs):
         return self.request.user
 
-    def get_context_data(self, **kwargs):
-        user = self.request.user
-
-        reddit_authorization_url = None
-        reddit_refresh_url = None
-        reddit_task_active = cache.get(f"{user.email}-reddit-refresh")
-
-        if (
-            user.reddit_refresh_token
-            and not user.reddit_access_token
-            and not reddit_task_active
-        ):
-            reddit_refresh_url = reverse_lazy("accounts:reddit-refresh")
-
-        if not user.reddit_refresh_token:
-            reddit_authorization_url = get_reddit_authorization_url(user)
-
-        return {
-            **super().get_context_data(**kwargs),
-            "reddit_authorization_url": reddit_authorization_url,
-            "reddit_refresh_url": reddit_refresh_url,
-        }
-
     def get_form_kwargs(self):
         return {**super().get_form_kwargs(), "instance": self.request.user}

src/newsreader/scss/components/header/_header.scss

@@ -0,0 +1,3 @@
+.header {
+  padding: 15px;
+}

src/newsreader/scss/components/header/index.scss

@@ -0,0 +1 @@
+@import './header';

src/newsreader/scss/components/index.scss

@@ -8,6 +8,7 @@
 
 @import './card/index';
 @import './list/index';
+@import './header/index';
 @import './messages/index';
 @import './section/index';
 @import './errorlist/index';
@@ -16,6 +17,8 @@
 @import './sidebar/index';
 @import './table/index';
 
+@import './integrations/index';
+
 @import './rules/index';
 @import './category/index';
 

src/newsreader/scss/components/integrations/_integrations.scss

@@ -0,0 +1,12 @@
+.integrations {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  padding: 15px;
+
+  &__controls {
+    display: flex;
+    gap: 10px;
+  }
+}

src/newsreader/scss/components/integrations/index.scss

@@ -0,0 +1 @@
+@import './integrations';

src/newsreader/scss/elements/button/_button.scss

@@ -44,10 +44,24 @@
 
   &--reddit {
     color: $white !important;
-    background-color: lighten($reddit-orange, 5%);
+    background-color: $reddit-orange;
 
     &:hover {
-      background-color: $reddit-orange;
+      background-color: lighten($reddit-orange, 5%);
     }
   }
+
+  &--twitter {
+    color: $white !important;
+    background-color: $twitter-blue;
+
+    &:hover {
+      background-color: lighten($twitter-blue, 5%);
+    }
+  }
+
+  &--disabled {
+    color: $font-color !important;
+    background-color: $gray !important;
+  }
 }

src/newsreader/scss/pages/index.scss

@@ -12,3 +12,4 @@
 @import './rules/index';
 
 @import './settings/index';
+@import './integrations/index';

src/newsreader/scss/pages/integrations/index.scss

@@ -0,0 +1,5 @@
+#integrations--page {
+  .section {
+    width: 70%;
+  }
+}

src/newsreader/scss/partials/_colors.scss

@@ -12,6 +12,7 @@ $font-color: rgba(48, 51, 53, 1);
 $header-color: rgba(100, 101, 102, 1);
 
 $reddit-orange: rgba(255, 69, 0, 1);
+$twitter-blue: rgba(29, 155, 240, 1);
 
 $transparant-red: transparentize($red, 0.8);
 $transparant-blue: transparentize($blue, 0.8);

src/newsreader/templates/components/form/form.html

@@ -4,7 +4,7 @@
   {% csrf_token %}
 
   {% if title %}
-    {% include "components/form/title.html" with title=title only %}
+    {% include "components/header/header.html" with title=title only %}
   {% endif %}
 
   {% block intro %}

src/newsreader/templates/components/form/title.html

@@ -1,3 +0,0 @@
-<header class="form__header">
-  <h1 class="h1 form__title">{{ title }}</h1>
-</header>

src/newsreader/templates/components/header/header.html

@@ -0,0 +1,3 @@
+<header class="header">
+  <h1 class="header__title">{{ title }}</h1>
+</header>