From 8c4d99d9e8d05bdb0b67c6fbd580364897104fb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=AD=C3=B0ir=20Valberg=20Gu=C3=B0mundsson?=
 <valberg@orn.li>
Date: Tue, 26 Mar 2019 12:14:54 +0100
Subject: [PATCH] Big big overhaul.

---
 src/profiles/templates/account/email.html     | 135 +++++++++++-------
 src/profiles/templates/account/login.html     |   2 +-
 src/profiles/templates/account/logout.html    |   2 +-
 .../templates/account/password_change.html    |  17 ++-
 .../templates/account/password_reset.html     |   2 +-
 src/profiles/templates/account/signup.html    |   2 +-
 .../templates/allauth_2fa/authenticate.html   |   2 +-
 .../templates/allauth_2fa/backup_tokens.html  |  59 +++++---
 .../templates/allauth_2fa/remove.html         |  27 ++--
 src/profiles/templates/allauth_2fa/setup.html |  51 +++----
 src/profiles/templates/profile_base.html      |  50 ++++---
 src/profiles/templates/profile_detail.html    |  79 +++++++---
 src/profiles/views.py                         |   1 +
 13 files changed, 268 insertions(+), 161 deletions(-)

diff --git a/src/profiles/templates/account/email.html b/src/profiles/templates/account/email.html
index 743d9c4d..a5817f61 100644
--- a/src/profiles/templates/account/email.html
+++ b/src/profiles/templates/account/email.html
@@ -1,76 +1,107 @@
 {% extends 'profile_base.html' %}
 
-{% load i18n %}
 {% load bootstrap3 %}
 
-{% block head_title %}{% trans "Account" %}{% endblock %}
+{% block head_title %}Account{% endblock %}
 
 {% block profile_content %}
 
-  <div class="row">
-    <div class="col-md-12">
+<div class="row">
+  <div class="col-md-12">
 
-    <h1>{% trans "E-mail Addresses" %}</h1>
-{% if user.emailaddress_set.all %}
-<p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4>E-mail Addresses</h4>
+      </div>
+      <div class="panel-body">
 
-<form action="{% url 'account_email' %}" class="email_list" method="post">
-{% csrf_token %}
-<fieldset class="blockLabels">
+        {% if user.emailaddress_set.all %}
+        <p>The following e-mail addresses are associated with your account:</p>
+        <form action="{% url 'account_email' %}" class="email_list" method="post">
+          {% csrf_token %}
+          <fieldset class="blockLabels">
 
-  {% for emailaddress in user.emailaddress_set.all %}
-<div class="ctrlHolder">
-      <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
+            <table class="table">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Address</th>
+                  <th>Status</th>
+                  <th>Primary?</th>
+                </tr>
+              </thead>
+              <tbody>
 
-      <input
-        id="email_radio_{{forloop.counter}}"
-        type="radio"
-        name="email"
-        value="{{emailaddress.email}}"
-        {% if emailaddress.primary or user.emailaddress_set.count == 1 %}
-          checked="checked"
-        {%endif %}
-        />
+                {% for emailaddress in user.emailaddress_set.all %}
+                <tr class="ctrlHolder">
+                  <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
+                      <td>
+                        <input
+                                id="email_radio_{{forloop.counter}}"
+                                type="radio"
+                                name="email"
+                                value="{{emailaddress.email}}"
+                                {% if emailaddress.primary or user.emailaddress_set.count == 1 %}
+                                checked="checked"
+                                {%endif %}
+                        />
+                      </td>
+                    <td>
+                      {{ emailaddress.email }}
+                    </td>
+                    <td>
+                      {% if emailaddress.verified %}
+                      <span class="label label-success">Verified</span>
+                      {% else %}
+                      <span class="label label-danger">Unverified</span>
+                      {% endif %}
+                    </td>
+                    <td>
+                      {% if emailaddress.primary %}<span class="label label-primary">Primary</span>{% endif %}
+                    </td>
+                  </label>
+                </tr>
+                {% endfor %}
 
-{{ emailaddress.email }}
-    {% if emailaddress.verified %}
-    <span class="badge">{% trans "Verified" %}</span>
-    {% else %}
-    <span class="badge">{% trans "Unverified" %}</span>
-    {% endif %}
-      {% if emailaddress.primary %}<span class="badge">{% trans "Primary" %}</span>{% endif %}
-</label>
-</div>
-  {% endfor %}
+              </tbody>
+            </table>
 
