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

Tutorials
  • 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>
    
  • Should be a own widget.

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

  • 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.

  • @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.

  • @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 😞

  • Updated to latest 🙂 @fais3000 @cfrancois @Kev-M

  • thnk you

  • julianJ julian unpinned this topic on

Suggested Topics