* wip
This commit is contained in:
parent
f9e02c5707
commit
a1c929aeb1
|
|
@ -23,33 +23,28 @@
|
|||
}
|
||||
|
||||
function events() {
|
||||
$signinBtn.on('click', login);
|
||||
$signupBtn.on('click', signup);
|
||||
}
|
||||
|
||||
function signup(e) {
|
||||
app.layout.showDialog('signup-dialog');
|
||||
return false;
|
||||
$signinForm.on('submit', login);
|
||||
}
|
||||
|
||||
function reset() {
|
||||
$signinForm.removeClass('login-error');
|
||||
|
||||
$email.val('');
|
||||
$password.val('');
|
||||
}
|
||||
|
||||
function login() {
|
||||
if($signinBtn.is('.disabled')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var email = $email.val();
|
||||
var password = $password.val();
|
||||
|
||||
reset();
|
||||
|
||||
$signinBtn.text('TRYING...');
|
||||
$signinBtn.text('TRYING...').addClass('disabled')
|
||||
|
||||
rest.login({email: email, password: password, remember_me: false})
|
||||
rest.login({email: email, password: password, remember_me: true})
|
||||
.done(function() {
|
||||
window.location = '/client#/order'
|
||||
window.location = '/client#/checkout_payment'
|
||||
})
|
||||
.fail(function(jqXHR) {
|
||||
if(jqXHR.status == 422) {
|
||||
|
|
@ -60,8 +55,10 @@
|
|||
}
|
||||
})
|
||||
.always(function() {
|
||||
$signinBtn.text('SIGN IN')
|
||||
$signinBtn.text('SIGN IN').removeClass('disabled')
|
||||
})
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function renderNavigation() {
|
||||
|
|
@ -83,15 +80,14 @@
|
|||
'beforeShow': beforeShow,
|
||||
'afterShow': afterShow
|
||||
};
|
||||
app.bindScreen('signin', screenBindings);
|
||||
app.bindScreen('checkout_signin', screenBindings);
|
||||
|
||||
$screen = $("#signInScreen");
|
||||
$screen = $("#checkoutSignInScreen");
|
||||
$navigation = $screen.find(".checkout-navigation-bar");
|
||||
$signinForm = $screen.find(".signin-form");
|
||||
$signinBtn = $signinForm.find('.signin-submit');
|
||||
$email = $signinForm.find('input[name="session[email]"]');
|
||||
$password = $signinForm.find('input[name="session[password]"]');
|
||||
$signupBtn = $signinForm.find('.show-signup-dialog');
|
||||
$email = $signinForm.find('input[name="email"]');
|
||||
$password = $signinForm.find('input[name="password"]');
|
||||
|
||||
if($screen.length == 0) throw "$screen must be specified";
|
||||
if($navigation.length == 0) throw "$navigation must be specified";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
$ = jQuery
|
||||
context = window
|
||||
context.JK ||= {};
|
||||
|
||||
# events emitted:
|
||||
# EVENTS.CHECKOUT_SIGNED_IN
|
||||
# EVENTS.CHECKOUT_SKIP_SIGN_IN
|
||||
|
||||
context.JK.CheckoutSignin = class CheckoutSignin
|
||||
constructor: (app, root) ->
|
||||
@EVENTS = context.JK.EVENTS
|
||||
@rest = context.JK.Rest()
|
||||
@logger = context.JK.logger
|
||||
@app = app
|
||||
@root = root
|
||||
@emailInput = @root.find('input[name="email"]')
|
||||
@passwordInput = @root.find('input[name="password"]')
|
||||
@signinBtn = @root.find('.signin-submit')
|
||||
@skipSigninBtn = @root.find('.btnNext')
|
||||
@signinForm = @root.find('form.signin-form')
|
||||
|
||||
# TODO: add Facebook login support
|
||||
|
||||
throw "no root element" if not @root.exists()
|
||||
throw "no email element" if not @emailInput.exists()
|
||||
throw "no password element" if not @passwordInput.exists()
|
||||
throw "no signin btn" if not @signinBtn.exists()
|
||||
throw "no skip signin btn" if not @skipSigninBtn.exists()
|
||||
|
||||
@signinForm.submit(@onSigninSubmit)
|
||||
@skipSigninBtn.click(@onSkipSignin)
|
||||
|
||||
removeErrors: () =>
|
||||
@signinForm.removeClass('login-error');
|
||||
|
||||
onSigninSubmit: () =>
|
||||
@logger.debug("attempting to signin")
|
||||
|
||||
@removeErrors()
|
||||
|
||||
@signinBtn.addClass('disabled')
|
||||
|
||||
email = @emailInput.val()
|
||||
password = @passwordInput.val()
|
||||
|
||||
@rest.login({email: email, password: password, remember_me: true})
|
||||
.done(@onLoginDone)
|
||||
.fail(@onLoginFail)
|
||||
|
||||
onLoginDone: () =>
|
||||
@signinBtn.removeClass('disabled')
|
||||
$(this).triggerHandler(@EVENTS.CHECKOUT_SIGNED_IN, {})
|
||||
|
||||
onLoginFail: (jqXHR) =>
|
||||
@signinBtn.removeClass('disabled')
|
||||
if jqXHR.status == 422
|
||||
@signinForm.addClass('login-error')
|
||||
else
|
||||
@app.notifyServerError(jqXHR, "Unable to log in. Try again later.")
|
||||
|
||||
onSkipSignin: () =>
|
||||
$(this).triggerHandler(@EVENTS.CHECKOUT_SKIP_SIGN_IN, {})
|
||||
|
|
@ -47,7 +47,9 @@
|
|||
CONNECTION_DOWN: 'connection_down',
|
||||
SCREEN_CHANGED: 'screen_changed',
|
||||
JAMTRACK_DOWNLOADER_STATE_CHANGED: 'jamtrack_downloader_state',
|
||||
METRONOME_PLAYBACK_MODE_SELECTED: 'metronome_playback_mode_selected'
|
||||
METRONOME_PLAYBACK_MODE_SELECTED: 'metronome_playback_mode_selected',
|
||||
CHECKOUT_SIGNED_IN: 'checkout_signed_in',
|
||||
CHECKOUT_SKIP_SIGN_IN: 'checkout_skip_sign_in'
|
||||
};
|
||||
|
||||
context.JK.PLAYBACK_MONITOR_MODE = {
|
||||
|
|
|
|||
|
|
@ -28,46 +28,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.checkout-signin, .checkout-payment-info, .checkout-place-order {
|
||||
padding: 30px;
|
||||
|
||||
.signin-form {
|
||||
padding: 10px;
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.signin-password {
|
||||
margin-left: 33px;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
background-color: #330000;
|
||||
border: 1px solid #990000;
|
||||
padding:4px;
|
||||
|
||||
div.actions {
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-error-msg {
|
||||
display:none;
|
||||
margin-top:10px;
|
||||
text-align:center;
|
||||
color:#F00;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.login-error .login-error-msg {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
.checkout-payment-info, .checkout-place-order {
|
||||
|
||||
form.payment-info {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
@import "client/common.css.scss";
|
||||
|
||||
|
||||
#checkoutSignInScreen {
|
||||
|
||||
.content-holder {
|
||||
|
||||
margin-top:40px;
|
||||
color:$ColorTextTypical;
|
||||
|
||||
&.signed-in {
|
||||
.left-side, .right-side {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
&.not-signed-in {
|
||||
.already-signed-in {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.already-signed-in {
|
||||
|
||||
}
|
||||
|
||||
.signin-prompt {
|
||||
margin-top:30px 0 10px 0;
|
||||
width:60%;
|
||||
max-width:300px;
|
||||
|
||||
span {
|
||||
text-align:left;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
background-color: #330000;
|
||||
border: 1px solid #990000;
|
||||
padding:4px;
|
||||
|
||||
div.actions {
|
||||
margin-top:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-error-msg {
|
||||
display:none;
|
||||
margin-top:10px;
|
||||
text-align:center;
|
||||
color:#F00;
|
||||
font-size:11px;
|
||||
}
|
||||
|
||||
.login-error .login-error-msg {
|
||||
display:block;
|
||||
}
|
||||
|
||||
h3
|
||||
{
|
||||
color:$ColorTextHighlight;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
input {
|
||||
width:60%;
|
||||
max-width:300px;
|
||||
}
|
||||
.left-side {
|
||||
float:left;
|
||||
width:50%;
|
||||
@include border_box_sizing;
|
||||
border-width:0 1px 0 0;
|
||||
border-color:white;
|
||||
border-style:solid;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
.left-side-content {
|
||||
padding-right:50px;
|
||||
@include border_box_sizing;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
float:left;
|
||||
width:50%;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
}
|
||||
|
|
@ -53,6 +53,7 @@
|
|||
*= require ./jamtrack
|
||||
*= require ./shoppingCart
|
||||
*= require ./checkout
|
||||
*= require ./checkoutSignInScreen
|
||||
*= require ./genreSelector
|
||||
*= require ./sessionList
|
||||
*= require ./searchResults
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@ $ColorScreenBackground: lighten($ColorUIBackground, 10%);
|
|||
$ColorTextBoxBackground: #c5c5c5;
|
||||
$ColorRecordingBackground: #471f18;
|
||||
|
||||
$ColorTextHighlight: white;
|
||||
$ColorTextTypical: #CCCCCC;
|
||||
|
||||
$color1: #006AB6; /* mid blue */
|
||||
$color2: #9A9084; /* warm gray */
|
||||
$color3: #B11254; /* magenta */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
div layout="screen" layout-id="checkout_signin" id="checkoutSignInScreen" class="screen secondary no-login-required"
|
||||
.content
|
||||
.content-head
|
||||
.content-icon= image_tag("content/icon_shopping_cart.png", {:height => 19, :width => 19})
|
||||
h1 check out
|
||||
= render "screen_navigation"
|
||||
.content-body
|
||||
.content-body-scroller
|
||||
.checkout-signin
|
||||
.checkout-navigation-bar
|
||||
|
||||
.content-holder
|
||||
.already-signed-in
|
||||
.left-side
|
||||
h3 ALREADY A MEMBER OF THE JAMKAZAM COMMUNITY?
|
||||
.left-side-content
|
||||
.signin-form
|
||||
.signin-prompt Sign in using your email address:
|
||||
form.signin-form
|
||||
.email
|
||||
label.inline Email:
|
||||
input name='email' autofocus="true" type="text"
|
||||
|
||||
.password
|
||||
label.inline Password:
|
||||
input name='password' autofocus="true" type="password"
|
||||
.login-error-msg Invalid login
|
||||
|
||||
|
||||
br clear='all'
|
||||
|
||||
.actions
|
||||
= link_to "SIGN IN", '#', class: 'button-orange signin-submit'
|
||||
| or
|
||||
'
|
||||
a.show-signup-dialog href='#' Sign Up
|
||||
br
|
||||
br
|
||||
small
|
||||
a.forgot-password href='/request_reset_password' Forgot Password?
|
||||
|
||||
= link_to image_tag("content/button_facebook_signin.png", {:width => 249, :height => 46}), '/auth/facebook', class: "signin-facebook"
|
||||
.right-side
|
||||
h3 NOT A MEMBER YET?
|
||||
|
||||
p
|
||||
| Thousands of musicians are now registered members of JamKazam. Click the NEXT button below to join us, and welcome!
|
||||
|
||||
a.btnNext.button-orange NEXT
|
||||
|
||||
script type='text/template' id='template-checkout-navigation'
|
||||
.checkout-navigation
|
||||
.nav-signin
|
||||
= "{% if (data.current == 1) { %}"
|
||||
.nav-text.selected Sign In
|
||||
= "{% } else { %}"
|
||||
.nav-text Sign In
|
||||
= "{% } %}"
|
||||
.nav-arrow ->
|
||||
.clearall
|
||||
.nav-payment-info
|
||||
= "{% if (data.current == 2) { %}"
|
||||
.nav-text.selected Address & Payment
|
||||
= "{% } else { %}"
|
||||
.nav-text Address & Payment
|
||||
= "{% } %}"
|
||||
.nav-arrow ->
|
||||
.clearall
|
||||
.nav-signin
|
||||
= "{% if (data.current == 3) { %}"
|
||||
.nav-text.selected Place Order
|
||||
= "{% } else { %}"
|
||||
.nav-text Place Order
|
||||
= "{% } %}"
|
||||
.clearall
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
div layout="screen" layout-id="signin" id="signInScreen" class="screen secondary signin-common"
|
||||
.content
|
||||
.content-head
|
||||
.content-icon= image_tag("content/icon_shopping_cart.png", {:height => 19, :width => 19})
|
||||
h1 check out
|
||||
= render "screen_navigation"
|
||||
.content-body
|
||||
.checkout-signin
|
||||
.checkout-navigation-bar
|
||||
|
||||
.signin-form
|
||||
= link_to image_tag("content/button_facebook_signin.png", {:width => 249, :height => 46}), '/auth/facebook', class: "signin-facebook"
|
||||
|
||||
br
|
||||
br
|
||||
br
|
||||
strong.white Or sign in with JamKazam Account
|
||||
br
|
||||
br
|
||||
|
||||
= form_for(:session, url: signin_path('redirect-to' => '/client#/payment_config') + (request.query_string.blank? ? '' : '?' + request.query_string), html: {class:"signin-form #{'login-error' if @login_error}"}) do |f|
|
||||
.email
|
||||
= f.label :email, "Email Address:", class: 'inline'
|
||||
= f.text_field :email, autofocus: true
|
||||
|
||||
.password
|
||||
= f.label :password, "Password:", class: 'inline'
|
||||
= f.password_field :password, autofocus: true, class: 'signin-password'
|
||||
.login-error-msg Invalid login
|
||||
|
||||
br clear='all'
|
||||
|
||||
.actions align='center'
|
||||
= link_to "SIGN IN", '#', class: 'button-orange signin-submit'
|
||||
| or
|
||||
'
|
||||
a.show-signup-dialog href='#' Sign Up
|
||||
br
|
||||
br
|
||||
small
|
||||
a.forgot-password href='/request_reset_password' Forgot Password?
|
||||
|
||||
|
||||
script type='text/template' id='template-checkout-navigation'
|
||||
.checkout-navigation
|
||||
.nav-signin
|
||||
= "{% if (data.current == 1) { %}"
|
||||
.nav-text.selected Sign In
|
||||
= "{% } else { %}"
|
||||
.nav-text Sign In
|
||||
= "{% } %}"
|
||||
.nav-arrow ->
|
||||
.clearall
|
||||
.nav-payment-info
|
||||
= "{% if (data.current == 2) { %}"
|
||||
.nav-text.selected Address & Payment
|
||||
= "{% } else { %}"
|
||||
.nav-text Address & Payment
|
||||
= "{% } %}"
|
||||
.nav-arrow ->
|
||||
.clearall
|
||||
.nav-signin
|
||||
= "{% if (data.current == 3) { %}"
|
||||
.nav-text.selected Place Order
|
||||
= "{% } else { %}"
|
||||
.nav-text Place Order
|
||||
= "{% } %}"
|
||||
.clearall
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<%= render "users/feed_recording_ajax" %>
|
||||
<%= render "jamtrack" %>
|
||||
<%= render "shopping_cart" %>
|
||||
<%= render "signin" %>
|
||||
<%= render "checkoutSigninScreen" %>
|
||||
<%= render "order" %>
|
||||
<%= render "feed" %>
|
||||
<%= render "bands" %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue