Jira Code: BTN-1132
The login section will show on a popup in the same page where click the login link.
//Login popup template
<div id="popup-login" class="popup fade-login popup-login in">
<div class="popup-dialog">
<div class="login-popup-content">
<div id="popup-header" class="login-popup-content-header">
{{#if showLogin}}
<div class="login-popup-wrapper-column-login">
<div class="login-popup-wrapper-login" data-view="LoginRegister.Login"></div>
</div>
{{/if}}
{{#if showForgotPassword}}
<div class="login-popup-wrapper-column-login">
<div class="login-popup-wrapper-login" data-view="ForgotPassword"></div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{!----
Use the following context variables when customizing this template:
//css
.popup{
opacity: 1;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
display: block;
}
.fade-login{
z-index: 1050;
transform: translate(0,0);
webkit-transform: translate(0,0);
}
.popup-login{
top: 0;
right: 0;
outline: 0;
}
.popup-dialog{
webkit-transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
@media (min-width: 768 px){
width: 600px;
}
}
.login-popup-content {
padding: $sc-margin-lv4 + $sc-margin-lv1;
border-radius: 10px;
display: block;
-webkit-box-shadow: 0 2px 5px transparentize($sc-neutral-shade-500, 1-0.2);
box-shadow: 0 2px 5px transparentize($sc-neutral-shade-500, 1-0.2);
}
.login-popup-content-header {
margin-bottom:$sc-margin-lv4;
display: inline-block;
width: 100%;
}
.login-popup-content-header-close {
margin-top: -2px;
float:right;
font-size:35px;
font-weight:$sc-font-weight-normal;
line-height:20px;
color: $sc-color-theme-500;
cursor: pointer;
background: none;
outline: none;
}
.login-popup-wrapper-column-login{
@extend .login-register-wrapper-column-login;
}
.login-popup-wrapper-login{
@extend .login-register-wrapper-login;Add data action on login links data-action="login"
//Event handler
//header link
loginModal: function(options)
{
var isMobile = document.getElementsByClassName('header-sidebar-toggle');
if (isMobile.length > 0) {
jQuery('#main').removeClass('header-sidebar-opened');
}
var url = window.location.href;
console.log("options",options.application)
var test = new LoginRegisterLoginView({application : options.application
, currentUrl : url});
this.application.getLayout().showInModal(test);
}
//Other login links
loginModal: function(options) {
var url = window.location.href;
var test = new LoginRegisterLoginView({application : options.application
, currentUrl : url});
this.application.getLayout().showInModal(test);
}//loginRegister.Login.View
define('LoginRegister.Login.View'
, [ 'login_register_login.tpl'
, 'SC.Configuration'
, 'Tracker'
, 'Session'
, 'Account.Login.Model'
, 'LoginRegister.Utils'
, 'Profile.Model'
, 'LiveOrder.Model'
, 'LoginRegister.ForgotPassword.View'
, 'Backbone'
, 'Backbone.FormView'
, 'Backbone.CompositeView'
, 'GlobalViews.Message.View'
, 'underscore'
, 'jQuery'
, 'Utils'
]
, function (
login_tpl
, Configuration
, Tracker
, Session
, AccountLoginModel
, LoginRegisterUtils
, ProfileModel
, LiveOrderModel
, LoginRegisterForgotPasswordView
, Backbone
, BackboneFormView
, BackboneCompositeView
, GlobalViewsMessageView
, _
, jQuery
)
{
'use strict';
// @class LoginRegister.Login.View Implements the login experience UI @extend Backbone.View
return Backbone.View.extend({
template: login_tpl
, attributes: {
'id': 'login'
}
, title: _('LOGIN').translate()
, events: {
'submit form': 'submitForm'
, 'click [data-action="register-now"]': 'skipLoginCloseModal'
, 'click [data-action="forgot-password"]': 'forgotPasswordHandler'
}
, bindings: {
'[name="email"]': 'email'
, '[name="password"]': 'password'
}
, initialize: function (options)
{
this.application = options.application;
this.parentView = options.parentView;
this.model = new AccountLoginModel();
this.timedout = options.timedout || _.getParameterByName(window.location.href, 'timeout') === 'T';
// on save we redirect the user out of the login page as we know there hasn't been an error
this.model.on('save', _.bind(this.redirect, this));
this.currentUrl = options.currentUrl;
BackboneFormView.add(this);
}
, submitForm: function(e, model, props)
{
e.preventDefault();
var self = this;
var data = jQuery(e.target).closest('form').serializeObject();
return this.cancelableTrigger('before:LoginRegister.login', data)
.then(function(){
self.saveForm(e, model, props);
});
}
, disableButtons: function (state)
{
this.getChildViewInstance('Login').$('a, input, button').prop('disabled', state);
return this;
}
, beforeShowContent: function beforeShowContent()
{
var promise = jQuery.Deferred();
var profileModel = ProfileModel.getInstance();
if (profileModel.get('isLoggedIn') === 'T' && profileModel.get('isGuest') === 'F')
{
Backbone.history.navigate('', { trigger: true });
promise.reject();
}
else
{
promise.resolve();
}
return promise;
}
// @method forgotPasswordHandler handles the 'forgot-password' redirection
, forgotPasswordHandler: function ()
{
var url = Session.get('touchpoints.login');
var ul = window.location.href;
console.log("touchpoints.login", url)
if(ul.includes(url))
{
console.log("if")
LoginRegisterUtils.skipLoginCloseModal();
Backbone.history.navigate('#forgot-password', {trigger: true});
}else
{
console.log("else")
window.location.href = Session.get('touchpoints.login') + '&fragment=login-register' + '#forgot-password';
}
}
, childViews: {
'GlobalMessageSessionTimeout': function ()
{
return new GlobalViewsMessageView({
message: _.translate('Your session has timed out. Please log in again.')
, type: 'error'
, closable: false
});
}
}
// @method skipLoginCloseModal
, skipLoginCloseModal: LoginRegisterUtils.skipLoginCloseModal
, render: function ()
{
Backbone.View.prototype.render.apply(this, arguments);
if (this.$containerModal && Configuration.get('checkoutApp').skipLogin)
{
this.$('[data-action="forgot-password"]').attr('data-toggle', 'show-in-modal');
}
}
// @method trackEvent tracks the 'sing-in' event using the global Tracker instance @param {Function} callback
, trackEvent: function (callback)
{
Tracker.getInstance().trackLogin({
category: 'Checkout - User Interaction'
, action: 'Login'
, callback: callback
});
}
// @method redirect Redirects the user after successful login taking into account redirect parameters (origin and origin_hash).
// @param {Object} response The HTTP response data object, response of the login service.
, redirect: function (context, response)
{
var url_options = _.parseUrlOptions(window.location.search)
, touchpoints = response.touchpoints
, isPasswordReset = url_options.passwdret
, self = this
, currentUrl = this.currentUrl;
console.log("currentUrl", currentUrl)
// Track Login Event
this.trackEvent(function ()
{
if (!isPasswordReset && (url_options.is === 'checkout' || url_options.origin === 'checkout'))
{
self.refreshApplication(response);
console.log("2")
}
else
{
// if we know from which touchpoint the user is coming from
if (url_options.origin && touchpoints[url_options.origin])
{
// we save the URL to that touchpoint
var url = touchpoints[url_options.origin];
console.log("3")
// if there is an specific hash
if (url_options.origin_hash)
{
console.log("4")
// we add it to the URL as a fragment
url = _.addParamsToUrl(url, {fragment: url_options.origin_hash});
}
window.location.href = url;
}
else
{
console.log("5")
//We've got to disable passwordProtectedSite feature if customer registration is disabled.
if(Configuration.getRegistrationType() !== 'disabled' && SC.ENVIRONMENT.siteSettings.siteloginrequired==='T')
{
console.log("6")
window.location.href = touchpoints.home;
}
else
{
console.log("7")
var url = window.location.href;
var url1 = Session.get('touchpoints.login');
if(url.includes(url1)){
console.log("8")
window.location.href = touchpoints.customercenter;
}
else{
console.log("9",currentUrl)
window.location.href = currentUrl;
}
}
}
}
});
}
, refreshApplication: function (response)
{
var current_language = Session.get('language.locale')
, application = this.application;
// @class LoginRegister.LoginResponseData
// @property language {locale:String} language
if (response.language && response.language.locale && current_language !== response.language.locale)
{
window.location.href = response.touchpoints.checkout;
}
else
{
var profile_model = ProfileModel.getInstance();
// @property {String} user serialized JSON user information
response.user && profile_model.set(response.user);
// @property {String} cart serialized JSON cart information
response.cart && LiveOrderModel.getInstance().set(response.cart);
// @property {String} address serialized JSON addresses information
response.address && profile_model.get('addresses').reset(response.address);
// @property {String} credit-card serialized JSON creditcards information
response.paymentmethod && profile_model.get('paymentmethods').reset(response.paymentmethod);
// @property {core:String} currency
response.currency && response.currency.code && Session.set('currency', response.currency);
// @property {Object} touchpoints
response.touchpoints && (application.Configuration.siteSettings.touchpoints = response.touchpoints);
application.Configuration.currentTouchpoint = 'checkout';
Backbone.history.navigate('', { trigger: true });
}
// @class LoginRegister.Login.View
}
//@method getContext @return {LoginRegister.Login.View.Context}
, getContext: function ()
{
var url_options = _.parseUrlOptions(window.location.search);
//@class LoginRegister.Login.View.Context
return {
// @property {Boolean} isRedirect
isRedirect: !!(url_options.is !== 'checkout' && url_options.origin !== 'checkout')
// @property {Boolean} hasAutoFocus
, hasAutoFocus: false
// @property {Boolean} isUserSessionTimedOut
, isUserSessionTimedOut: url_options.timedout === 'T' || this.timedout
//@property {Boolean} isSkipLogin
, isSkipLogin: !!(this.$containerModal && Configuration.get('checkoutApp').skipLogin)
};
}
// @class LoginRegister.Login.View
});
});