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 @@
+

+ {{ _('Enter your email 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}