login page with help buttons

Nmaster88
@nmaster88
9 years ago
94 posts

I found this link to integrate a login page with my custom skin:
https://www.jamroom.net/the-jamroom-network/documentation/howto/603/howto-add-the-user-login-form-to-any-page
But i wanted to have in form the help buttons too, like we can see from a default skin, like Elastic:
https://www.jamroom.net/the-jamroom-network/documentation/problems/1030/i-dont-know-how-to-login
In the image in attach, can be seen what help icons i want to use.
How can i do that?

updated by @nmaster88: 07/16/16 06:05:51PM

@douglas
9 years ago
2,806 posts

This is the code used for the help buttons.

Email/Username Help button:

<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_email_or_name').slideToggle(250);" type="button">

Email/Username Help div:

<div id="h_user_email_or_name" class="form_help" style="display:none;">

    <table class="form_help_drop">
        <tbody>
            <tr>
                <td class="form_help_drop_left">
                    please enter a valid email address or user name to log into the system.
                </td>
                <td class="form_help_drop_right">
                </td>
            </tr>
        </tbody>
    </table>

</div>

Password Help button:

<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_password').slideToggle(250);" type="button">

Password Help div:

<div id="h_user_password" class="form_help" style="">

    <table class="form_help_drop">
        <tbody>
            <tr>
                <td class="form_help_drop_left">
                    please enter your password
                </td>
                <td class="form_help_drop_right">
                </td>
            </tr>
        </tbody>
    </table>

</div>

Remember Login Help button:

<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_remember').slideToggle(250);" type="button">

Remember Login Help div:

<div id="h_user_remember" class="form_help" style="">

    <table class="form_help_drop">
        <tbody>
            <tr>
                <td class="form_help_drop_left">
                    check this option to remember your login information for next time
                </td>
                <td class="form_help_drop_right">
                </td>
            </tr>
        </tbody>
    </table>

</div>

And if your using the jrOneAll module...

Social Login Help button:

<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_').slideToggle(250);" type="button">

Social Login Help div:

<div id="h_" class="form_help" style="">

    <table class="form_help_drop">
        <tbody>
            <tr>
                <td class="form_help_drop_left">
                    Log in or Sign Up using any of the Social Networks listed
                </td>
                <td class="form_help_drop_right">
                </td>
            </tr>
        </tbody>
    </table>

</div>

You'll want to add these to your login template where you want them to show. Note that the Help buttons automatically get floated to the right.

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
9 years ago
2,806 posts

Can you show me the entire code your using for the login form?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

Thanks!

And how can i make the error text to only appear when there is an incorrect username and password?

It uses some code like this:

                <div id="jrUser_login_msg" class="page_notice form_notice error" style="display:block;text-align:center;color: red;">
                    Invalid username or password
                </div>

@douglas
9 years ago
2,806 posts

Try using just this instead:

<div id="jrUser_login_msg" class="page_notice form_notice error" style="display:none;">
</div>

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

That doesn't work either.

This is the code i have from inspection on the flashback page:

<div id="jrUser_login_msg" class="page_notice form_notice error" style="display: block;">Invalid Login or Password - please try again</div>

updated by @nmaster88: 04/07/16 07:04:24AM

@douglas
9 years ago
2,806 posts

Okay, I'm not at my dev computer but will check this out and let you know what I find.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

Nmaster88:
That doesn't work either.
This is the code i have from inspection on the flashback page:

Invalid Login or Password - please try again

And after searching in the debug variables i think i found something related.

I just need to know how the code to get that response (for both login and register forms). Thanks

updated by @nmaster88: 04/13/16 05:38:13AM

@douglas
9 years ago
2,806 posts

I just tested this code and it is working as it should be for me:

            {jrCore_form_create_session module="jrUser" option="login" assign="token"}
            <div id="jrUser_login_msg" class="page_notice form_notice error"></div>
            <form id="jrUser_login" name="jrUser_login" action="{$jamroom_url}/user/login_save" method="post" accept-charset="utf-8" enctype="multipart/form-data">
                <input type="hidden" id="jr_html_form_token" name="jr_html_form_token" value="{$token}">
                <input type="hidden" name="user_remember" value="off">
                user login <input type="text" id="user_email_or_name" class="form_text" name="user_email_or_name" value="">&nbsp;<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_email_or_name').slideToggle(250);" type="button"><br>
                <br>
                <div id="h_user_email_or_name" class="form_help" style="display:none;">
                    <table class="form_help_drop">
                        <tbody>
                            <tr>
                                <td class="form_help_drop_left">
                                    please enter a valid email address or user name to log into the system.
                                </td>
                                <td class="form_help_drop_right">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <br>
                password <input type="password" id="user_password" class="form_text" name="user_password" value="">&nbsp;<input value="?" class="form_button form_help_button" title="expand help" onclick="$('#h_user_password').slideToggle(250);" type="button"><br>
                <br>
                <div id="h_user_password" class="form_help" style="">
                    <table class="form_help_drop">
                        <tbody>
                            <tr>
                                <td class="form_help_drop_left">
                                    please enter your password
                                </td>
                                <td class="form_help_drop_right">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <br>
                <img id="form_submit_indicator" src="{$jamroom_url}/skins/jrNova/img/submit.gif" width="24" height="24" alt="working...">
                <input type="button" id="jrUser_login_submit" class="form_button" value="login" tabindex="3" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');">
            </form>

