Join our HiFi mailing list to receive the latest news & updates

How to set up a member login section on HiFi

1 Comment(s) | Posted | by Ashley Bennett |

If you plan to offer material on your website exclusively to designated users, then creating a member login section is a necessity. Luckily, HiFi makes it simple enough to set up a login area in a matter of minutes.

To start creating your login page, create a blank page in your site tree and title it something like “Member Login.”

The default HiFi template comes with a pre-built login form that appears anytime a user who is not logged in or registered attempts to access content only visible to site users. You can find the login.html file in the hifi > user folder of your template, or simply create a new one.

In the login.html file you’ll see the following form:

<form id="login" action="/hifi/login" method="post">
	<fieldset>
		<label for="email">Email</label>
		<input type="text" class="text" id="email" name="email" value="{{email}}"/>
		<label for="password">Password</label>             
	 	<input type="password" class="text" id="password" name="password" value=""/>
		<input type="hidden" name="redirect" value="{{redirect}}" />
		<fieldset class="checkbox">
			<label><input type="checkbox" name="staySignedIn" value="false"/> Remember me</label>
		</fieldset>        
	</fieldset>         
	<fieldset class="submit">
		<input type="submit" value="Login"/>
 	</fieldset>
</form>


Feel free to change the fieldsets to those that apply to your users. For instance, maybe you’d like to replace the email input with a username field. Once your form is set, copy this code.

Next, you’ll need to create a custom template file for your “Member Login” page. Paste the form you just copied into the correct content area and change the value of the redirect input field.

For example, if you wanted to redirect users to the homepage after they have logged in, your code would look like so:

<input type="hidden" name="redirect" value="/"/>

That’s it! If you’d like to test the functionality of your login page make sure you are completely logged out of the site or open it in a new browser window.

1 Comment(s) | Posted | by Ashley Bennett |

Comments

  1. Ben Hoover's avatar
    Ben Hoover
    | Permalink
    Thanks for this post! Our website is built on Hi-Fi and we currently use a feature like this on our website to offer content to about 400 members. We are finding a need to offer different content to different users. I'm wondering if there might be a way to do this using your methods above? Suggestions or Resources?