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 | 31 | ||||
| -rw-r--r-- | pydis_site/templates/home/account/delete.html | 44 | ||||
| -rw-r--r-- | pydis_site/templates/home/account/settings.html | 137 |
4 files changed, 212 insertions, 1 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 8cdac0de..2ba5bdd4 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -102,7 +102,15 @@ {% else %} <form method="post" action="{% url 'logout' %}"> {% csrf_token %} - <button type="submit" class="navbar-item button is-white is-inline is-fullwidth has-text-left is-size-navbar-menu has-text-grey-dark">Logout</button> + + <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 modal-button" data-target="account-modal"> + <span class="is-icon"> + <i class="fas fa-cog"></i> + </span> + </a> + </div> </form> {% endif %} @@ -116,3 +124,24 @@ </a> </div> </nav> + +{% if user.is_authenticated %} + <script defer type="text/javascript"> + // Script which loads and sets up the account settings modal. + // This script must be placed in a template, or rewritten to take the fetch + // URL as a function argument, in order to be used. + + "use strict"; + + // Create and prepend a new div for this modal + let element = document.createElement("div"); + document.body.prepend(element); + + fetch("{% url "account_settings" %}") // Fetch the URL + .then((response) => response.text()) // Read in the data stream as text + .then((text) => { + element.outerHTML = text; // Replace the div's HTML with the loaded modal HTML + setupModal(document.getElementById("account-modal")); // Set up the modal + }); + </script> +{% endif %} diff --git a/pydis_site/templates/home/account/delete.html b/pydis_site/templates/home/account/delete.html new file mode 100644 index 00000000..1020a82b --- /dev/null +++ b/pydis_site/templates/home/account/delete.html @@ -0,0 +1,44 @@ +{% extends 'base/base.html' %} + +{% load crispy_forms_tags %} +{% load static %} + +{% block title %}Delete Account{% endblock %} + +{% block content %} + {% include "base/navbar.html" %} + + <section class="section content"> + <div class="container"> + <h2 class="is-size-2 has-text-centered">Account Deletion</h2> + + <div class="columns is-centered"> + <div class="column is-half-desktop is-full-tablet is-full-mobile"> + + <article class="message is-danger"> + <div class="message-body"> + <p> + You have requested to delete the account with username + <strong><span class="has-text-dark is-family-monospace">{{ user.username }}</span></strong>. + </p> + + <p> + Please note that this <strong>cannot be undone</strong>. + </p> + + <p> + To verify that you'd like to remove your account, please type your username into the box below. + </p> + </div> + </article> + </div> + </div> + + <div class="columns is-centered"> + <div class="column is-half-desktop is-full-tablet is-full-mobile"> + {% crispy form %} + </div> + </div> + </div> + </section> +{% endblock %} diff --git a/pydis_site/templates/home/account/settings.html b/pydis_site/templates/home/account/settings.html new file mode 100644 index 00000000..9f48d736 --- /dev/null +++ b/pydis_site/templates/home/account/settings.html @@ -0,0 +1,137 @@ +{% load socialaccount %} + +{# 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. #} + +<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> + + {% 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> + |