Let us know if that works for you.

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

Thanks!
That input is working for the submit but i don't see the the error anywhere:

<input type="button" id="jrUser_login_submit" class="form_button" value="login" tabindex="3" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');">

My code:

                        {jrCore_form_create_session module="jrUser" option="login" assign="token"}
                        <div id="jrUser_login_msg" class="page_notice form_notice error"></div>
                        <form class="jrform" id="jrUser_login" name="jrUser_login"
                              action="{$jamroom_url}/user/login_save" method="post" accept-charset="utf-8"
                              enctype="multipart/form-data" _lpchecked="1">

                            <input type="hidden" id="jr_html_form_token" name="jr_html_form_token"
                                   value="{$token}">
                            <input type="hidden" name="user_remember" value="off">

                            <div class="form-group signin-content">

                                <input type="username" placeholder="Username" id="user_email_or_name" name="user_email_or_name" style="width:90%;float:left;" class="form-control rounded input-lg text-center no-border">
                                <input value="?" title="expand help" style="outline: 0;float:left;border-radius:50px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border: 1px solid;margin: 10px 0px;" onclick="$('#h_user_email_or_name').slideToggle(250);" type="button">
                            </div>

                            <div id="h_user_email_or_name" class="form_help" style="display:none;">
                                            <p>please enter a valid email address or user name to log into the system.</p>
                            </div>

                            <div class="form-group  signin-content">
                                <input type="password" placeholder="Password" id="user_password" name="user_password" style="width:90%;float:left;" class="form-control rounded input-lg text-center no-border">
                                <input value="?" title="expand help" style="outline: 0;float:left;border-radius:50px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border: 1px solid;margin: 10px 0px;" onclick="$('#h_user_password').slideToggle(250);" type="button">
                            </div>

                            <div id="h_user_password" class="form_help" style="display:none;">
                                            <p>please enter your password</p>
                            </div>
                            <button type="submit" id="jrUser_login_submit" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">Sign in</span></button>
                            <div class="text-center m-t m-b"><a href="#"><small>Forgot password?</small></a></div>
                            <div class="line line-dashed"></div>
                            <p class="text-muted text-center"><small>Do not have an account?</small></p>
                            <a href="http://dev.wowmusic.fm/signup" class="btn btn-lg btn-info btn-block rounded">Create an account</a>

                            <input type="button" id="jrUser_login_submit" class="form_button" value="login" tabindex="3" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');">
                        </form>

After inserting the img element it seems to be working!

Unfortunatelly that code doesn't seem that is much flexible, i'm trying to put that image in other places and center it and if i do that the code stops working lol

updated by @nmaster88: 04/13/16 12:15:34PM

@douglas
9 years ago
2,806 posts

Sorry, I'm not understanding what you mean by the img element... can you explain more?

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

In the code you posted, i mean this:

<img id="form_submit_indicator" src="{$jamroom_url}/skins/jrNova/img/submit.gif" width="24" height="24" alt="working...">
                <input type="button" id="jrUser_login_submit" class="form_button" value="login" tabindex="3" onclick="jrFormSubmit('#jrUser_login','{$token}','ajax');">
            </form>

It's not flexible, i wanted to center the image, when it shows on the screen and place it on another place but if i do that the code stops working.

Thanks!

updated by @nmaster88: 04/14/16 06:35:01AM

@douglas
9 years ago
2,806 posts

I'm seeing an issue with this too and will try to figure it out.

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Nmaster88
@nmaster88
9 years ago
94 posts

douglas:
I'm seeing an issue with this too and will try to figure it out.
Thanks!

I had a look at the scripts and with seemed very complex to me. Thanks.
updated by @nmaster88: 04/14/16 11:54:32AM

@douglas
9 years ago
2,806 posts

This should be fixed for the next core release.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

in progress login page with help buttons

Tags