Support "large" icons and allow separate settings for User Login block and Login Page

Hi,

Yes, you can edit the weight parameter in the _rpx_user_register()
function in rpx.module (try a negative number).

Cheers,
George

I'm changing this feature request to 7.x-1.x-dev so that we can try to get it included in our current D7 development efforts. Then it will be easier to back port it to Drupal 6.

One other thought is the possibility of having a larger icon set (perhaps the same ones used in the authentication widget itself) as a configuration option. For sites that want to encourage Janrain Engage login over regular Drupal login that might be a nice feature. But I can create a separate thread to discuss that.

--Ben

This is slightly related to issue http://drupal.org/node/511210 though in that issue we discuss the ability to customize and embedded widget.

I think all around that Janrain module users want the ability to customize and theme the login icons/buttons location to fit with the goals and theme of their sites.

Looking forward to anything that you can come up with.

At least we could change the defauld location to "under the login button" (as opposed to above the login button as it is now).

This seems to be far more clear and user friendly (and the standard ?):

username input
password input
sign in button

OR (because it's another way to sign in)

sign in using one of these accounts
icons

As discussed with George, we're now targeting the following features as a next step on this issue thread:

a) Allow the position of the provider icons to be controlled by a weight setting (both individually and as a group).

b) Provide an option to choose different sizes of icon sets. We're planning on three sizes: small, medium, and large.

c) Allow the position and sizes of icons to be different on the login page and the user login block. For instance, you could specify large icons on the login page, but small icons on the user login block. The position of the icons could be different in each instance as well.

--Ben

BTW, individual positions (the order) of the provider icons can be
controlled from the rpxnow.com dashboard. Do we really want to add a
bunch of additional options to the module admin interface for this?

Oh, I see your point. You want to be able to arrange them differently
in different sections of the site.

Yeah, that was the idea. But the more important setting, I think, is the group position of all of the icons (so that you can place all of the icons above or below the Drupal login fields on the user login page, for instance).

Also, I've heard some feedback from the Drupal community about our default placement on the user login page. Currently, the icons appear below the password field but above the "Log in" submit button. Maybe by default they should be below the submit button so it doesn't break up the Drupal login form. The idea being "either login with the native site way or look below and login with one of these third-party sites."

--Ben

The default placement of icons on the user login page is modeled after
the OpenID core module. But of course, it's not a problem to change it.

Having thought about it, at this stage I can make the icon position
configurable. The size and individual positioning features will
probably have to be postponed until a future release.

George, if possible, I'd love to include the size in this release. The individual positioning could be postponed. If it's easier, we could just have two settings for size... one for the user login block and one for everywhere else. I just think the size gives site builders the ability to make Janrain Engage much more prominent on their site (something we all want!)

--Ben

Agree with #11 and #14

Committed support for larger sign-in icons and configurable
position. Look for it in the "Authentication" section of the
configuration panel.

Right now, the sign-in link and icons are themed as an item in a
list. This was done to make sure they do not clash with other items in
the sign-in block (i.e. "Log in using OpenID", "Create new account"
and "Request new password).

Now that it's possible to change the weight of the sign-in link, the
indentation caused by the list styling might not be desirable in some
cases (e.g. when the link is displayed either above of everything else
or on the very bottom of the sign-in block.)

Feedback and suggestions are welcome.

George,

I'll be testing this (and all of your other recent commits) later today and tomorrow. Will have feedback for you as soon as I can.

--Ben

Thanks, Ben.

George,

I just tested these new features and it's looking real good. Here are my suggested small fixes/tweaks:

1) When the Engage login icons are in the login block, they are indented (which doesn't look great). To fix, I'd add a padding-left equal to 0 for the "#user-login-form .rpx-links" CSS. This padding-left (equal to 0) already exists for "#user-login .rpx-links", which is why the user login page looks nice, but the user login block doesn't.

2) When the Engage login icons are above the Drupal login fields in the user login block, the bottom of the icons are too close to the username field. I'd add a padding-bottom equal to 15px for the "#user-login-form .rpx-links" CSS.

3) In the weight settings, I think a range of -150 to 150 seems a little excessive. Such a large number range makes the select list difficult to use. We just need enough range so that the icons can sit totally above the Drupal login username field or below the submit button. For instance, a value of -10 seems to place these icons at the top. We may need a great range in positive numbers to get the icons below the submit button.

4) On the settings page (admin/config/people/rpx), there seems to be some excessive vertical white space above and below the weight setting.

5) The icon size setting and the weight setting each probably need their own labels. I'd probably use "Icon size" and "Icon positioning".

6) You could use Drupal 7's #states feature to only show the "Icon size" and "Icon positioning" fields if "Attach Engage Sign-In link to login forms" is checked. It just makes the settings page less cumbersome because settings only show if you need them. We do this a lot for the Userpoints and Private Message modules.

7) I'd make the following string changes:

a. "Attach Engage Sign-In link to login forms". Change to: "Enable Janrain Engage sign-in on login forms"
b. "Attach the Engage Sign-In link to regular Drupal login block and the login page." Change to: "Display provider links and icons in the 'User login' block and on the user login page."
c. "Size of the Engage Sign-In icons on the login forms." Change to: "Choose the size of icons to use in the 'User login' block and on the user login page."
d. "Weight for the Engage Sign-In link; determines its position in the sign-in block." Change to: "Choose a weight for provider links and icons. Choosing a higher weight will display the links and icons lower down in the 'User login' block and on the user login page."

