• This template is a Razor template and it is used displaying a popup for validating the existing user when the user is trying to login to your web store first-time through the user's social media account.

  • When the existing user submits the correct password, the user's current account will be mapped with the user's social media account, so that the user can continue login with the social media account in future without any further validation.

  • For new users, the popup will not be displayed and the user will be logged in with the user's social media account.

  • Customization is easy with Razor templates and you will be having complete flexibility during customization.

  • You can manage the different elements that are used in this template for displaying the required information.

  • For easy understanding, the Source Code and different elements of this template are displayed here.

  • You can restructure the template, show/hide elements, modify the static content as per your merchandising requirements.


 Social Login


Source Code - Social Login:

@{
if(Martjack.User==null)
{
Martjack.User =new User();
}
  string cEvent;    
  TemplateConstants.Events CurrentEvent = Martjack.CurrentEvent;
  cEvent=CurrentEvent.ToString();
}
<div id="divConfigSection" data-profileupdate="false" data-mobilecountrycode="+91" style="display:none;" data-otprequired="true" data-smssndcnt="8"> </div>
@switch (cEvent)
{
  case "ExistingUser":
  {  
    string socialLogin="";
    string providerName="";  
    string siteUrl="";
    string firstName="";
    var provider ="";
    if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.Provider)){
      provider=Martjack.QueryStringParams[TemplateConstants.QueryStrings.Provider].ToString();
    }
    <div data-title="User already exists" data-popupwidth="650" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
      <div class="fb_guidetxt">
          <p>Seems that you are already registred with us with username: <label id="lblSocialLoginId" class="cartformleft"></label>, we would like to connect your exisiting account with your @provider account, so that you can continue login with @provider connect.</p>
          <p><span class="boldtext">Note:</span> Please provied your password of <label id="lblInfoSiteUrl"></label> to authorise us, to connect your @provider account.</p>
      </div>
      <div class="fb_logindetails">
        <div class="fb_user">
          @if (provider == "facebook"){
            <div class="icon"></div>
          }
          else if (provider == "google"){
            <div class="icon"></div>
          }
          <div class="details">
            <ul>
              <li class="username"><label id="lblUserName" class="cartformleft"></label></li>
              <li><label id="lblRegUserName" class="cartformleft"></label></li>
            </ul>
          </div>
        </div>
                    
        <div class="site_user">
          <div class="icon">
          </div>
          <div class="details">
            <ul>
              <li class="username"><label id="lblUserFullName" class="cartformleft"></label></li>
              <li><label id="lblLoggedinUserName" class="cartformleft"></label></li>
              <li class="topspace">Please provide the password of <span class="siteurl"><label id="lblSiteUrl"></label></span></li>
              <li>
                <input type="password" name="txtSocialPassword" jval_v2="{valid:function (val) { if (val.length &lt; 2) return 'Invalid Password'; else return ''; }}" id="txtSocialPassword" class="maintxt" placeholder="Enter Password">
              </li>
              <li>
                <div class="navbtn">
                  <span class="navbtn_l"></span>
                  <span class="navbtn_m">
                    <input type="button" onclick="ValidateSocialLoginUser(); return false;" name="" value="Submit" class="mj_btnbg">
                  </span> 
                  <span class="navbtn_r"> </span>
                </div>
                <a href="../Registration/SetPassword.aspx" onclick="Logout()" class="forgotpwdlnk">Forgot Password?</a>
              </li>
              <li>  
                @if (Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "InvalidPassword"){                  
                    <label>Invalid Password</label>                  
                }
              </li>
            </ul>
          </div>
        </div>
       </div> 
    </div>
  }
  break;
  case "AccountDeactivated":{
    <div data-title="Account Deactivated" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
      <div class="error_msgsmall" id="divInvalidMobFormat" name="InvalidMobFormat">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Your Account has been deactivated, please contact support on 04044430000.</div>
        </div>
      </div>
    </div>
  }
  break;
  case "AccountLocked":{
    <div data-title="Account Locked" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
      <div class="error_msgsmall" id="divInvalidMobFormat" name="InvalidMobFormat">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Your Account has been locked, please contact support on 04044430000.</div>
        </div>
      </div>
    </div>
  }
  break;
  case "InvalidRequest":{
    <div data-title="Invalid Request" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
      <div class="error_msgsmall" id="divInvalidMobFormat" name="InvalidMobFormat">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Invalid Request</div>
        </div>
      </div>
    </div>
  }
  break;
  case "MobileUpdate":
  {
    var MaxSMSCount ="";
    if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.MaxSMSCount)){
      MaxSMSCount=Martjack.QueryStringParams[TemplateConstants.QueryStrings.MaxSMSCount].ToString();
    }
      
    if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "InvaliMobileFormat"){
      <div class="error_msgsmall" id="divInvalidMobFormat" name="InvalidMobFormat">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Invalid mobile number</div>
        </div>
      </div>
    }
    if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "OTPSendFailed"){
      <div class="error_msgsmall" id="divInvalidOTPFormat" name="InvalidOTP">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Check entered mobile number</div>
        </div>
      </div>
    }
    if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "UserExists"){
      <div class="error_msgsmall" id="divInvalidOTPFormat" name="InvalidOTP">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">Entered mobile already exists, enter different no.</div>
        </div>
      </div>
    }
    if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "EmailinUse"){
      <div class="error_msgsmall" id="divEmailinUse" name="EmailinUse">
        <div class="errorimgsmall">&nbsp;</div>
        <div class="smallmsg_info">     
          <div class="smallmsg_text">The entered mobile already in use against different profile, please enter different mobile no.</div>
        </div>
      </div>
    }
      <div data-title="Update Mobile No" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
        <div class="otp-form">
          <input type="text" class="maintxt country-code" id="txtSocLoginMobileContryCode" name="txtSocLoginMobileContryCode" value="+91" readonly />
          <input type="text" class="maintxt" placeholder="Enter Mobile Number" id="txtSocLoginMobileNo" value="" maxlength="10" jval_v2="{valid:function (val) {return ValidateSocLoginMobileNo(val);}, message:'invalid mobile number'}" data-rejex="^\d{10}$" />
          <div class="navbtn">
            <span class="navbtn_m">
              <a class="mj_btnbg" id="btnValidateSocLoginMobile" href="javascript:void(0)" type="submit" name="ValidateMobile" data-field="anchor" data-result="RegistrationForm" >Update</a>
            </span>
          </div>
        </div>
      </div>  
  }
  break;

  case "ValidateOTP":
  {
    var SocialMobileNO ="";
    var MaxSMSCount ="";
    if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.MobileNO)){
      SocialMobileNO=Martjack.QueryStringParams[TemplateConstants.QueryStrings.MobileNO].ToString();
    }
    if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.MaxSMSCount)){
      MaxSMSCount=Martjack.QueryStringParams[TemplateConstants.QueryStrings.MaxSMSCount].ToString();
    }
    <div data-title="Enter OTP" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup" id="divOTP">
      <div class="otp-form">
      @if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "IncorrectOTP"){
        <div class="error_msgsmall" id="divIncorrectOTP" name="IncorrectOTP">
          <div class="errorimgsmall">&nbsp;</div>
          <div class="smallmsg_info">     
            <div class="smallmsg_text">Incorrect OTP,Please enter correct OTP.</div>
          </div>
        </div>
      }
      else if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "OTPSendFailed"){
        <div class="error_msgsmall" id="divOTPSendFailed" name="OTPSendFailed">
          <div class="errorimgsmall">&nbsp;</div>
          <div class="smallmsg_info">     
            <div class="smallmsg_text">OTP Send Failed to mobile number @SocialMobileNO</div>
          </div>
        </div>
      }
      else if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "OTPSentLimitExceed"){
        <div class="error_msgsmall" id="divOTPSendFailed" name="OTPSendFailed">
          <div class="errorimgsmall">&nbsp;</div>
          <div class="smallmsg_info">     
            <div class="smallmsg_text">OTP limit is exceeded</div>
          </div>
        </div>
      }
        @if (Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "OTPSentLimitExceed")
        {
          <div>
            <p>OTP limit is exceeded</p>
          </div>
        }
        else if((Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode != "OTPSendFailed") || (Martjack.Form.Errors.Count == 0)){
          <div>
            <p>OTP is sent to your mobile number </p>
          </div>      
        }
        <div>
          <label class="mobile-no"><span>+91</span>@SocialMobileNO</label>
          <a class="resend-otp" id="btnSocialResendOTP" href="javascript:void(0)" type="submit" name="btnSocialResendOTP" data-field="anchor" data-result="RegistrationForm" data-mobileno="@SocialMobileNO" data-errorCode="@MaxSMSCount" >Resend OTP</a>
          <div class="clear"></div>
        </div>
        <input type="text" name="txtSocMobileOTP" jval_v2=
                "{valid:function (val) { if (val.length &lt; 2) return 'Invalid OTP'; else return ''; }}" id="txtSocMobileOTP" class="maintxt" data-mobile= "@SocialMobileNO" maxlength='4' placeholder="Enter Otp">
        
        <div class="navbtn"> 
          <span class="navbtn_m"> 
            <a class="mj_btnbg" id="btnValidateSocMobileOTP" href="javascript:void(0)" type="submit" name="ValidateOTP" data-result="RegistrationForm" data-field="anchor" data-errorCode="@MaxSMSCount">Submit</a    
          </span> 
        </div>
      </div>
    </div>
  }
