Add sign-in UI

gratipay · Jul 15, 2017 · c0d2aca · c0d2aca
1 parent 24a770d
commit c0d2aca
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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="[email protected]" 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
@@ -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'