Widgets: How to place a login form on the homepage (or anywhere else)

[psychobunny]

Copy and paste the following into an HTML widget - or if you're building your own theme, you can embed this directly in the tpl of course. Under "Groups", select guests to only show this widget to logged out users.

<div class="login-block">
    <div class="alert alert-danger" id="login-error-notify" <!-- IF error -->style="display:block"<!-- ELSE -->style="display: none;"<!-- ENDIF error -->>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>[[login:failed_login_attempt]]</strong>
        <p>{error}</p>
    </div>

    <form class="form-horizontal" action="{config.relative_path}/login" role="form" method="post" id="login-form">
        <div class="form-group">
            <div class="col-lg-12">
                <label for="username" class="control-label">[[user:username]]</label><br />
                <input class="form-control" type="text" placeholder="[[user:username]]" name="username" id="username" autocorrect="off" autocapitalize="off" value="{username}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-12">
                <label for="password" class="control-label">[[user:password]]</label><br />
                <input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" <!-- IF username -->autocomplete="off"<!-- ENDIF username -->/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-12">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
                    </label>
                </div>
            </div>
        </div>
        <input type="hidden" name="_csrf" value="{config.csrf_token}" />
        <input type="hidden" name="noscript" id="noscript" value="true" />
        <div class="form-group">
            <div class="col-lg-12">
                <button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button>
                <!-- IF allowRegistration -->
                <span>[[login:dont_have_account]] <a href="{config.relative_path}/register">[[register:register]]</a></span>
                <!-- ENDIF allowRegistration -->
                &nbsp; <a id="reset-link" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
            </div>
        </div>
    </form>

</div>

<script>
require(['forum/login'], function(login) {
login.init();
});
</script>

[Hägar]

Should be a own widget.

[a_5mith]

Why? Not everyone would use this. That's why we have an HTML widget to create what you want.

[Kev M]

Hi,

Just FYI this code doesn't work in NodeBB hosted. If I use this widget, when I try to login it returns a white page that says "Forbidden".
Also, when this widget is in place and I try to use the proper login form (top right hand corner), then when logging in using that form returns a white page that shows "/".
However if I reload the home page then I actually log in.

When I removed the widget the normal login page worked.

From an ease of use perspective it seems like it would make sense to have this as a separate pre-built widget.

[cfrancois]

@Kev-M I got the same error. And the login page came with two login areas, that is too much.
I tried to understand the issues but I wasn't able to.

[fais3000]

@cfrancois Had the same error. So we ended up using an iframe of the login page in the widget and then hiding the nav bar and footer within it

[psychobunny]

Updated to latest @fais3000 @cfrancois @Kev-M

[אשר]

thnk you