-<div class="buttonHolder">
-      <button class="btn btn-black" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
-      <button class="btn btn-black" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
-      <button class="btn btn-black" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
-</div>
+            <div class="buttonHolder">
+              <button class="btn btn-success" type="submit" name="action_primary" >Make Primary</button>
+              <button class="btn btn-primary" type="submit" name="action_send" >Re-send Verification</button>
+              <button class="btn btn-danger" type="submit" name="action_remove" >Remove</button>
+            </div>
 
-</fieldset>
-</form>
+          </fieldset>
+        </form>
+        {% else %}
+          <p>
+            <strong>Warning:</strong> You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc.
+          </p>
+        {% endif %}
+      </div>
+    </div>
 
-{% else %}
-<p><strong>{% trans 'Warning:'%}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}</p>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h4>Add E-mail Address</h4>
+      </div>
+      <div class="panel-body">
+        <form method="post" action="{% url 'account_email' %}" class="add_email">
+          {% csrf_token %}
+          {% bootstrap_form form %}
+          <button name="action_add" class="btn btn-success" type="submit">Add E-mail</button>
+        </form>
+      </div>
+    </div>
 
-{% endif %}
-
-
-    <h2>{% trans "Add E-mail Address" %}</h2>
-
-    <form method="post" action="{% url 'account_email' %}" class="add_email">
-        {% csrf_token %}
-        {% bootstrap_form form %}
-        <button name="action_add" class="btn btn-black" type="submit">{% trans "Add E-mail" %}</button>
-    </form>
   </div>
 </div>
 
