Add user settings modal, with connections management and account deletion

1 files changed, 133 insertions, 8 deletions

diff --git a/pydis_site/templates/home/account/settings.html b/pydis_site/templates/home/account/settings.html
index ba1d38a2..9f48d736 100644
--- a/pydis_site/templates/home/account/settings.html
+++ b/pydis_site/templates/home/account/settings.html
@@ -1,12 +1,137 @@
-{% extends 'base/base.html' %}
-{% load static %}
+{% load socialaccount %}
 
-{% block title %}My Account{% endblock %}
+{# This template is just for a modal, which is actually inserted into the navbar #}
+{# template. Take a look at `navbar.html` to see how it's inserted. #}
 
-{% block content %}
-  {% include "base/navbar.html" %}
+<div class="modal" id="account-modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <div class="modal-card-head">
+      <div class="modal-card-title">Settings for {{ user.username }}</div>
 
-  <section class="section">
+      {% if groups %}
+        <div>
+          {% for group in groups %}
+            <span class="tag is-primary">{{ group.name }}</span>
+          {% endfor %}
+        </div>
+      {% else %}
+        <span class="tag is-dark">No groups</span>
+      {% endif %}
+    </div>
+    <div class="modal-card-body">
+      <h3 class="title">Connections</h3>
+      <div class="columns">
+        {% if discord_provider is not None %}
+          <div class="column">
+            <div class="box">
+              {% if not discord %}
+                <div class="media">
+                  <div class="media-left">
+                    <div class="image">
+                      <i class="fab fa-discord fa-3x has-text-primary"></i>
+                    </div>
+                  </div>
+                  <div class="media-content">
+                    <div class="title is-5">Discord</div>
+                    <div class="subtitle is-6">Not connected</div>
+                  </div>
+                </div>
+                <div>
+                  <br />
+                  <a class="button is-primary" href="{% provider_login_url "discord" process="connect" %}">
+                    <span class="icon">
+                      <i class="fad fa-link"></i>
+                    </span>
+                    <span>Connect</span>
+                  </a>
+                </div>
+              {% else %}
+                <div class="media">
+                  <div class="media-left">
+                    <div class="image">
+                      <i class="fab fa-discord fa-3x has-text-primary"></i>
+                    </div>
+                  </div>
+                  <div class="media-content">
+                    <div class="title is-5">Discord</div>
+                    <div class="subtitle is-6">{{ user.username }}</div>
+                  </div>
+                </div>
+                <div>
+                  <br />
+                  <button class="button" disabled>
+                    <span class="icon">
+                      <i class="fas fa-check"></i>
+                    </span>
+                    <span>Connected</span>
+                  </button>
+                </div>
+              {% endif %}
+            </div>
+          </div>
+        {% endif %}
+
+        {% if github_provider is not None %}
+          <div class="column">
+            <div class="box">
+              {% if not github %}
+                <div class="media">
+                  <div class="media-left">
+                    <div class="image">
+                      <i class="fab fa-github fa-3x"></i>
+                    </div>
+                  </div>
+                  <div class="media-content">
+                    <div class="title is-5">GitHub</div>
+                    <div class="subtitle is-6">Not connected</div>
+                  </div>
+                </div>
+                <div>
+                  <br />
+                  <a class="button is-primary" href="{% provider_login_url "github" process="connect" %}">
+                    <span class="icon">
+                      <i class="fad fa-link"></i>
+                    </span>
+                    <span>Connect</span>
+                  </a>
+                </div>
+              {% else %}
+                <div class="media">
+                  <div class="media-left">
+                    <div class="image">
+                      <i class="fab fa-github fa-3x"></i>
+                    </div>
+                  </div>
+                  <div class="media-content">
+                    <div class="title is-5">GitHub</div>
+                    <div class="subtitle is-6">{{ github.extra_data.name }}</div>
+                  </div>
+                </div>
+                <div>
+                  <form method="post" action="{% url "account_settings" %}" type="submit">
+                  {% csrf_token %}
+
+                  <input type="hidden" name="provider" value="github" />
+
+                  <br />
+                  <button type="submit" class="button is-danger">
+                    <span class="icon">
+                      <i class="fas fa-times"></i>
+                    </span>
+                    <span>Disconnect</span>
+                  </button>
+                </form>
+                </div>
+              {% endif %}
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+    <div class="modal-card-foot">
+      <a class="button is-danger" href="{% url "account_delete" %}">Delete Account</a>
+    </div>
+  </div>
+</div>
 
-  </section>
-{% endblock %}