8) Is there any way in a block or the Drupal theme layer to display a link that when clicked launches the Janrain Engage authentication widget? I'm guessing this likely already exists and if so, we should document how to do it in the module's README.txt file. This way, a Drupal administrator doesn't have to display the icons in the 'User login' block and on the user login page to use the authentication widget. Basically, we just need to document a simple way that an end user could add some php to a block or else add some simple code on the Drupal theme layer to print a link that launches the authentication widget. So how would a Drupal site builder display a link that says "Login with Facebook, Twitter and more"?

--Ben

--Ben

1) When the Engage login icons are in the login block, they are indented (which doesn't look great). To fix, I'd add a padding-left equal to 0 for the "#user-login-form .rpx-links" CSS. This padding-left (equal to 0) already exists for "#user-login .rpx-links", which is why the user login page looks nice, but the user login block doesn't.

As I said in #16, this is not as simple as changing a CSS declaration.
If you change the weight of the sign-in links to (for example) 2,
you'd want them to be a correctly indented item list (which would not
be the case if we set padding-left to 0).

This said, I have no problem to changing this as you say, if that is
what we want.

2 - OK, done.

In the weight settings, I think a range of -150 to 150 seems a little excessive. Such a large number range makes the select list difficult to use. We just need enough range so that the icons can sit totally above the Drupal login username field or below the submit button. For instance, a value of -10 seems to place these icons at the top. We may need a great range in positive numbers to get the icons below the submit button.

Setting this to 150 is the only way to get the links below the submit
button. In the forms API, the range is controlled by the #delta
control, which can only be set to a single value (150 in this case).

On the settings page (admin/config/people/rpx), there seems to be some excessive vertical white space above and below the weight setting.

I'm not doing anything special there, so this must be the Drupal's
default styling for the weight UI control. I could tweak the CSS just
for this case only, but frankly - don't think it's worth it.

EDIT: (At this stage, that is.)

The icon size setting and the weight setting each probably need their own labels. I'd probably use "Icon size" and "Icon positioning".

OK.

You could use Drupal 7's #states feature to only show the "Icon size" and "Icon positioning" fields if "Attach Engage Sign-In link to login forms" is checked. It just makes the settings page less cumbersome because settings only show if you need them. We do this a lot for the Userpoints and Private Message modules.

Done, thanks.

7 - done, thanks.

Is there any way in a block or the Drupal theme layer to display a link that when clicked launches the Janrain Engage authentication widget??

Yes, the auth widget can be launched by clicking a link (in fact, when
you click on the icons, you click a link).

But for this link to work, rpx_js() would have to have been called,
which adds all the needed setup code to the page.

But I don't think we will be able to support this in the upcoming
Thurday release.

Pushed a commit that fixes the above.

Okay, sounds good.

One thought for #28 above (so I don't forget)... If we're able to add the link approach at some point, it would be nice to allow the provider in focus (in the widget) to be specified when calling the link. This way, you could launch the widget, for instance, with Facebook or Twitter in focus. And you could create separate links for each. Or if you didn't specify any provider in focus, the standard widget (with all enabled providers visible) would be displayed.

So what we would really need is an API function to create a link and launch the authentication widget.

--Ben

And just noting that what is described in #30 adds a lot of flexibility to the module because it allows the user to quickly and easily create their own alternate UI for launching the authentication widget.

--Ben

Confirmed that 1-7 are fixed. :-)

As for 8), I'm marking this issue as postponed so that we can address the "Create API/link to launch authentication widget" for a later release.

We also may want to add the large icons in a later release, too.

--Ben

Marking this as fixed since I've created separate issues for the remaining items.

--Ben

George,

I'm re-opening this issue and based on user feedback I've gathered, I'm hoping we can add the following to the upcoming release:

1. Support for "large" icons. These icons would be the same size as the icons that appear in the Janrain sign-in widget itself.

2. Support separate icon/positioning settings for the User Login block and User Login page. Currently, the issue is that you have to use the same settings for both the block and the page. This is problematic because it's often desirable to have small icons in the block and larger icons on the page (plus different positioning, too). So I'd recommend that we expand the two current settings to four settings (Block icon size, Block icon positioning, Page icon size, Page icon positioning).

What do you think?

--Ben

Hey Ben,

Definitely not in the upcoming release. It's already beta3 :)
At this stage we should just iron out the bugs and release the stable version.

Thanks,
George

Perhaps the 7.x-2.2 release might be better for this... still think it's important though based on feedback I've received.

--Ben

I agree - hoping to have a usable block that contains buttons. Limiting the login buttons to just the login form is really limiting this plugin. Many developers use blocks / panels to create really flexible layouts and this would be somewhat easy to do and really make this module take off. As it is I will probably just use the facebook connect and twitter modules because they offer much more flexibility on button placement, etc. OR just use the Engage widget creator from their website and embed the script/code in a block. It loses out on the features of this module but gains flexibility, which imo is more important the the features this module adds. Hope to see these changes made soon. Thanks for your work,

Bradford