+
 <script type="text/javascript">
 (function() {
-  var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
+  var message = "Do you really want to remove the selected e-mail address?";
   var actions = document.getElementsByName('action_remove');
   if (actions.length) {
     actions[0].addEventListener("click", function(e) {
diff --git a/src/profiles/templates/account/login.html b/src/profiles/templates/account/login.html
index 98c11dd2..c00da18e 100644
--- a/src/profiles/templates/account/login.html
+++ b/src/profiles/templates/account/login.html
@@ -16,7 +16,7 @@
       <form class="login" method="POST">
         {% csrf_token %}
         {% bootstrap_form form %}
-        <button class="form-control btn btn-black" type="submit">{% trans "Login" %}</button>
+        <button class="form-control btn btn-primary" type="submit">{% trans "Login" %}</button>
         {% if redirect_field_value %}
           <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
         {% endif %}
diff --git a/src/profiles/templates/account/logout.html b/src/profiles/templates/account/logout.html
index 4318f042..8aa906ea 100644
--- a/src/profiles/templates/account/logout.html
+++ b/src/profiles/templates/account/logout.html
@@ -10,7 +10,7 @@
       <form method="post">
         {% csrf_token %}
         <button type="submit"
-                class="btn btn-black form-control">
+                class="btn btn-danger form-control">
           Logout
         </button>
       </form>
diff --git a/src/profiles/templates/account/password_change.html b/src/profiles/templates/account/password_change.html
index 00b77419..a616160e 100644
--- a/src/profiles/templates/account/password_change.html
+++ b/src/profiles/templates/account/password_change.html
@@ -7,13 +7,18 @@
 
   <div class="row">
     <div class="col-md-12">
-      <h1>Change password</h1>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h4>Change Password</h4>
+        </div>
+        <div class="panel-body">
 
-      <form class="login" method="POST">
-        {% csrf_token %}
-        {% bootstrap_form form %}
-        <button class="form-control btn btn-black" type="submit">Save</button>
-      </form>
+          <form class="login" method="POST">
+            {% csrf_token %}
+            {% bootstrap_form form %}
+            <button class="form-control btn btn-primary" type="submit">Save</button>
+          </form>
+        </div>
     </div>
   </div>
 
diff --git a/src/profiles/templates/account/password_reset.html b/src/profiles/templates/account/password_reset.html
index 53e1e0fb..d87cfa86 100644
--- a/src/profiles/templates/account/password_reset.html
+++ b/src/profiles/templates/account/password_reset.html
@@ -16,7 +16,7 @@
     <form class="login" method="POST">
       {% csrf_token %}
       {% bootstrap_form form %}
-      <button class="form-control btn btn-black" type="submit">Send e-mail</button>
+      <button class="form-control btn btn-primary" type="submit">Send e-mail</button>
     </form>
   </div>
 {% endblock %}
diff --git a/src/profiles/templates/account/signup.html b/src/profiles/templates/account/signup.html
index 1361b8f9..2e83b5c6 100644
--- a/src/profiles/templates/account/signup.html
+++ b/src/profiles/templates/account/signup.html
@@ -13,7 +13,7 @@
       <form class="login" method="POST">
         {% csrf_token %}
         {% bootstrap_form form %}
-        <button class="form-control btn btn-black" type="submit">{% trans "Sign Up" %}</button>
+        <button class="form-control btn btn-success" type="submit">{% trans "Sign Up" %}</button>
       </form>
     </div>
   </div>
diff --git a/src/profiles/templates/allauth_2fa/authenticate.html b/src/profiles/templates/allauth_2fa/authenticate.html
index 077813e0..4ed4008f 100644
--- a/src/profiles/templates/allauth_2fa/authenticate.html
+++ b/src/profiles/templates/allauth_2fa/authenticate.html
@@ -15,7 +15,7 @@
         {% bootstrap_form form %}
 
         <button type="submit"
-                class="btn btn-black form-control">
+                class="btn btn-primary form-control">
           {% trans 'Authenticate' %}
         </button>
       </form>
diff --git a/src/profiles/templates/allauth_2fa/backup_tokens.html b/src/profiles/templates/allauth_2fa/backup_tokens.html
index 76ff43ab..7086bf5e 100644
--- a/src/profiles/templates/allauth_2fa/backup_tokens.html
+++ b/src/profiles/templates/allauth_2fa/backup_tokens.html
@@ -2,34 +2,49 @@
 
 {% load account %}
 {% load bootstrap3 %}
-{% load i18n %}
 
 {% block profile_content %}
   <div class="row">
     <div class="col-md-12">
-      <h1>
-        {% trans "Two-Factor Authentication Backup Tokens" %}
-      </h1>
 
-      <ul>
-        {% for token in backup_tokens %}
-        <li>{{ token.token }}</li>
-
-        {% empty %}
-        {% trans 'No tokens. Press the button below to generate some.' %}
-
-        {% endfor %}
-      </ul>
-
-      <form method="post">
-        {% csrf_token %}
-        <div class="buttonHolder">
-          <button class="btn btn-black" type="submit">
-          {% trans 'Generate backup tokens' %}
-          </button>
-          <a class="btn btn-warning" href="{% url 'two-factor-remove' %}">Disable Two-Factor</a>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h4>Two-Factor Authentication Backup Tokens</h4>
         </div>
-      </form>
+        <div class="panel-body">
+            {% if backup_tokens %}
+          <ul>
+            {% for token in backup_tokens %}
+            <li>{{ token.token }}</li>
+            {% endfor %}
+          </ul>
+          {% else %}
+          <p>No tokens. Press the button below to generate some.</p>
+          {% endif %}
+
+          <form method="post">
+            {% csrf_token %}
+            <div class="buttonHolder">
+              <button class="btn btn-success" type="submit">
+                {% if backup_tokens %}
+                  Generate new backup tokens
+                {% else %}
+                  Generate new backup tokens
+                {% endif %}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div class="panel panel-danger">
+        <div class="panel-heading">
+          <h4>Disable Two-Factor Authenticatoin</h4>
+        </div>
+        <div class="panel-body">
+          <a class="btn btn-danger" href="{% url 'two-factor-remove' %}">Disable Two-Factor</a>
+        </div>
+      </div>
     </div>
   </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/profiles/templates/allauth_2fa/remove.html b/src/profiles/templates/allauth_2fa/remove.html
index 29798222..0cb5e590 100644
--- a/src/profiles/templates/allauth_2fa/remove.html
+++ b/src/profiles/templates/allauth_2fa/remove.html
@@ -2,23 +2,26 @@
 
 {% load account %}
 {% load bootstrap3 %}
-{% load i18n %}
 
 {% block profile_content %}
   <div class="row">
     <div class="col-md-12">
-      <h1>
-        {% trans "Disable Two-Factor Authentication" %}
-      </h1>
+      <div class="panel panel-danger">
+        <div class="panel-heading">
+          <h4>Disable Two-Factor Authentication</h4>
+        </div>
+        <div class="panel-body">
+          <p>Are you sure you want to disable two-factor authentication?</p>
 
-      <p>{% trans "Are you sure?" %}</p>
-
-      <form method="post">
-        {% csrf_token %}
-        <button class="btn btn-danger" type="submit">
-          {% trans 'Disable Two-Factor' %}
-        </button>
-      </form>
+          <form method="post">
+            {% csrf_token %}
+            <button class="btn btn-danger" type="submit">
+              Yes, I'm sure
+            </button>
+            <a href="{% url 'two-factor-backup-tokens' %}" class="btn btn-success">No, I've changed my mind.</a>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/profiles/templates/allauth_2fa/setup.html b/src/profiles/templates/allauth_2fa/setup.html
index 53bca6ed..87dfca33 100644
--- a/src/profiles/templates/allauth_2fa/setup.html
+++ b/src/profiles/templates/allauth_2fa/setup.html
@@ -7,35 +7,38 @@
 {% block profile_content %}
   <div class="row">
     <div class="col-md-12">
-      <h1>
-        {% trans "Setup Two-Factor Authentication" %}
-      </h1>
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h4>Setup Two-Factor Authentication</h4>
+        </div>
+        <div class="panel-body">
+          <h4>
+            {% trans 'Step 1' %}:
+          </h4>
 
-      <h4>
-        {% trans 'Step 1' %}:
-      </h4>
+          <p>
+            {% trans 'Scan the QR code below with a token generator of your choice (for instance Google Authenticator).' %}
+          </p>
 
-      <p>
-        {% trans 'Scan the QR code below with a token generator of your choice (for instance Google Authenticator).' %}
-      </p>
+          <img src="{% url 'two-factor-qr-code' %}" />
 
-      <img src="{% url 'two-factor-qr-code' %}" />
+          <h4>
+            {% trans 'Step 2' %}:
+          </h4>
 
-      <h4>
-        {% trans 'Step 2' %}:
-      </h4>
+          <p>
+            {% trans 'Input a token generated by the app:' %}
+          </p>
 
-      <p>
-        {% trans 'Input a token generated by the app:' %}
-      </p>
-
-      <form method="post">
-        {% csrf_token %}
-        {% bootstrap_form form %}
-        <button class="btn btn-black" type="submit">
-          {% trans 'Verify' %}
-        </button>
-      </form>
+          <form method="post">
+            {% csrf_token %}
+            {% bootstrap_form form %}
+            <button class="btn btn-success" type="submit">
+              {% trans 'Verify' %}
+            </button>
+          </form>
+        </div>
+      </div>
     </div>
   </div>
 {% endblock %}
\ No newline at end of file
diff --git a/src/profiles/templates/profile_base.html b/src/profiles/templates/profile_base.html
index 7302bc47..8642a8df 100644
--- a/src/profiles/templates/profile_base.html
+++ b/src/profiles/templates/profile_base.html
@@ -5,64 +5,78 @@
 
 {% block content %}
 
+<div class="page-header">
+  <h2>Your BornHack account</h2>
+</div>
+
 <div class="row">
   <div class="col-md-2">
     <ul class="nav nav-pills nav-stacked">
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
-          <a href="{% url 'profiles:detail' %}">
+
+      <li><b>Profile settings</b></li>
+
+      {% url 'profiles:detail' as profile_detail_url %}
+      <li {% if request.path == profile_detail_url %}class="active"{% endif %}>
+          <a href="{{ profile_detail_url }}">
             Profile
           </a>
       </li>
 
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
-        <a href="{% url 'account_change_password' %}">
+      {% url 'account_change_password' as password_url %}
+      <li {% if request.path == password_url %}class="active"{% endif %}>
+        <a href="{{ password_url }}">
           Password
         </a>
       </li>
 
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
-        <a href="{% url 'two-factor-setup' %}">
-          Two-Factor settings
-        </a>
-      </li>
-
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
-        <a href="{% url 'account_email' %}">
+      {% url 'account_email' as email_url %}
+      <li {% if request.path == email_url %}class="active"{% endif %}>
+        <a href="{{ email_url }}">
           Manage emails
         </a>
       </li>
 
+      {% url 'two-factor-setup' as two_factor_url %}
+      <li {% if "two_factor" in request.path %}class="active"{% endif %}>
+        <a href="{{ two_factor_url }}">
+          Two-Factor settings
+        </a>
+      </li>
+
       {% if user.orders.exists %}
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
+      <li><b>Shop</b></li>
+
+      <li {% if view.active_menu == "orders" %}class="active"{% endif %}>
         <a href="{% url 'shop:order_list' %}">
           Orders
         </a>
       </li>
 
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
+      <li {% if view.active_menu == "tickets" %}class="active"{% endif %}>
         <a href="{% url 'tickets:shopticket_list' %}">
           Tickets
         </a>
       </li>
 
       {% if user.creditnotes.exists %}
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
+      <li {% if view.active_menu == "credit_notes" %}class="active"{% endif %}>
         <a href="{% url 'shop:creditnote_list' %}">
           Credit Notes
         </a>
       </li>
       {% endif %}
+
       {% endif %}
 
-      <li {% if view.active_menu == "profile" %}class="active"{% endif %}>
+      <li><b>Misc.</b></li>
+      <li {% if view.active_menu == "tokens" %}class="active"{% endif %}>
         <a href="{% url 'tokens:tokenfind_list' %}">
           Secret Tokens
         </a>
       </li>
 
-      <p><b>You are logged in as {{ request.user.email }}</b></p>
-
       <hr />
+      <p><b>You are logged in as {{ request.user.email }}</b></p>
 
     </ul>
   </div>
diff --git a/src/profiles/templates/profile_detail.html b/src/profiles/templates/profile_detail.html
index 09c44898..d5e94755 100644
--- a/src/profiles/templates/profile_detail.html
+++ b/src/profiles/templates/profile_detail.html
@@ -1,26 +1,61 @@
 {% extends 'profile_base.html' %}
 
 {% block profile_content %}
-<p class="lead">If you intend to join one or more teams you can use the profile to help the team responsible understand who you are and what you have to offer. Please also include availability if you are not joining us for the entire week.</p>
-<p class="lead">Apart from Public Credit Name the information in your profile is only visible to team responsible and organisers.</p>
-<h3>Your Profile</h3>
-<table class="table table-horisontal">
-  <tr>
-    <td><b>Name (not visible to the public)</b></td>
-    <td>{{ profile.name|default:"N/A" }}</td>
-  </tr>
-  <tr>
-    <td><b>Description (not visible to the public)</b></td>
-    <td>{{ profile.description|default:"N/A" }}</td>
-  </tr>
-  <tr>
-    <td><b>Public Credit Name (visible to the public, leave empty if you want no credits on this website)</b></td>
-    <td>{{ profile.public_credit_name|default:"N/A" }} {% if profile.public_credit_name %}({% if profile.public_credit_name_approved %}<span class="text-success">approved</span>{% else %}<span class="text-danger">pending approval</span>{% endif %}){% endif %}</td>
-  </tr>
-  <tr>
-    <td><b>NickServ username (visible to the public on IRC, used to handle team channel ACLs)</b></td>
-    <td>{{ profile.nickserv_username|default:"N/A" }}</td>
-  </tr>
-</table>
-<a href="{% url 'profiles:update' %}" class="btn btn-black"><i class="fas fa-edit"></i> Edit Profile</a>
+{% if not profile.description %}
+<div class="alert alert-danger">
+  <p class="lead">
+    Attention!
+  </p>
+  <p>
+    You have not written anything in your "description".
+  </p>
+  <p>
+    If you intend to join one or more teams you can use the profile to help the team responsible understand who you are and what you have to offer. Please also include availability if you are not joining us for the entire week.
+  </p>
+</div>
+{% endif %}
+
+
+
+
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <a href="{% url 'profiles:update' %}" class="btn btn-primary pull-right clearfix"><i class="fas fa-edit"></i> Edit Profile</a>
+    <h4>Your information</h4>
+  </div>
+  <div class="panel-body">
+    <table class="table table-striped">
+      <tr>
+        <td>
+          <b>Name</b><br />
+          <small>(not visible to the public)</small></td>
+        <td>{{ profile.name|default:"N/A" }}</td>
+      </tr>
+      <tr>
+        <td>
+          <b>Description</b><br />
+          <small>(not visible to the public)</small>
+        </td>
+        <td>{{ profile.description|default:"N/A" }}</td>
+      </tr>
+      <tr>
+        <td>
+          <b>Public Credit Name</b><br />
+          <small>(visible to the public, leave empty if you want no credits on this website)</small>
+        </td>
+        <td>
+          {{ profile.public_credit_name|default:"N/A" }} {% if profile.public_credit_name %}({% if profile.public_credit_name_approved %}<span class="text-success">approved</span>{% else %}<span class="text-danger">pending approval</span>{% endif %}){% endif %}</td>
+      </tr>
+      <tr>
+        <td>
+          <b>NickServ username</b><br />
+          <small>(visible to the public on IRC, used to handle team channel ACLs)</small>
+        </td>
+        <td>
+          {{ profile.nickserv_username|default:"N/A" }}
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>
 {% endblock profile_content %}
diff --git a/src/profiles/views.py b/src/profiles/views.py
index 4ac9a02a..a535145d 100644
--- a/src/profiles/views.py
+++ b/src/profiles/views.py
@@ -9,6 +9,7 @@ from . import models
 class ProfileDetail(LoginRequiredMixin, DetailView):
     model = models.Profile
     template_name = 'profile_detail.html'
+    active_menu = 'profile'
 
     def get_object(self, queryset=None):
         return models.Profile.objects.get(user=self.request.user)