Add sign-in UI WIP

gratipay · Jul 11, 2017 · b435633 · b435633
1 parent 46bf87d
commit b435633
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 8 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,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
@@ -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
@@ -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="[email protected]" 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:') }}">