Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Show Hide password eye icon into Password fields

Topic-icon Show Hide password eye icon into Password fields

Active Subscriptions:

None
3 years 10 months ago #66380 by joomleb
Hi guys,
I'm speaking about SCLogin Module and I'm writing here don't knowing if can exist a solution for the Registration page, Recovery Password page, Edit Profile page, Login page.
To have a show / hide eye icon, on the right, into the password / confirm password fields like this one it is really a must:

--- as far as I know, to run it, I can add this JS code into our template Custom JS:
function showpsw() {
  var x = document.getElementById("#jform_password1");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

function showpsw() {
  var x = document.getElementById("#jform_password2");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
Am I right ?

--- Please, Can you help on adding the Fontawesome 5 eye icons show / hide into the fields where: onclick="showpsw()" ?
The topic has been locked.
Support Specialist
3 years 10 months ago #66383 by mel
So I just put this on my local site and have a couple of changes for you:

1. Remove the # sign in the getElementById call. Otherwise, you'll get a NULL value back and it won't change.
2. For SCLogin, you don't need both of those functions in the code. There's one password input, so remove the second. If it's for a different view, disregard.
3. You'll need to add an ID to the password textbox in SCLogin. From your code it should be jform_password1. This would be around line 56ish.
4. You can add something like the following to add the eye to click on to toggle
<a onclick="showpsw()"><i class="icon-eye"></i></a>

I think this is a nice feature. I'm going to add it to our issue tracker for SCLogin. It should be simple to add in the next SCLogin release.

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 10 months ago #66392 by joomleb
Hi Melissa,
sorry for my later on replying to you. I am working in precarious conditions with the coronavirus issue. Many thanks for suggestions!

As far as I read the feature should has been added to SCLogin 8.4.3, Am I right ? Does it need the JFBConnect 8.4.3 update to run well or it is independent ? I'm asking because right now I updated SCLOgin but I cannot update JFBConnect and I'm not having back running...

About 2, I have to point you off that I add the double code, also for "password2" because the same feature should be added also during the "Registration with Socials page" where the "repeat password" field is present.

PS - Save space and replace text with images are really two important thing (more on mobile).
So, in the same time this feature will be added would be a really very good thing to have the option to show also the "Do you forget password?" text as a question mark icon (for example) within the password1 field...
The topic has been locked.
Support Specialist
3 years 10 months ago #66396 by mel
The change is contained within SCLogin. You can download just an SCLogin update here . The latest release of SCLogin includes a eye-icon inside the textbox for toggling the password. I chose to put it there to save space and to work well when the forget password button is enabled. Regarding showing a question mark for forget password instead of text, this was already an option in SCLogin. You should be able to pick between a black question mark, a white question mark or a text link.

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 10 months ago #66397 by joomleb
Hi Mel,

1 - something is is not running as expected using the famous Helix Ultimate framework based on Bootstrap 4 ( here my test site , see it in the Offcanvas position) and the icon is not shown.
I tested also on Protostar and the icon is shown (be careful, it is not vertically aligned) - again you can see it on my test site switching to Protostar template (I gave you yet a Super Admin access by PM) and I yet created a SCLogin module copy in a visible module position.

Please, Can you help on solve the issue ?

2 - The white/black icon is there, but it is not shown > Can you help on fix it ?
Anyway my suggestion was to put also this icon into the text field near the eye one and for the same reason: " I chose to put it there to save space ..." - maybe, to differentiate it, it should has a background colour like the "key" icon here
The topic has been locked.
Support Specialist
3 years 10 months ago #66399 by mel
For the icon:
1a. The icon on my test site showed up with the icon-eye class. However, if I change it to "fa fa-eye" on yours, it will show. So can you try going into SCLogin module parameters > Advanced tab and enable the "Load jQuery" option to see if that helps.
1b. Also, it seems there needs to be a float style added.
.sclogin-passwd {
float:left;
}

2. I think the icon showing up will be solved with the change for 1a.

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 10 months ago #66428 by joomleb
Hi Mel,
many thanks for your suggestions. I set "SCLogin > Advanced > Load jQuery: Yes" and added the Custom CSS code you provided on my Test2 site (you have/received the Super Admin access by PM), but nothing has changed.

Please, Can you help on solve it ?
The topic has been locked.
Support Specialist
3 years 10 months ago #66433 by mel
I turned on the JFBConnect option for Load Bootstrap CSS too and the icon was not showing up. I FTP'ed in and added the "fa fa-eye" classes for to the icon and it's now showing up. So it should hopefully work regardless of whether the load jquery is enabled in the module. I checked in this change for the next release of JFBConnect, so no worries about it getting lost when you update next.

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 10 months ago #66436 by joomleb
Hi Melissa,
1 - the eye icon = thanks, Please:
1A - that is a test site, Can you give me the instructions on where I have to change / to add the "fa fa-eye" to have it running on my live site ?
1B - Can you add the class="far fa-eye-slash" when on to switch off ?
1C - Can you vertical align on the middle the icon into the field ? (Tested with "vertical-align:middle", but it isn't running)
1D - Would be really too better to have the "font-size" (at least) expressed as rem and not px, like: "font-size: 1rem;" (or 1.2rem)
"...So it should hopefully work regardless of whether the load jquery is enabled in the module..." = That is a very good thing!

2 - The white/black icon is there, but it is not shown. As far as I understand, with "JFBConnect > Configuration > Load Bootstrap CSS: Yes" the icon is shown, but it is really a too bad solution because we are running Helix Ultimate based on Bootstrap 4 (and it is loading also FontAwesome) and also the Joomla 4 beta 1 (based on same Bootstrap version) has been released.
Please, Can you consider a similar solution lie for the eye one, using for ex. the fontawesome <i class="far fa-question-circle"></i> OR <i class="fas fa-question"></i> ?
It will safe a lot of space (I mean, the question mark will be bigger within the same space. This is a must on 2020, thinking on the mobile world).

OR - For both a very good solution would be to have the fields to add our Icon Classes lie we done for the Login/Register Buttons.
And PS - With all the respect, your icons are a little bit out of dated while using fontawesome class would be also so simple to change the color using CSS...
The topic has been locked.
Support Specialist
3 years 10 months ago #66461 by mel
In progress.
1.A. Done
1.B. change was added to your site. Check the PM that's coming with the change.
1.C. Does the PM fix this for you?
1.D. I'll put an issue in our tracker to investigate changing from pixels.

2. I agree we need to upgrade. In the meantime, I've added the question signs to the class for the icons (see PM) and I've entered an issue into our tracker so that we upgrade to FontAwesome properly. I need to do some work to make JFBConnect compatible with Joomla 4, and this follows with that.
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect v8.x Support (Joomla 3 Only) (CLOSED)
  7. Show Hide password eye icon into Password fields
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS