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


  • Admin

    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. Remove the ` around !loggedIn at the top and bottom (sorry, I'm fixing that bug soon :P)

    <!-- IF `!loggedIn` -->
    <form class="form-horizontal" role="form" method="post" action="login" id="login-form">
    	<div class="form-group">
    		<label for="username" class="col-lg-2 control-label">Username</label>
    		<div class="col-lg-10">
    			<input class="form-control" type="text" placeholder="Username" name="username" id="username" autocorrect="off" autocapitalize="off" />
    		</div>
    	</div>
    	<div class="form-group">
    		<label for="password" class="col-lg-2 control-label">Password</label>
    		<div class="col-lg-10">
    			<input class="form-control" type="password" placeholder="Password" name="password" id="password" />
    		</div>
    	</div>
    	<div class="form-group">
    		<div class="col-lg-offset-2 col-lg-10">
    			<div class="checkbox">
    				<label>
    					<input type="checkbox" name="remember" id="remember" checked /> Remember Me
    				</label>
    			</div>
    		</div>
    	</div>
    	<div class="form-group">
    		<div class="col-lg-offset-2 col-lg-10">
    			<hr />
    			<button class="btn btn-primary btn-lg btn-block" id="login" type="submit">Login</button>
    			<!-- IF allowRegistration -->
    			<span>[[login:dont_have_account]] <a href="{relative_path}/register">Register</a></span>
    			<!-- ENDIF allowRegistration -->
    			<!-- IF showResetLink -->
    			&nbsp; <a id="reset-link" href="{relative_path}/reset">Forgot Password</a>
    			<!-- ENDIF showResetLink -->
    		</div>
    	</div>
    </form>
    
    <script>
    require(['forum/login'], function(login) {
    login.init();
    });
    </script>
    <!-- ENDIF `!loggedIn` -->
    


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


 

Suggested Topics

| |