Customized Template for 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="true" 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;
}