diff options
Diffstat (limited to 'pydis_site/templates')
| -rw-r--r-- | pydis_site/templates/base/base.html | 1 | ||||
| -rw-r--r-- | pydis_site/templates/base/navbar.html | 18 | ||||
| -rw-r--r-- | pydis_site/templates/home/account/settings.html | 141 |
3 files changed, 151 insertions, 9 deletions
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 %} |