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