break;
case "Registration":
{
string fname="";
string lname="";
string mobno="";
string email ="";
string shipaddress ="";
string loyaltyno ="";
string gender="";
string birthdate = "";
var ExternalUserDetails = Martjack.ExternalUserDetails;
if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "InvalidEmail"){
<div class="error_msgsmall" id="divInvalidEmail" name="InvalidEmail">
    <div class="errorimgsmall">&nbsp;</div>
    <div class="smallmsg_info">     
      <div class="smallmsg_text">The given eMail or mobile number is not valid.</div>
    </div>
</div>
}

else if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "EmailinUse"){
<div class="error_msgsmall" id="divEmailinUse" name="EmailinUse">

    <div class="errorimgsmall">&nbsp;</div>
    <div class="smallmsg_info">     
      <div class="smallmsg_text">The given eMail is used by another user.</div>


    </div>
</div>
}
else if (Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "UserExists")
{
  <div class="error_msgsmall" id="divCRMUserFailed" name="CRMUserFailed">
    <div class="errorimgsmall">&nbsp;</div>
    <div class="smallmsg_info">
      <div class="smallmsg_text">User already exists.</div>


    </div>
  </div>
}
else if(Martjack.Form.Errors != null && Martjack.Form.Errors.Count > 0 && Martjack.Form.Errors.DefaultErrorCode == "CRMUserFailed"){
<div class="error_msgsmall" id="divCRMUserFailed" name="CRMUserFailed">
    <div class="errorimgsmall">&nbsp;</div>
    <div class="smallmsg_info">     
      <div class="smallmsg_text">Unable to create user.</div>


    </div>
</div>
}
else{
fname = ExternalUserDetails.FirstName;
lname = ExternalUserDetails.LastName;
mobno = ExternalUserDetails.MobileNO;
email = ExternalUserDetails.Email;
shipaddress = ExternalUserDetails.Shippingaddress;
loyaltyno =ExternalUserDetails.LoyaltyCardNo; 
gender=ExternalUserDetails.Gender;
if (ExternalUserDetails.BirthDate != null)
{
birthdate=ExternalUserDetails.BirthDate;
}
else{
birthdate="";
}
}
if(Martjack.QueryStringParams.ContainsKey(TemplateConstants.QueryStrings.MobileNO)){
mobno=Martjack.QueryStringParams[TemplateConstants.QueryStrings.MobileNO].ToString();
}
  <div data-title="Enter Details" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
    <div class="user-regestration">
      <input type="text" name="txtFirstName" jval_v2="{valid:function (val) { if (val.length &lt; 2) return 'Invalid First Name'; else return ''; }}" id="txtFirstName" value="@fname" class="maintxt"  placeholder="Enter your first name" />  
      <input type="text" name="txtLastName" value="@lname"  id="txtLastName" class="maintxt"  placeholder="Enter your last name" />
      <input class="maintxt country-code" type="text" class="crm_prefix1" id="txtMobileContryCode" name="txtMobileContryCode" value="+91" readonly="readonly" />
      <input type="text" name="txtMobileNO" value="@mobno"  id="txtMobileNO" class="maintxt mobile" disabled  placeholder="Enter mobile number">
      <input type='text' class='maintxt' value='@birthdate' id='txtBirthday' jval_v2="{valid:function (val) { if (val.length &lt; 2) return 'Enter Date of Birth'; else return ''; }}" name='txtBirthday' keypress-bind="true" placeholder="Enter your date of birth" readonly="readonly" />
      
      <div class="gender">
        <label>Gender</label>
        @if(@gender=="Male"){
          <input type="radio" value="M" name="rdblGender" checked="checked" id="rdblGender_0">
        }
        else{

          <input type="radio" value="M" name="rdblGender" id="rdblGender_0">
        }
        <span>Male</span>
        @if(@gender=="Female"){
          <input type="radio" value="F" checked="checked" name="rdblGender" id="rdblGender_1">
        }
        else{
          <input type="radio" value="F" name="rdblGender" id="rdblGender_1">
        }
        <span>Female</span>
        <div class="clear"></div>
      </div>
      <textarea name="txtPostalAddress" value="@shipaddress" id="txtPostalAddress" class="maintxt" style="height:60px;" placeholder="Enter your address" ></textarea>
      <div class="navbtn">
        <span class="navbtn_m">
          <a class="mj_btnbg" id="btnRegistration" href="javascript:void(0)" type="submit" name="Registration" data-result="RegistrationForm" data-field="anchor">Register</a>
        </span>
      </div>
    </div>
  </div>
}
break;
  break;
  case "Success":
  {
    <div data-title="Success" data-popupwidth="400" data-popupheight="auto" name="PopupTitle" class="fb_loginpopup">
      <p>Your Login success</p>
    </div>
  }
  break;
}
Back to top
Last modified: 2017/07/10 12:56 by author
Content
Sitemap
 Dashboard & Setup
 Orders & Leads
 Products
 Design & Content
 Marketing
 Settings
 Customers
 Apps
News and Alerts
Commands
Edit this page
Old revisions
Recent changes
Admin
Logout