From 49376a76289ab22f1aff55d8971b0ea198ec9316 Mon Sep 17 00:00:00 2001
From: Gareth Coles <gdude2002@gmail.com>
Date: Wed, 23 Oct 2019 01:07:24 +0100
Subject: Add user settings modal, with connections management and account
 deletion

---
 pydis_site/templates/base/base.html             |   1 +
 pydis_site/templates/base/navbar.html           |  18 ++-
 pydis_site/templates/home/account/settings.html | 141 ++++++++++++++++++++++--
 3 files changed, 151 insertions(+), 9 deletions(-)

(limited to 'pydis_site/templates')

diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html
index a9b31c0f..4c70d778 100644
--- a/pydis_site/templates/base/base.html
+++ b/pydis_site/templates/base/base.html
@@ -28,6 +28,7 @@
 
   {# Font-awesome here is defined explicitly so that we can have Pro #}
   <script src="https://kit.fontawesome.com/ae6a3152d8.js"></script>
+  <script src="{% static "js/base/modal.js" %}"></script>
 
   <link rel="stylesheet" href="{% static "css/base/base.css" %}">
   <link rel="stylesheet" href="{% static "css/base/notification.css" %}">
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index bd0bab40..6943c2b6 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -105,7 +105,7 @@
 
               <div class="field navbar-item is-paddingless is-fullwidth is-grouped">
                 <button type="submit" class="button is-white is-inline is-fullwidth has-text-left is-size-navbar-menu has-text-grey-dark">Logout</button>
-                <a title="Settings" class="button is-white is-inline has-text-right is-size-navbar-menu has-text-grey-dark" href="{% url "account_settings" %}">
+                <a title="Settings" class="button is-white is-inline has-text-right is-size-navbar-menu has-text-grey-dark modal-button" data-target="account-modal">
                   <span class="is-icon">
                     <i class="fas fa-cog"></i>
                   </span>
@@ -124,3 +124,19 @@
     </a>
   </div>
 </nav>
+
+{% if user.is_authenticated %}
+  <script defer type="text/javascript">
+    "use strict";
+
+    let element = document.createElement("div");
+    document.body.prepend(element);
+
+    fetch("{% url "account_settings" %}")
+      .then((response) => response.text())
+      .then((text) => {
+        element.outerHTML = text;
+        setupModal(document.getElementById("account-modal"));
+      });
+  </script>
+{% endif %}
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 %}
-- 
cgit v1.2.3