From c0d2aca0444aa0b779d3592f1e748f0599c913d9 Mon Sep 17 00:00:00 2001
From: Paul Kuruvilla <rohitpaulk@gmail.com>
Date: Tue, 11 Jul 2017 16:16:06 +0530
Subject: [PATCH] Add sign-in UI

---
 js/gratipay.js               |  2 +-
 js/gratipay/sign-in.js       | 35 +++++++++++++++++++++++++++++++----
 scss/components/modal.scss   |  2 +-
 scss/components/sign_in.scss | 28 ++++++++++++++++++++++------
 scss/elements/elements.scss  |  2 +-
 templates/sign-in-modal.html | 18 +++++++++++++++---
 tests/ttw/test_sign_in.py    |  2 +-
 7 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/js/gratipay.js b/js/gratipay.js
index 38f0ccb3a8..f3b9e9fb2d 100644
--- a/js/gratipay.js
+++ b/js/gratipay.js
@@ -14,7 +14,7 @@ Gratipay.init = function() {
     Gratipay.warnOffUsersFromDeveloperConsole();
     Gratipay.adaptToLongUsernames();
     Gratipay.forms.initCSRF();
-    Gratipay.signIn.wireUpButton();
+    Gratipay.signIn.wireUp();
     Gratipay.signOut();
     Gratipay.payments.initSupportGratipay();
     Gratipay.tabs.init();
diff --git a/js/gratipay/sign-in.js b/js/gratipay/sign-in.js
index a068b8b9d3..ac0f59a164 100644
--- a/js/gratipay/sign-in.js
+++ b/js/gratipay/sign-in.js
@@ -1,17 +1,39 @@
 Gratipay.signIn = {};
 
+Gratipay.signIn.wireUp = function() {
+    Gratipay.signIn.wireUpButton();
+    Gratipay.signIn.wireUpEmailInput();
+}
+
 Gratipay.signIn.wireUpButton = function() {
     $('.sign-in button').click(Gratipay.signIn.openSignInOrSignUpModal);
 }
 
-Gratipay.signIn.openSignInToContinueModal = function () {
+Gratipay.signIn.wireUpEmailInput = function() {
+    $('#sign-in-modal form.email-form').submit(function(e) {
+        e.preventDefault();
+        jQuery.ajax({
+            url: '/auth/email/send_link.json',
+            type: 'POST',
+            data: {
+                'email_address': $(this).find('input').val()
+            },
+            success: function(data) {
+                Gratipay.notification(data.message, 'success');
+            },
+            error: Gratipay.error
+        });
+    });
+}
+
+Gratipay.signIn.openSignInToContinueModal = function() {
     Gratipay.signIn.replaceTextInModal('sign-in-to-continue');
-    Gratipay.modal.open('#sign-in-modal');
+    Gratipay.signIn.openModalAndFocusInput();
 }
 
-Gratipay.signIn.openSignInOrSignUpModal = function () {
+Gratipay.signIn.openSignInOrSignUpModal = function() {
     Gratipay.signIn.replaceTextInModal('sign-in-or-sign-up');
-    Gratipay.modal.open('#sign-in-modal');
+    Gratipay.signIn.openModalAndFocusInput();
 }
 
 Gratipay.signIn.replaceTextInModal = function(dataKey) {
@@ -20,3 +42,8 @@ Gratipay.signIn.replaceTextInModal = function(dataKey) {
         $(this).text(textToReplace);
     });
 }
+
+Gratipay.signIn.openModalAndFocusInput = function() {
+    Gratipay.modal.open('#sign-in-modal');
+    $('#sign-in-modal input').focus();
+}
diff --git a/scss/components/modal.scss b/scss/components/modal.scss
index 8141681cb9..7bd59836f3 100644
--- a/scss/components/modal.scss
+++ b/scss/components/modal.scss
@@ -46,7 +46,7 @@
     text-align: center;
     display: none;
     background: transparentize($light-brown, 0.3);
-    z-index: 1000;
+    z-index: 900;
 }
 
 .modal {
diff --git a/scss/components/sign_in.scss b/scss/components/sign_in.scss
index ff16a87fed..2fc7d09856 100644
--- a/scss/components/sign_in.scss
+++ b/scss/components/sign_in.scss
@@ -58,8 +58,15 @@
         }
     }
 
