feat: styling account templates (#15)

maps/static/maps/css/app.scss

@@ -66,6 +66,14 @@ select.multiple {
 }
 
 @media (min-width: 60rem) {
+  .menu li:last-child {
+    &.menu__submenu-wrapper .menu__submenu {
+      min-width: unset;
+      right: 0;
+      width: auto;
+    }
+  }
+
   @supports (display:grid) {
     .my-profiles .cards {
       grid-template-columns: repeat(2, 1fr);
@@ -132,3 +140,47 @@ select.multiple {
 .card__role + .card__role {
   margin-top: rem(9);
 }
+
+.box {
+  border: dashed rem(1) var(--grey-500);
+  padding: var(--gutter);
+}
+
+.account {
+  background: $off-white;
+
+  .page-header {
+    padding-bottom: rem(50);
+    position: relative;
+    z-index: 0;
+
+    @include breakpoint-up(md) {
+      padding-bottom: rem(65);
+    }
+  }
+
+  .stack,
+  .page-header {
+    @include breakpoint-up(md) {
+      margin-left: auto;
+      margin-right: auto;
+      width: 50%;
+    }
+  }
+}
+
+.input-group + .buttons {
+  margin-top: 1.5rem;
+}
+
+.buttons .button + .button {
+  margin-top: 1.5rem;
+}
+
+.radio label.primary {
+  font-weight: $font-weight-bold;
+
+  .badge {
+    font-weight: $font-weight-normal;
+  }
+}

maps/templates/maps/account_settings.html

@@ -0,0 +1,22 @@
+{% extends 'maps/base.html' %}
+{% load static %}
+{% load i18n %}
+{% block bodyclass %}account{% endblock %}
+{% block content %}
+    <div class="page-header">
+        <p><a class="link--breadcrumb" href="{% url 'index' %}">{% trans "Home" %}</a></p>
+        <h1>{% trans 'Account settings' %}</h1>
+    </div>
+    <div class="stack">
+        <p><strong>{% trans 'Email' %}</strong></p>
+        <div class="box">
+            {{ user.email }}<br />
+            <a href="{% url 'account_email' %}">{% trans 'Manage email addresses' %}</a>
+        </div>
+        <p><strong>{% trans 'Password' %}</strong></p>
+        <div class="box">
+            *******<br />
+            <a href="{% url 'account_change_password' %}">{% trans 'Change password' %}</a>
+        </div>
+    </div>
+{% endblock %}

maps/templates/maps/base.html

@@ -20,10 +20,11 @@
   <div class="wrap container" role="document">
     <div class="content">
       <main>
-{% block content %}{% endblock %}
+      {% block content %}{% endblock %}
       </main>
     </div>
   </div>
 {% include 'maps/footer.html' %}
+{% block extra_body %}{% endblock %}
 </body>
 </html>

maps/templates/maps/header.html

@@ -1,4 +1,5 @@
 {% load static %}
+{% load i18n %}
 {% url 'index' as home_url %}
   <div class="banner-pattern"></div>
   <header role="banner">
@@ -69,16 +70,15 @@
             <li class="menu-item"><a href="{% url 'about' %}" class="menu__item">About</a></li>
             {% if user.is_authenticated %}
             <li class="menu__submenu-wrapper">
-                <a class="menu__item" href="#">Account</a>
+                <a class="menu__item" href="#">{% trans 'Account' %}</a>
                 <ul class="menu__submenu">
-                  <li class="menu-item"><a
-                      href="/accounts/logout/" class="menu__item">Log out</a>
-                  </li>
+                  <li class="menu-item"><a href="{% url 'account-settings' %}" class="menu__item">{% trans 'Account settings' %}</a></li>
+                  <li class="menu-item"><a href="/accounts/logout/" class="menu__item">{% trans 'Log out' %}</a></li>
                 </ul>
             {% else %}
 
             <li class="menu-item"><a
-                href="/accounts/login/" class="menu__item">Login / Sign up</a>
+                href="/accounts/login/" class="menu__item">{% trans 'Log in / Sign up' %}</a>
             </li>
             {% endif %}
 

maps/templates/maps/individual_detail.html

@@ -2,18 +2,13 @@
 {% load static %}
 {% load i18n %}
 {% load maps_extras %}
-{% block title %}{{ user.last_name|add:', '|add:user.first_name|titlify }}{% endblock %}
-{% block bodyclass %}page{% endblock %}
+{% block title %}{{ user.first_name|add:' '|add:user.last_name|titlify }}{% endblock %}
+{% block bodyclass %}profile profile--individual{% endblock %}
 {% block content %}
     <div class="page-header">
         <p><a class="link--breadcrumb" href="{% url 'index' %}">{% trans "Home" %}</a></p>
-        <h1><span class="pc-ff--sans pc-fw--normal">Platform Co-op</span><br/> Directory</h1>
+        <h1>{{ user.first_name }} {{ user.last_name }}</h1>
     </div>
-    {% if user.url %}
-    <h1><a rel="external" href="{{ user.url }}">{{ user.last_name }}, {{ user.first_name }}</a></h1>
-    {% else %}
-    <h1>{{ user.last_name }}, {{ user.first_name }}</h1>
-    {% endif %}
 
     <div class="spacer"></div>
     <span>

maps/templates/maps/my_profiles.html

@@ -1,38 +1,39 @@
 {% extends 'maps/base.html' %}
 {% load static %}
+{% load i18n %}
 {% load maps_extras %}
 {% block title %}{{ 'My profiles' |titlify }}{% endblock %}
 {% block bodyclass %}my-profiles{% endblock %}
 {% block content %}
     <div class="page-header">
-        <p><a class="link--breadcrumb" href="/">Home</a></p>
-        <h1>My profiles</h1>
+        <p><a class="link--breadcrumb" href="/">{% trans 'Home' %}</a></p>
+        <h1>{% trans 'My profiles' %}</h1>
     </div>
     {% if messages %}
         {% for message in messages %}
         {% include 'maps/partials/notification.html' %}
         {% endfor %}
     {% endif %}
-    <h2>Personal profile</h2>
+    <h2>{% trans 'Personal profile' %}</h2>
     {% if user.has_profile %}
     <ul class="cards">
         {% include 'maps/partials/card_individual.html' %}
     </ul>
     {% else %}
-    <p>None created.</p>
-    <p><a href="{% url 'individual-profile' %}">Create individual profile</a></p>
+    <p>{% trans 'None created.' %}</p>
+    <p><a href="{% url 'individual-profile' %}">{% trans 'Create individual profile' %}</a></p>
     {% endif %}
-    <h2>Organizational profiles</h2>
+    <h2>{% trans 'Organizational profiles' %}</h2>
     {% if user_orgs %}
     <ul class="cards">
         {% for org in user_orgs %}
         {% include 'maps/partials/card_organization.html' %}
         {% endfor %}
     </ul>
     <div class="spacer"></div>
-    <p><a href="{% url 'organization-profile' %}">Create another organizational profile</a></p>
+    <p><a href="{% url 'organization-profile' %}">{% trans 'Create another organizational profile' %}</a></p>
     {% else %}
-    <p>None created.</p>
-    <p><a href="{% url 'organization-profile' %}">Create organizational profile</a></p>
+    <p>{% trans 'None created.' %}</p>
+    <p><a href="{% url 'organization-profile' %}">{% trans 'Create organizational profile' %}</a></p>
     {% endif %}
 {% endblock %}

maps/urls.py

@@ -14,6 +14,7 @@
     path('organizations/<int:pk>/delete', OrganizationDelete.as_view(), name='organization-delete'),
     path('individuals/<int:user_id>', views.individual_detail, name='individual-detail'),
     path('my-profiles/', views.my_profiles, name='my-profiles'),
+    path('accounts/', views.account_settings, name='account-settings'),
     path('about/', AboutPageView.as_view(), {'title': 'About'}, name='about'),
     path('privacy-policy/', PrivacyPolicyView.as_view(), {'title': 'Privacy Policy'}, name='privacy_policy'),
     path('terms-of-service/', TermsOfServiceView.as_view(), {'title': 'Terms of Service'}, name='terms_of_service'),

maps/views.py

@@ -174,6 +174,10 @@ def my_profiles(request):
 
     return render(request, 'maps/my_profiles.html', context)
 
+# Account Seetings
+@login_required
+def account_settings(request):
+    return render(request, 'maps/account_settings.html')
 
 # Static pages
 class PrivacyPolicyView(TemplateView):

templates/account/account_inactive.html

@@ -1,11 +1,13 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Account Inactive" %}{% endblock %}
+{% block title %}{% trans "Account inactive"|titlify %}{% endblock %}
 
 {% block content %}
-<h1>{% trans "Account Inactive" %}</h1>
-
-<p>{% trans "This account is inactive." %}</p>
+<div class="page-header"></div>
+    <p><a class="link--breadcrumb" href="{% url 'index' %}">{% trans "Home" %}</a></p>
+    <h1>{% trans "Account inactive" %}</h1>
+</div>
+<div class="stack">
+    <p>{% trans "This account is inactive." %}</p>
+</div>
 {% endblock %}

templates/account/base.html

@@ -1,2 +1,3 @@
 {% extends 'maps/base.html' %}
 {% load maps_extras %}
+{% block bodyclass %}account{% endblock %}

templates/account/email.html

@@ -1,70 +1,67 @@
 {% extends "account/base.html" %}
-
 {% load i18n %}
-
-{% block head_title %}{% trans "Account" %}{% endblock %}
-
+{% block title %}{% trans "Account" %}{% endblock %}
 {% block content %}
-    <h1>{% trans "E-mail Addresses" %}</h1>
-{% if user.emailaddress_set.all %}
-<p>{% trans '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%}">
-
-      <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>
-
-{{ emailaddress.email }}
-    {% if emailaddress.verified %}
-    <span class="verified">{% trans "Verified" %}</span>
-    {% else %}
-    <span class="unverified">{% trans "Unverified" %}</span>
-    {% endif %}
-      {% if emailaddress.primary %}<span class="primary">{% trans "Primary" %}</span>{% endif %}
-</label>
-</div>
-  {% endfor %}
-
-<div class="buttonHolder">
-      <button class="secondaryAction" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
-      <button class="secondaryAction" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
-      <button class="primaryAction" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
-</div>
-
-</fieldset>
-</form>
-
-{% 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>
-
-{% endif %}
-
-
-    <h2>{% trans "Add E-mail Address" %}</h2>
-
-    <form method="post" action="{% url 'account_email' %}" class="add_email">
-        {% csrf_token %}
-        {{ form.as_p }}
-        <button name="action_add" type="submit">{% trans "Add E-mail" %}</button>
-    </form>
-
+    <div class="page-header">
+      <p><a class="link--breadcrumb" href="{% url 'index' %}">{% trans "Home" %}</a></p>
+      <h1>{% trans "Email addresses" %}</h1>
+    </div>
+    <div class="stack">
+      {% if messages %}
+          {% for message in messages %}
+          {% include 'maps/partials/notification.html' %}
+          {% endfor %}
+      {% endif %}
+      {% if user.emailaddress_set.all %}
+      <p>{% trans 'The following email addresses are associated with your account:' %}</p>
+    <form action="{% url 'account_email' %}" class="email_list form" method="post">
+      {% csrf_token %}
+      <ul class="input-group radio">
+      {% for emailaddress in user.emailaddress_set.all %}
+      <li>
+        <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}" />
+        <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary{%endif%}">
+        {{ emailaddress.email }}
+        {% if emailaddress.verified %}
+        <span class="badge verified">{% trans "Verified" %}</span>
+        {% else %}
+        <span class="badge unverified">{% trans "Unverified" %}</span>
+        {% endif %}
+        {% if emailaddress.primary %}<span class="badge primary">{% trans "Primary" %}</span>{% endif %}
+        </label>
+      </li>
+      {% endfor %}
+      </ul>
+      <div class="buttons">
+        <button class="button" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
+        <button class="button" type="submit" name="action_send" >{% trans 'Resend Verification' %}</button>
+        <button class="button" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
+      </div>
+  </form>
+  {% else %}
+  <p><strong>{% trans 'Warning:'%}</strong> {% trans "You currently do not have any email address set up. You should really add an email address so you can receive notifications, reset your password, etc." %}</p>
+  {% endif %}
+    <h2>{% trans "Add email address" %}</h2>
+  <form method="post" action="{% url 'account_email' %}" class="form add_email">
+      {% csrf_token %}
+      {{ form }}
+      <div class="spacer"></div>
+      <button class="button" name="action_add" type="submit">{% trans "Add email" %}</button>
+  </form>
 {% endblock %}
 
 
 {% block extra_body %}
 <script type="text/javascript">
 (function() {
-  var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
+  var message = "{% trans 'Do you really want to remove the selected email address?' %}";
   var actions = document.getElementsByName('action_remove');
+  console.log(actions);
   if (actions.length) {
     actions[0].addEventListener("click", function(e) {
-      if (! confirm(message)) {
-        e.preventDefault();
+      e.preventDefault();
+      if (confirm(message)) {
+        e.click();
       }
     });
   }