Merge pull request #2747 from groovecoder/resend-email-confirmation-b…

…utton-1049964

Fix Bug 1049964 - Buttons on Email addresses page

kuma/users/fixtures/test_users.json

@@ -117,6 +117,53 @@
         "model": "users.userprofile",
         "pk": 8
     },
+    {
+        "fields": {
+            "user": 8,
+            "uid": "testuser2@test.com",
+            "provider": "persona",
+            "last_login": "2011-06-03 16:12:08",
+            "date_joined": "2011-06-03 16:12:08",
+            "extra_data": {"status": "okay",
+                            "audience": "https://developer-local.allizom.org",
+                            "expires": 1408466018450,
+                            "email": "testuser2@test.com",
+                            "issuer": "gmail.login.persona.org"}
+
+        },
+        "model": "socialaccount.socialaccount",
+        "pk": 8
+    },
+    {
+        "fields": {
+            "user": 8,
+            "email": "testuser2@test.com",
+            "verified": "True",
+            "primary": "True"
+        },
+        "model": "account.emailaddress",
+        "pk": 8
+    },
+    {
+        "fields": {
+            "user": 8,
+            "email": "testuser2+verified@test.com",
+            "verified": "True",
+            "primary": "False"
+        },
+        "model": "account.emailaddress",
+        "pk": 9
+    },
+    {
+        "fields": {
+            "user": 8,
+            "email": "testuser2+unverified@test.com",
+            "verified": "False",
+            "primary": "False"
+        },
+        "model": "account.emailaddress",
+        "pk": 10
+    },
     {
         "fields": {
             "date_joined": "2011-06-03 16:12:08",

kuma/users/templates/account/account_inactive.html

@@ -1,9 +1,12 @@
 {% extends "account/base.html" %}
 
 {% block title %}{{ page_title(_("Profile Inactive")) }}{% endblock %}
-
 {% block content %}
-<h1>{{ _("Profile Inactive") }}</h1>
+<div class="text-content readable-line-length">
+
+  <h1>{{ _("Profile Inactive") }}</h1>
+
+  <p>{{ _("This profile is inactive.") }}</p>
 
-<p>{{ _("This profile is inactive.") }}</p>
+</div>
 {% endblock %}

kuma/users/templates/account/base.html

@@ -4,3 +4,4 @@
 
 {% block breadcrumbs %}
 {% endblock %}
+

kuma/users/templates/account/email.html

@@ -3,49 +3,46 @@
 {% block title %}{{ page_title(_("Email addresses")) }}{% endblock %}
 
 {% block content %}
+<div class="text-content readable-line-length">
   <h1>{{ _("Email addresses") }}</h1>
-  <div class="text-content">
 
     {% if user.emailaddress_set.all().exists() %}
-      <p>{{ _("The following email addresses are associated with your profile:") }}</p>
 
-      <form action="{{ url('account_email') }}" class="email_list" method="post">
-      {{ csrf() }}
-      <fieldset class="blockLabels">
+      <p>{{ _('{email} is your <em>primary</em> email address')|fe(email=user.email) }}</p>
 
-      <ul class="no-bullets">
+      {% if user.emailaddress_set.count() > 1  %}
+
+        <p>{{ _("You've also added the following email addresses:") }}</p>
+
+        <ul class="option-list">
         {% for emailaddress in user.emailaddress_set.all() %}
-        <li>
-          <div class="ctrlHolder">
-            <label for="email_radio_{{ loop.index }}" class="{% if emailaddress.primary %}primary_email{%endif%}">
-
-              <input id="email_radio_{{ loop.index }}" type="radio" name="email" {% if emailaddress.primary %}checked="checked"{%endif %} value="{{ emailaddress.email }}"/>
-
-                {{ emailaddress.email }}
-                {% if emailaddress.verified %}
-                  <strong class="verified">{{ _("Confirmed") }}</strong>
-                {% else %}
-                  <span class="unverified">{{ _("Unconfirmed") }}</span>
-                {% endif %}
-              {% if emailaddress.primary %}<em class="primary">{{ _("Primary") }}</em>{% endif %}
-            </label>
-           </div>
-        </li>
+            {% if emailaddress.primary %}
+            {% else %}
+              <li>
+                <form action="{{ url('account_email') }}" class="email_list" method="post">
+                  {{ csrf() }}
+                  {{ emailaddress.email }}
+                  <input id="email_radio_{{ loop.index }}" type="hidden" name="email" value="{{ emailaddress.email }}"/>
+                  <span class="option-list-options">
+                    {% if emailaddress.verified %}
+                      <button class="button positive" type="submit" name="action_primary" >{{ _("Make Primary") }}</button>
+                    {% else %}
+                      <button class="button" type="submit" name="action_send" >{{ _("Re-send Confirmation") }}</button>
+                    {% endif %}
+                    <button class="button transparent only-icon" type="submit" name="action_remove" ><span>{{ _("Remove") }}</span><i aria-hidden="true" class="icon-trash"></i></button>
+                  </span>
+                </form>
+              </li>
+            {% endif %}
         {% endfor %}
-      </ul>
-
-      <p class="buttonHolder">
-        <button class="secondaryAction" type="submit" name="action_primary" >{{ _("Make Primary") }}</button>
-        <button class="secondaryAction" type="submit" name="action_send" >{{ _("Re-send Confirmation") }}</button>
-        <button class="primaryAction" type="submit" name="action_remove" >{{ _("Remove") }}</button>
-      </p>
+        </ul>
+        <br class="clear">
 
-      </fieldset>
-      </form>
+      {% endif %}
 
     {% else %}
 
-      <p>{% trans %}<strong>Warning:</strong>"You have not added any email addresses to this profile. Without one you cannot receive notifications, reset your password, etc.{% endtrans %}</p>
+      <p>{% trans %}<strong>Warning:</strong>"You have not added any email addresses to this profile. Without one you cannot receive notifications.{% endtrans %}</p>
 
     {% endif %}
 
@@ -73,8 +70,8 @@ <h2>{{ _("Add email address") }}</h2>
 (function() {
   var message = "{{ _("Do you really want to remove the selected email address?") }}";
   var actions = document.getElementsByName('action_remove');
-  if (actions.length) {
-    actions[0].addEventListener("click", function(e) {
+  for (var i = 0; i < actions.length; i++) {
+    actions[i].addEventListener("click", function(e) {
       if (! confirm(message)) {
         e.preventDefault();
       }

kuma/users/templates/account/email_confirm.html

@@ -4,21 +4,24 @@
 
 
 {% block content %}
-<h1>{{ _("Confirm Email Address") }}</h1>
+<div class="text-content readable-line-length">
 
-{% if confirmation %}
+  <h1>{{ _("Confirm Email Address") }}</h1>
 
-<p>{% trans email=confirmation.email_address.email, user_display=user_display(confirmation.email_address.user) %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endtrans %}</p>
+  {% if confirmation %}
 
-<form method="post" action="{{ url('account_confirm_email', confirmation.key) }}">
-{{ csrf() }}
-    <button type="submit">{{ _("Confirm") }}</button>
-</form>
+    <p>{% trans email=confirmation.email_address.email, user_display=user_display(confirmation.email_address.user) %}Please confirm that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endtrans %}</p>
 
-{% else %}
+    <form method="post" action="{{ url('account_confirm_email', confirmation.key) }}">
+    {{ csrf() }}
+        <button type="submit">{{ _("Confirm") }}</button>
+    </form>
 
-<p>{% trans email_url=url('account_email') %}This email confirmation link expired or is invalid. Please <a href="{{ email_url}}">issue a new email confirmation request</a>.{% endtrans %}</p>
+  {% else %}
 
-{% endif %}
+    <p>{% trans email_url=url('account_email') %}This email confirmation link expired or is invalid. Please <a href="{{ email_url}}">issue a new email confirmation request</a>.{% endtrans %}</p>
 
+  {% endif %}
+
+</div>
 {% endblock %}

kuma/users/templates/account/email_confirmed.html

@@ -3,9 +3,11 @@
 {% block title %}{{ page_title(_("Confirm Email Address")) }}{% endblock %}
 
 {% block content %}
+<div class="text-content readable-line-length">
 
-<h1>{{ _("Confirm Email Address") }}</h1>
+  <h1>{{ _("Confirm Email Address") }}</h1>
 
-<p>{% trans email=email_address.email, user_display=user_display(email_address.user) %}You have confirmed that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endtrans %}</p>
+  <p>{% trans email=email_address.email, user_display=user_display(email_address.user) %}You have confirmed that <a href="mailto:{{ email }}">{{ email }}</a> is an email address for user {{ user_display }}.{% endtrans %}</p>
 
+</div>
 {% endblock %}

kuma/users/templates/account/login.html

@@ -5,38 +5,40 @@
 {% set classes = 'login' %}
 
 {% block content %}
-<article id="login">
-
-    <h1>{{ _("Please sign in") }}</h1>
-
-    <p>{% trans %}
-    In order to contribute, you need to sign in to MDN. You can sign in using
-    any of the services below. A MDN profile will be created for you if you
-    don't already have one.
-    {% endtrans %}</p>
-
-{% if socialaccount.providers  %}
-    {% with process="login" %}
-      {% include "socialaccount/snippets/provider_list.html" %}
-    {% endwith %}
-
-{% endif %}
-  {# hidden form to measure bot submissions from this page #}
-  <form class="hidden" method="post" action="{{ url('users.honeypot') }}">
-    {{ csrf() }}
-    <label for='wpName2'>Username</label>
-    <input id="wpName2" tabindex="1" size="20" placeholder="Enter your username" name="wpName" />
-
-    <label for='wpPassword2'>Password</label>
-    <input id="wpPassword2" tabindex="3" size="20" placeholder="Enter a password" type="password" name="wpPassword" />
-
-    <label for='wpRetype'>Confirm password</label>
-    <input id="wpRetype" tabindex="5" size="20" placeholder="Enter password again" type="password" name="wpRetype" />
-
-    <label for='wpEmail'>Email address (optional)</label>
-    <input id="wpEmail" tabindex="6" size="20" placeholder="Enter yourour email address" type="email" name="wpEmail" />
-
-    <input id="wpCreateaccount" tabindex="10" type="submit" value="Create your account" name="wpCreateaccount" />
-  </form>
-</article>
+<div class="text-content readable-line-length">
+  <article id="login">
+
+      <h1>{{ _("Please sign in") }}</h1>
+
+      <p>{% trans %}
+      In order to contribute, you need to sign in to MDN. You can sign in using
+      any of the services below. A MDN profile will be created for you if you
+      don't already have one.
+      {% endtrans %}</p>
+
+  {% if socialaccount.providers  %}
+      {% with process="login" %}
+        {% include "socialaccount/snippets/provider_list.html" %}
+      {% endwith %}
+
+  {% endif %}
+    {# hidden form to measure bot submissions from this page #}
+    <form class="hidden" method="post" action="{{ url('users.honeypot') }}">
+      {{ csrf() }}
+      <label for='wpName2'>Username</label>
+      <input id="wpName2" tabindex="1" size="20" placeholder="Enter your username" name="wpName" />
+
+      <label for='wpPassword2'>Password</label>
+      <input id="wpPassword2" tabindex="3" size="20" placeholder="Enter a password" type="password" name="wpPassword" />
+
+      <label for='wpRetype'>Confirm password</label>
+      <input id="wpRetype" tabindex="5" size="20" placeholder="Enter password again" type="password" name="wpRetype" />
+
+      <label for='wpEmail'>Email address (optional)</label>
+      <input id="wpEmail" tabindex="6" size="20" placeholder="Enter yourour email address" type="email" name="wpEmail" />
+
+      <input id="wpCreateaccount" tabindex="10" type="submit" value="Create your account" name="wpCreateaccount" />
+    </form>
+  </article>
+</div>
 {% endblock %}

kuma/users/templates/account/logout.html

@@ -3,17 +3,19 @@
 {% block title %}{{ page_title(_("Sign Out")) }}{% endblock %}
 
 {% block content %}
-<h1>{{ _("Sign Out") }}</h1>
+<div class="text-content readable-line-length">
 
-<p>{{ _("Are you sure you want to sign out?") }}</p>
+  <h1>{{ _("Sign Out") }}</h1>
 
-<form method="post" action="{{ url('account_logout') }}">
-  {{ csrf() }}
-  {% if redirect_field_value %}
-  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
-  {% endif %}
-  <button type="submit">{{ _("Sign Out") }}</button>
-</form>
+  <p>{{ _("Are you sure you want to sign out?") }}</p>
 
+  <form method="post" action="{{ url('account_logout') }}">
+    {{ csrf() }}
+    {% if redirect_field_value %}
+    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
+    {% endif %}
+    <button type="submit">{{ _("Sign Out") }}</button>
+  </form>
 
+</div>
 {% endblock %}

kuma/users/templates/account/messages/unverified_primary_email.txt

@@ -1 +1 @@
-{% trans %}Your primary email address must be verified.{% endtrans %}
+{% trans %}Your primary email address must be confirmed.{% endtrans %}

kuma/users/templates/account/password_change.html

@@ -3,11 +3,15 @@
 {% block title %}{{ page_title(_("Change Password")) }}{% endblock %}
 
 {% block content %}
-    <h1>{{ _("Change Password") }}</h1>
+<div class="text-content readable-line-length">
 
-    <form method="POST" action="{{ url('account_change_password') }}" class="password_change">
-        {{ csrf() }}
-        {{ form.as_p() }}
-        <button type="submit" name="action">{{ _("Change Password") }}</button>
-    </form>
+  <h1>{{ _("Change Password") }}</h1>
+
+  <form method="POST" action="{{ url('account_change_password') }}" class="password_change">
+    {{ csrf() }}
+    {{ form.as_p() }}
+    <button type="submit" name="action">{{ _("Change Password") }}</button>
+  </form>
+
+</div>
 {% endblock %}

kuma/users/templates/account/password_reset.html

@@ -3,21 +3,24 @@
 {% block title %}{{ page_title(_("Password Reset")) }}{% endblock %}
 
 {% block content %}
+<div class="text-content readable-line-length">
 
-    <h1>{{ _("Password Reset") }}</h1>
-    {% if user.is_authenticated() %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
+  <h1>{{ _("Password Reset") }}</h1>
+  {% if user.is_authenticated() %}
+  {% include "account/snippets/already_logged_in.html" %}
+  {% endif %}
 
-    <p>{{ _("Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it.") }}</p>
+  <p>{{ _("Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it.") }}</p>
 
-    <form method="POST" action="{{ url('account_reset_password') }}" class="password_reset">
-        {{ csrf() }}
-        {{ form.as_p() }}
-        <input type="submit" value="{{ _("Reset My Password") }}" />
-    </form>
+  <form method="POST" action="{{ url('account_reset_password') }}" class="password_reset">
+      {{ csrf() }}
+      {{ form.as_p() }}
+      <input type="submit" value="{{ _("Reset My Password") }}" />
+  </form>
 
-    <p>{% trans %}Please contact us if you have any trouble resetting your password.{% endtrans %}</p>
+  <p>{% trans %}Please contact us if you have any trouble resetting your password.{% endtrans %}</p>
+
+</div>
 {% endblock %}
 
 {% block js %}

kuma/users/templates/account/password_reset_done.html

@@ -3,11 +3,15 @@
 {% block title %}{{ page_title(_("Password Reset")) }}{% endblock %}
 
 {% block content %}
-    <h1>{{ _("Password Reset") }}</h1>
+<div class="text-content readable-line-length">
 
-    {% if user.is_authenticated() %}
-    {% include "account/snippets/already_logged_in.html" %}
-    {% endif %}
+  <h1>{{ _("Password Reset") }}</h1>
 
-    <p>{% trans %}We have sent you an email. Please contact us if you do not receive it within a few minutes.{% endtrans %}</p>
+  {% if user.is_authenticated() %}
+  {% include "account/snippets/already_logged_in.html" %}
+  {% endif %}
+
+  <p>{% trans %}We have sent you an email. Please contact us if you do not receive it within a few minutes.{% endtrans %}</p>
+
+</div>
 {% endblock %}