how to solve the password section eye-icon is not working in the ios devices only, in android device its working.
before this code i have added the jquary code that eye icon in built class but was not supporting to ios devices so after that i have added this code and removed that code some inbuild jquary class are not supporting to the ios devices.
js file:
define(
‘JJ.showandhidepassword.showandhidepassword’
, [
‘LoginRegister.View’,’Utils’,
‘LoginRegister.Login.View’,
‘LoginRegister.Register.View’,
‘jj_showandhidepassword_showandhidepassword.tpl’,
‘jj_showandhidepassword_showandhidepassword_login.tpl’,
‘jj_showandhidepassword_showandhidepassword_register.tpl’, ‘jQuery’
]
, function (
LoginRegisterView,Utils,
LoginRegisterLoginView,
LoginRegisterRegisterView,
jj_showandhidepassword_showandhidepassword_tpl,
jj_showandhidepassword_showandhidepassword_login_tpl,
jj_showandhidepassword_showandhidepassword_register_tpl, jQuery
) {
‘use strict’;
return {
mountToApp: function mountToApp (container)
{
/** @type {LayoutComponent} */
.extend(LoginRegisterLoginView.prototype, { //this view is extended to add a show and hide password feature to login page// template: jj_showandhidepassword_showandhidepassword_login_tpl, events: .extend({}, LoginRegisterLoginView.prototype.events, {
‘click [data-action=”Show-password”]’: ‘showHide’,
‘click [data-action=”Hide-password”]’: ‘showHide’
}),
//this event is used to toggle the eye-image to show and hide function in login page password field//
showHide: function (e)
{
try{
let input = $(“#login-password”);
let Parent = jQuery(e.target).parent();
let showButton = Parent.find(‘[data-action=”Show-password”]’);
let hideButton = Parent.find(‘[data-action=”Hide-password”]’);
Parent.toggleClass(‘show-passoword hide-passoword’);
if (input.attr(‘type’) === ‘password’)
{
input.attr(‘type’, ‘text’);
showButton.hide();
hideButton.show();
} else {
input.attr(‘type’, ‘password’);
showButton.show();
hideButton.hide();
}
}catch(e)
{
console.log(“LoginPage-eye-icon”, e);
}
},
getContext: .wrap(LoginRegisterLoginView.prototype.getContext, function (fn) { let originalRet = fn.apply(this, .toArray(arguments).slice(1));
let showPasswordLogin = Utils. getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-open.png”));
let hidePasswordLogin = Utils.getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-close.png”));
originalRet.showPasswordLogin = showPasswordLogin;
originalRet.hidePasswordLogin = hidePasswordLogin;
return originalRet;
})
});
.extend(LoginRegisterView.prototype, { template:jj_showandhidepassword_showandhidepassword_tpl, initialize: .wrap(LoginRegisterView.prototype.initialize, function initialize(fn) {
fn.apply(this, .toArray(arguments).slice(1)); var url = new URL(window.location.href); var loginVar = this.getCookie(‘LoginParam’).toString(); //The getCookie function retrieves the value of a cookie with a given name. if (!loginVar) { loginVar = ‘false’; } url.searchParams.set(‘loginParam’, loginVar); window.history.replaceState(null, null, url); var loginVarinitial = url.searchParams.get(‘loginParam’); this.showSectionRegister = (loginVarinitial == ‘true’) this.showSectionlogin = (loginVarinitial == ‘false’) }), events: .extend({}, LoginRegisterView.prototype.events, {
‘click .login-register-login-form-messages a’: ‘loginRegister’,
‘click [data-action=”loginRegister”]’: ‘LoginRegister’,
‘click [data-action=”LoginRegister”]’: ‘LoginRegister’
}),
loginButton: function () { // click function that activates when clicked on the login button and shows the text processing.
$(‘.login-register-login-submit’).text(‘Processing…’);
},
getCookie: function getCookie(cname) { // retrieves the value of a cookie with a given name.
let name = cname + “=”;
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(‘;’);
for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ‘ ‘) { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return “”; }, LoginRegister: function LoginRegister(event) { // function to show the login and register containers separately on th checkout page. let loginLet = event.target.getAttribute(‘loginParam’) document.cookie = “LoginParam=” + loginLet + ‘;path=/’; let url = new URL(window.location.href); url.searchParams.set(‘loginParam’, loginLet); window.history.replaceState(null, null, url); if (loginLet == ‘true’) { $(‘.login-register-wrapper-column-login’).addClass(‘hidesection’); $(‘.login-register-wrapper-column-register’).removeClass(‘hidesection’); } else if (loginLet == ‘false’) { $(‘.login-register-wrapper-column-register’).addClass(‘hidesection’); $(‘.login-register-wrapper-column-login’).removeClass(‘hidesection’); } this.showSectionRegister = (loginLet == ‘true’) this.showSectionlogin = (loginLet == ‘false’) this.render() }, getContext: .wrap(LoginRegisterView.prototype.getContext, function (fn) { let original_Ret = fn.apply(this, .toArray(arguments).slice(1)); var url = window.location.hash; if (url.indexOf(“#login-register”) > -1) {
jQuery(document).ready(function(){
jQuery(‘#main-container’).addClass(‘login-register-main-container’);
});
}
original_Ret.showSectionRegister = !!(this.showSectionRegister);
original_Ret.showSectionlogin = !!(this.showSectionlogin)
return original_Ret;
})
});
//this view is extended to add a show and hide password feature to register page//
.extend(LoginRegisterRegisterView.prototype, { template:jj_showandhidepassword_showandhidepassword_register_tpl, events: .extend({}, LoginRegisterRegisterView.prototype.events, {
‘click [data-action=”Show-password”]’: ‘passWord’,
‘click [data-action=”Hide-password”]’: ‘passWord’,
‘click [data-action=”Show-password-register”]’: ‘conformPassword’,
‘click [data-action=”Hide-password-register”]’: ‘conformPassword’
}),
//this event is used to toggle the eye-image to show and hide function in register page ,password field//
passWord: function (e)
{
try{
let input = $(“#register-password”);
let Parent = jQuery(e.target).parent();
let showButton = Parent.find(‘[data-action=”Show-password”]’);
let hideButton = Parent.find(‘[data-action=”Hide-password”]’);
Parent.toggleClass(‘show-passoword hide-passoword’);
if (input.attr(‘type’) === ‘password’)
{
input.attr(‘type’, ‘text’);
showButton.hide();
hideButton.show();
} else {
input.attr(‘type’, ‘password’);
showButton.show();
hideButton.hide();
}
}catch(e)
{
console.log(“RegisterPage-eye-icon”, e);
}
},
//this event is used to toggle the eye-image to show and hide function in register page conform password field//
conformPassword: function (e)
{
try{
let input = $(“#register-password2”);
let Parent = jQuery(e.target).parent();
let showButton = Parent.find(‘[data-action=”Show-password-register”]’);
let hideButton = Parent.find(‘[data-action=”Hide-password-register”]’);
Parent.toggleClass(‘show-passoword-register hide-passoword-register’);
if (input.attr(‘type’) === ‘password’)
{
input.attr(‘type’, ‘text’);
showButton.hide();
hideButton.show();
} else {
input.attr(‘type’, ‘password’);
showButton.show();
hideButton.hide();
}
}catch(e)
{
console.log(“RegisterPage-eye-icon”, e);
}
},
getContext: .wrap(LoginRegisterRegisterView.prototype.getContext, function (fn) { let originalRet = fn.apply(this, .toArray(arguments).slice(1));
let ShowPassword = Utils. getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-open.png”));
let HidePassword = Utils.getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-close.png”));
let ShowConformPassword = Utils. getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-open.png”));
let HideConformPassword = Utils.getAbsoluteUrl(getExtensionAssetsPath(“images/eye-icon-close.png”));
originalRet.ShowPassword = ShowPassword;
originalRet.HidePassword = HidePassword;
originalRet.ShowConformPassword = ShowConformPassword;
originalRet.HideConformPassword = HideConformPassword;
return originalRet;
})
});
}
};
});
css file:
.hidePasswordLogin,
.showPasswordLogin
{
width: 10%;
left: 85%;
position: relative;
top: 53px;
@media (max-width: $screen-xs-min ) and (max-width: ($screen-sm-min – 1)) {
width: 5%;
left: 92%;
top: 52px;
}
@media (max-width: $screen-xs-min ) {
width: 9%;
left: 90%;
top: 50px;
}}
.ShowPassword,
.ShowConformPassword,
.HidePassword,
.HideConformPassword {
width: 10%;
left: 85%;
position: relative;
top: 53px;
@media (max-width: $screen-xs-min ) and (max-width: ($screen-sm-min – 1)) {
width: 6%;
left: 92%;
top: 52px;
}
@media (max-width: $screen-xs-min ) {
width: 9%;
left: 89%;
top: 53px;
}}
img.showPasswordLogin,
.HidePassword,
.HideConformPassword {
display: none;
}