+    .email-form input {
+        color: $black;
+        height: auto;
+        padding: 10px;
+    }
+
     .auth-links {
         margin-top: 5px;
+        margin-bottom: 10px;
     }
 
     .auth-links li {
@@ -71,14 +78,27 @@
         }
     }
 
-    .auth-links button {
+    .auth-links button, .email-form button {
         text-align: left;
         background: $green;
         color: white;
-        padding: 15px 45px 15px 15px;
         position: relative;
         font: normal 14px $Ideal;
 
+        &:hover {
+            background: $darker-green;
+        }
+    }
+
+    .email-form button {
+        padding: 15px 15px 15px 15px;
+        margin: 15px 0px 20px 0px;
+        text-align: center;
+    }
+
+    .auth-links button {
+        padding: 15px 45px 15px 15px; // 30px for icon on the right
+
         span {
             vertical-align: middle;
         }
@@ -95,10 +115,6 @@
         span.icon.github        { @include has-icon("github"); }
         span.icon.openstreetmap { @include has-icon("openstreetmap"); }
         span.icon.bitbucket     { @include has-icon("bitbucket"); }
-
-        &:hover {
-            background: $darker-green;
-        }
     }
 }
 
diff --git a/scss/elements/elements.scss b/scss/elements/elements.scss
index af16b1de24..db20575c68 100644
--- a/scss/elements/elements.scss
+++ b/scss/elements/elements.scss
@@ -88,7 +88,7 @@ textarea {
 }
 
 input {
-    &[type="text"], &[type="number"], &[type="password"] {
+    &[type="text"], &[type="number"], &[type="password"], &[type="email"] {
         @include border-radius(3px);
         height: 22px;
         border: 1px solid $brown;
diff --git a/templates/sign-in-modal.html b/templates/sign-in-modal.html
index 065254129c..7f60e4da7a 100644
--- a/templates/sign-in-modal.html
+++ b/templates/sign-in-modal.html
@@ -27,9 +27,21 @@
         </header>
         <section>
             <p class="sign-in-togglable"
-               data-sign-in-to-continue="{{ _('Please sign in to continue') }}"
-               data-sign-in-or-sign-up="{{ _('Use a third-party provider to sign in or create an account on Gratipay:') }}">
-                {{ _('Use a third-party provider to sign in or create an account on Gratipay:') }}
+               data-sign-in-to-continue="{{ _('Enter your email to sign-in to Gratipay') }}"
+               data-sign-in-or-sign-up="{{ _('Enter your email to sign-in or create an account on Gratipay') }}">
+                {{ _('Enter your email to sign-in or create an account on Gratipay') }}
+            </p>
+
+            <form class="email-form">
+                <input type="email" placeholder="sam@example.net" required/>
+
+                <button class="button" type="submit">
+                    {{ _("Email me a link") }}
+                </button>
+            </form>
+
+            <p>
+                {{ _('Alternatively, use a third-party provider:') }}
             </p>
             <ul class="auth-links">
                 {% for platform in website.signin_platforms %}
diff --git a/tests/ttw/test_sign_in.py b/tests/ttw/test_sign_in.py
index 29a60ae627..652d2d6984 100644
--- a/tests/ttw/test_sign_in.py
+++ b/tests/ttw/test_sign_in.py
@@ -28,4 +28,4 @@ def test_401_page_opens_modal_automatically(self):
         self.visit('/about/me/emails.json')
 
         assert self.css('#sign-in-modal').visible
-        assert self.css('#sign-in-modal p')[0].text == 'Please sign in to continue'
+        assert self.css('#sign-in-modal p')[0].text == 'Enter your email to sign-in to Gratipay'