From b4356337024c1b3c05204228baf5fc0fff743f55 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 WIP

---
 js/gratipay.js               |  2 +-
 js/gratipay/sign-in.js       | 23 +++++++++++++++++++++++
 scss/components/sign_in.scss | 28 ++++++++++++++++++++++------
 scss/elements/elements.scss  |  2 +-
 templates/sign-in-modal.html | 14 ++++++++++++++
 5 files changed, 61 insertions(+), 8 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..73fff24a1b 100644
--- a/js/gratipay/sign-in.js
+++ b/js/gratipay/sign-in.js
@@ -1,5 +1,10 @@
 Gratipay.signIn = {};
 
+Gratipay.signIn.wireUp = function() {
+    Gratipay.signIn.wireUpButton();
+    Gratipay.signIn.wireUpEmailInput();
+}
+
 Gratipay.signIn.wireUpButton = function() {
     $('.sign-in button').click(Gratipay.signIn.openSignInOrSignUpModal);
 }
@@ -20,3 +25,21 @@ Gratipay.signIn.replaceTextInModal = function(dataKey) {
         $(this).text(textToReplace);
     });
 }
+
+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()
+            },
+            // contentType: 'application/x-www-form-urlencoded', // avoid a 415 response
+            success: function() {
+                alert('success');
+            },
+            error: Gratipay.error // TODO: Get notifs above 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..2823b5369b 100644
--- a/templates/sign-in-modal.html
+++ b/templates/sign-in-modal.html
@@ -26,6 +26,20 @@
             </button>
         </header>
         <section>
+            <p class="sign-in-togglable"
+               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 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:') }}">