Allow logged-in user to connect social accounts

- Add link to social account management from the profile page
- Override allauth templated related to managing social account connections
- Did my best to apply reasonable styles per other pages

templates/socialaccount/connections.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% load i18n %}
+
+{% block head_title %}{% trans "Account Connections" %}{% endblock %}
+
+{% block content %}
+<div class="py-0 px-3 mb-3 md:py-6 md:px-0">
+    <div class="md:pt-11 md:mt-11 w-full md:w-1/2 mx-auto" x-data="{ tab: '#social' }">
+      <div class="md:w-full">
+        <h1 class="text-4xl text-center">{% trans "Account Connections" %}</h1>
+
+        {% if form.accounts %}
+            <p class="mt-0 text-center">{% blocktrans %}You can sign in to your account using any of the following third party accounts:{% endblocktrans %}</p>
+    </div>
+  </div>
+</div>
+
+    <form method="post" action="{% url 'socialaccount_connections' %}">
+        <div class="mx-auto space-y-4 w-2/3">
+    {% csrf_token %}
+
+    <fieldset>
+        {% if form.non_field_errors %}
+            <div id="errorMsg">{{ form.non_field_errors }}</div>
+        {% endif %}
+
+        {% for base_account in form.accounts %}
+            {% with base_account.get_provider_account as account %}
+                <div>
+                    <label for="id_account_{{ base_account.id }}" class="text-xs uppercase text-slate dark:text-white/70">
+                        <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
+                        <span class="socialaccount_provider {{ base_account.provider }} {{ account.get_brand.id }}">{{account.get_brand.name}}</span>
+                        {{ account }}
+                    </label>
+                </div>
+            {% endwith %}
+        {% endfor %}
+
+        <div class="flex justify-between mb-4">
+            <button type="submit" class="py-3 px-4 text-white uppercase rounded border border-orange bg-orange md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans 'Remove' %}</button>
+        </div>
+
+    </fieldset>
+    </div>
+    </form>
+
+{% else %}
+    <p class="mt-0 text-center">{% trans 'You currently have no social network accounts connected to this account.' %}</p>
+{% endif %}
+
+<h2 class="text-4xl text-center">{% trans 'Add a 3rd Party Account' %}</h2>
+
+<ul class="space-y-4 w-full">
+    {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
+</ul>
+
+{% include "socialaccount/snippets/login_extra.html" %}
+
+{% endblock %}

templates/users/profile_new.html

@@ -88,6 +88,11 @@
             </div>
           </form>
         </div>
+
+        <div class="rounded bg-white dark:bg-charcoal p-4">
+          <h3>{% trans "Account Connections" %}</h3>
+          <a href="{% url 'socialaccount_connections' %}"><button class="py-3 px-4 text-white uppercase rounded border border-orange bg-orange md:py-1 md:px-4 md:text-lg bg-orange border-orange dark:bg-charcoal dark:text-orange">{% trans 'Manage Account Connections' %}</button></a>
+        </div>
       </div>
     </div>
   </div>

users/views.py

@@ -8,6 +8,7 @@ from django.views.generic.edit import FormView
 from django.views.generic.base import TemplateView
 
 from allauth.account.forms import ChangePasswordForm
+from allauth.socialaccount.models import SocialAccount
 
 from rest_framework import generics
 from rest_framework import viewsets
@@ -141,8 +142,22 @@ class NewCurrentUserProfileView(LoginRequiredMixin, SuccessMessageMixin, Templat
         context["profile_preferences_form"] = PreferencesForm(
             instance=self.request.user.preferences
         )
+        context["social_accounts"] = self.get_social_accounts()
         return context
 
+    def get_social_accounts(self):
+        account_data = []
+        for account in SocialAccount.objects.filter(user=self.request.user):
+            provider_account = account.get_provider_account()
+            account_data.append(
+                {
+                    "id": account.pk,
+                    "provider": account.provider,
+                    "name": provider_account.to_str(),
+                }
+            )
+        return account_data
+
     def post(self, request, *args, **kwargs):
         """
         Process each form submission individually if present