Shelve work --- work!

js/gratipay/emails.js

@@ -5,7 +5,7 @@ Gratipay.emails.post = function(e) {
     var $this = $(this);
     var action = this.className;
     var $inputs = $('.emails button, .emails input');
-    var address = $this.parent().data('email') || $('input.add-email').val();
+    var address = $this.parent().parent().data('email') || $('input.add-email').val();
 
     $inputs.prop('disabled', true);
 
@@ -17,6 +17,8 @@ Gratipay.emails.post = function(e) {
         success: function (msg) {
             if (msg) {
                 Gratipay.notification(msg, 'success');
+            } else {
+                window.location.reload()
             }
             if (action == 'add-email') {
                 $('input.add-email').val('');

scss/pages/emails.scss

@@ -1,3 +1,22 @@
 #emails #content {
-
+    .icon {
+        color: $black;
+        position: absolute;
+        top: 12px;
+        left: 16px;
+        font-size: 24px;
+        line-height: 24px;
+    }
+    button {
+        color: $medium-gray;
+        font: normal 12px/14px $Ideal;
+        background: $light-gray;
+        padding: 3px 6px;
+        position: relative;
+        z-index: 2;
+        &:hover { color: $white; }
+        &.set-primary:hover { background: $blue; }
+        &.remove:hover { background: $red; }
+        &.resend:hover { background: $green; }
+    }
 }

tests/ttw/test_email_verification.py

@@ -10,12 +10,12 @@ class Tests(BrowserHarness, QueuedEmailHarness):
     def setUp(self):
         BrowserHarness.setUp(self)
         QueuedEmailHarness.setUp(self)
-        self.make_participant('alice', claimed_time='now')
+        self.alice = self.make_participant('alice', claimed_time='now')
         self.sign_in('alice')
 
     def start_verification(self, email_address):
         self.visit('/~alice/emails/')
-        self.css('#content input').fill('[email protected]')
+        self.css('#content input').fill(email_address)
         self.css('#content button').click()
         self.wait_for_success()
 
@@ -32,8 +32,15 @@ def attempt_verification(self, email_address):
         return self.css('#content h1').text
 
 
+    def test_css(self):
+        self.add_and_verify_email('alice', '[email protected]')
+        self.add_and_verify_email('alice', '[email protected]')
+        self.alice.start_email_verification('[email protected]')
+        self.visit('/~alice/emails/')
+        import pdb; pdb.set_trace()
+
     def test_can_verify_email_address(self):
-        assert self.attempt_verification('alice@example.com') == 'Success!'
+        assert self.attempt_verification('alice@example.net') == 'Success!'
 
     def test_can_resend_when_pending(self):
         self.start_verification('[email protected]')

www/~/%username/emails/index.spt

@@ -1,12 +1,20 @@
-from gratipay.utils import get_participant
+from gratipay.utils import get_participant, icons
 
 [-----------------------------------------------------------------------------]
 
 participant = get_participant(state, restrict=True)
 banner = '~' + participant.username
-title = _("Emails")
+title = _("Email")
 
 emails = participant.get_emails()
+groups = [[], [], []]
+for email in emails:
+    if email.address == participant.email_address:
+        groups[0].append(email)
+    elif email.verified:
+        groups[1].append(email)
+    else:
+        groups[2].append(email)
 page_id = 'emails'
 
 [-----------------------------------------------------------------------------] text/html
@@ -18,8 +26,11 @@ page_id = 'emails'
 {% endblock %}
 
 {% block content %}
+<h2>{{ _('Addresses') }}</h2>
+{% set has_unverified = False %}
 <table class="emails listing">
-{% for i, email in enumerate(emails) %}
+{% for emails in groups %}
+{% for i, email in enumerate(emails, start=1) %}
     {% set is_primary = email.address == participant.email_address %}
     <tr>
         <td class="item" data-email="{{ email.address }}">
@@ -28,25 +39,35 @@ page_id = 'emails'
                 <span class="listing-name">{{ email.address }}</span>
                 <span class="i">{{ i }}</span> &middot;
                 {% if email.verified %}
-                {% if is_primary %}
-                <span class="label-primary">{{ _("Primary") }}</span>
+                  {% if is_primary %}
+                    <span class="status-icon feature">
+                        {{ icons.STATUS_ICONS['feature']|safe }}</span>
+                        {{ _('Your primary email address') }}
+                  {% else %}
+                    <span class="status-icon success">
+                        {{ icons.STATUS_ICONS['success']|safe }}</span>
+                        {{ _('Linked') }}
+                    &middot; <button class="set-primary">{{ _('Set as primary') }}</button>
+                    &middot; <button class="remove">{{ _('Remove') }}</button>
+                  {% endif %}
                 {% else %}
-                <button class="set-primary">{{ _("Set as primary") }}</button>
-                {% endif %} &middot;
-                <button class="remove">{{ _("Remove") }}</button>
-                {% else %}
-                <span class="label-unverified">{{ _("Unverified") }}</span> &middot;
-                <button class="resend">{{ _("Resend") }}</button>
+                    <span class="status-icon warning">
+                            {{ icons.STATUS_ICONS['warning']|safe }}</span>
+                    {{ _('Half-linked') }} &middot;
+                    <button class="resend">{{ _('Resend verification') }}</button>
                 {% endif %}
             </div>
         </td>
     </tr>
 {% endfor %}
+{% endfor %}
 </table>
+{% if not participant.has_pending_email_address_verifications %}
 <form class="add-email">
     <input class="add-email" name="email" type="email" placeholder="[email protected]" />
     <button type="submit">{{ _("Add email address") }}</button>
 </form>
+{% endif %}
 
 <h2 id="notifications">{{ _("Notifications") }}</h2>
 <div class="email-notifications">