From 11ebe8aa20b6c53c7b9f13771414b822559e6899 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            | 35 +++++++++++++++++++++++++++----
 scss/components/modal.scss        |  2 +-
 scss/components/sign_in.scss      | 28 +++++++++++++++++++------
 scss/elements/elements.scss       |  2 +-
 templates/sign-in-modal.html      | 14 +++++++++++++
 www/auth/email/send_link.json.spt |  2 +-
 7 files changed, 71 insertions(+), 14 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..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:') }}">
diff --git a/www/auth/email/send_link.json.spt b/www/auth/email/send_link.json.spt
index 8ea1740a11..1ba493845f 100644
--- a/www/auth/email/send_link.json.spt
+++ b/www/auth/email/send_link.json.spt
@@ -33,7 +33,7 @@ if participant:
     message = _("We've sent you a link to sign in. Please check your inbox.")
 else:
     # TODO: Create sign-up link!
-    raise Response(400, "no participant exists by this address")
+    raise Response(400, _("No user found by this address. Sign-up via email not implemented yet, stay tuned."))
 
 [---] application/json via json_dump
 {"message": message}