implement UI for working with national identities

gratipay/models/country.py

@@ -13,3 +13,7 @@ class Country(Model):
 
     """
     typname = 'countries'
+
+    @classmethod
+    def from_code(cls, code):
+        return cls.db.one("SELECT countries.*::countries FROM countries WHERE code=%s", (code,))

i18n/core/de.po

@@ -352,6 +352,9 @@ msgstr "Kreditkarte"
 msgid "PayPal"
 msgstr ""
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr ""
 

i18n/core/eo.po

@@ -343,6 +343,9 @@ msgstr "Kreditkarto"
 msgid "PayPal"
 msgstr ""
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr ""
 

i18n/core/fr.po

@@ -346,6 +346,9 @@ msgstr "Carte de crédit"
 msgid "PayPal"
 msgstr ""
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr ""
 

i18n/core/it.po

@@ -343,6 +343,9 @@ msgstr "Carta di Credito"
 msgid "PayPal"
 msgstr "PayPal"
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr "Settimanale"
 

i18n/core/nl.po

@@ -345,6 +345,9 @@ msgstr "Kredietkaart"
 msgid "PayPal"
 msgstr ""
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr ""
 

i18n/core/pt.po

@@ -346,6 +346,9 @@ msgstr "Cartão de Crédito"
 msgid "PayPal"
 msgstr ""
 
+msgid "verified in: {country}"
+msgstr ""
+
 msgid "Weekly"
 msgstr ""
 

js/gratipay.js

@@ -18,6 +18,7 @@ Gratipay.init = function() {
     Gratipay.signOut();
     Gratipay.payments.initSupportGratipay();
     Gratipay.tabs.init();
+    Gratipay.countryChooser.init();
 };
 
 Gratipay.warnOffUsersFromDeveloperConsole = function() {

js/gratipay/countryChooser.js

@@ -0,0 +1,18 @@
+Gratipay.countryChooser = {}
+
+Gratipay.countryChooser.init = function() {
+    $('.open-country-chooser').click(Gratipay.countryChooser.open);
+    $('.close-country-chooser').click(Gratipay.countryChooser.close);
+    $('#grayout').click(Gratipay.countryChooser.close);
+};
+
+Gratipay.countryChooser.open = function() {
+    $('.open-country-chooser').blur();
+    $('#grayout').show()
+    $('#country-chooser').show();
+};
+
+Gratipay.countryChooser.close = function() {
+    $('#country-chooser').hide()
+    $('#grayout').hide()
+};

scss/pages/cc-ba.scss → scss/components/long-form.scss

@@ -1,4 +1,4 @@
-.cc-ba {
+.long-form {
     width: 300px;
 
     form {
@@ -113,4 +113,19 @@
     input.invalid:focus + .invalid-msg {
         display: block;
     }
+
+    .danger-zone {
+        margin-top: 64px;
+        border: 1px solid $red;
+        @include border-radius(5px);
+        padding: 20px;
+        h2 {
+            margin: 0 0 10px;
+            padding: 0;
+            color: $red;
+        }
+        button {
+            background: $red;
+        }
+    }
 }

scss/pages/identities.scss

@@ -0,0 +1,139 @@
+#identities {
+    padding-top: 20px;
+
+    .card {
+        height: 96px;
+        width: 46%;
+        float: left;
+        margin: 0 8% 8% 0;
+        padding: 20px;
+        position: relative;
+        @include border-radius(5px);
+        @include box-shadow(0, 0, 10px, $black);
+
+        &:nth-child(even) {
+            margin-right: 0;
+        }
+
+        &.verified {
+            background-image: radial-gradient( circle at 36px 60px
+                                             , lighten($green, 55%) 0%
+                                             , lighten($green, 30%) 100%
+                                              );
+            color: $green;
+        }
+
+        &.unverified {
+            color: $red;
+        }
+
+        &.add {
+            background: $lightest-gray;
+            color: $medium-gray;
+            border-style: dashed;
+            @include box-shadow(0,0,0);
+            border: 2px dashed $darker-gray;
+
+            &:hover {
+                color: $black;
+                background-image: radial-gradient( ellipse farthest-corner at 50% 50%
+                                                 , $white 0%
+                                                 , $lightest-gray 50%
+                                                  );
+            }
+        }
+
+        img {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+        }
+
+        h2 {
+            white-space: nowrap;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .status {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            font: normal 9px $Mono;
+        }
+    }
+
+    #country-chooser {
+        z-index: 1001;
+        display: none;
+        background: white;
+        @include border-radius(5px);
+        @include box-shadow(0, 0, 10px, $black);
+        position: fixed;
+        width: 240px;
+        height: 50vh;
+        top: 25%;
+        left: 50%;
+        margin-left: -120px;
+
+        header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            width: 240px;
+            height: 36px;
+            background: white;
+            border-bottom: 1px solid $black;
+            @include border-radius(5px 5px 0 0);
+            @include box-shadow(0, 0, 10px, $black);
+
+            h2 {
+                margin: 0;
+                padding: 12px 20px 0;
+            }
+            button {
+                position: absolute;
+                top: 5px;
+                right: 20px;
+            }
+        }
+
+        section {
+            overflow: auto;
+            height: 50vh;
+            z-index: 0;
+            margin-top: 36px;
+            background: $lightest-gray;
+            @include border-radius(0 0 5px 5px);
+            @include box-shadow(0, 0, 10px, $black);
+
+            a {
+                padding: 5px 20px;
+                display: block;
+                img {
+                    margin: 0 5px -10px 0;
+                }
+                span {
+                    font: bold 18px/18px $Ideal;
+                }
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    #grayout {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background: transparentize($black, 0.3);
+        z-index: 1000;
+        display: none;
+    }
+}

scss/variables.scss

@@ -16,6 +16,7 @@ $medium-gray: #999;
 $gray: #555;
 $light-gray: #DDD;
 $lighter-gray: #EEE;
+$lightest-gray: #F6F6F6;
 
 $red: #C00;
 $light-red: #F99;

tests/py/test_identity_pages.py

@@ -0,0 +1,41 @@
+from gratipay.testing import Harness
+
+
+class Tests(Harness):
+
+    def setUp(self):
+        self.alice = self.make_participant('alice', claimed_time='now', is_admin=True)
+        self.bob = self.make_participant('bob', claimed_time='now')
+
+
+    # il - identities listing
+
+    def test_il_is_403_for_anon(self):
+        assert self.client.GxT('/~bob/identities/').code == 403
+
+    def test_il_is_403_for_non_admin(self):
+        assert self.client.GxT('/~bob/identities/').code == 403
+
+    def test_il_is_200_for_self(self):
+        assert self.client.GET('/~bob/identities/', auth_as='alice').code == 200
+
+    def test_il_is_200_for_admin(self):
+        assert self.client.GET('/~bob/identities/', auth_as='alice').code == 200
+
+
+    # ip - identity page
+
+    def test_ip_is_403_for_anon(self):
+        assert self.client.GxT('/~bob/identities/TT').code == 403
+
+    def test_ip_is_403_for_non_admin(self):
+        assert self.client.GxT('/~bob/identities/TT').code == 403
+
+    def test_ip_is_200_for_self(self):
+        assert self.client.GET('/~bob/identities/TT', auth_as='alice').code == 200
+
+    def test_ip_is_200_for_admin(self):
+        assert self.client.GET('/~bob/identities/TT', auth_as='alice').code == 200
+
+    def test_ip_(self):
+        pass

tests/py/test_pages.py

@@ -31,6 +31,7 @@ def browse(self, setup=None, **kw):
                            .replace('/%platform/', '/github/') \
                            .replace('/%user_name/', '/gratipay/') \
                            .replace('/%membername', '/alan') \
+                           .replace('/%country', '/TT') \
                            .replace('/%exchange_id.int', '/%s' % exchange_id) \
                            .replace('/%redirect_to', '/giving') \
                            .replace('/%endpoint', '/public') \

www/assets/gratipay.css.spt

@@ -35,6 +35,7 @@
 @import "scss/components/js-edit";
 @import "scss/components/linear_gradient";
 @import "scss/components/loading-indicators";
+@import "scss/components/long-form";
 @import "scss/components/memberships";
 @import "scss/components/nav";
 @import "scss/components/payments-by";
@@ -59,11 +60,11 @@
 
 @import "scss/pages/homepage";
 @import "scss/pages/history";
+@import "scss/pages/identities";
 @import "scss/pages/team";
 @import "scss/pages/profile-edit";
 @import "scss/pages/giving";
 @import "scss/pages/settings";
-@import "scss/pages/cc-ba";
 @import "scss/pages/on-confirm";
 @import "scss/pages/search";
 @import "scss/pages/hall-of-fame";

www/version.txt

@@ -1 +1 @@
-1962
+1963