Lucid One - Register & Login on same page

Lucid One - Register & Login on same page

{% layout settings.customer_layout %}

<div class="{% if settings.show_sidebar %}span9{% else %}span12{% endif %} columns">
  <div class="row-fluid">
    <div id="template" class="span6">
		<div id="customer">
			<div class="template_header">
				<h1 class="title">{{ settings.tr_account_login }}</h1>
			</div>
			{% form 'customer_login' %}
			{% if form.errors %}
			<div class="alert alert-error">
				{{ form.errors | default_errors }}
			</div>
			{% endif %}
			<div class="well">
				<input type="email" value="" name="customer[email]" id="customer_email" class="input-large" placeholder="Email">
				{% if form.password_needed %}
				{% comment %}
				Customer Account Login
				{% endcomment %}
				<input type="password" value="" name="customer[password]" id="customer_password" class="input-medium" placeholder="Password">
				{% endif %}
				<button class="btn btn-primary no-bottom-margin" type="submit">Sign in</button>
			</div>  
			<div id="forgot_password">
				<a href="#" onclick="showRecoverPasswordForm();return false;">Forgot your password?</a>
			</div>
			{% endform %}
		</div>

		{% comment %}
		Recover Password Form
		{% endcomment %}

		<div id="recover-password" style='display:none'>
			<div class="template_header">
				<h2 class="title">{{ settings.tr_account_reset }}</h2>
				<hr>
				<p class="note">We will send you an email to reset your password.</p>
			</div>

			{% form 'recover_customer_password' %}
			{% if form.errors %}
			<div class="alert alert-error">
				{{ form.errors | default_errors }}
			</div>
			{% endif %}
			<div class="well form-inline">

				<input type="email" value="" name="email" id="recover-email" class="input-large text" placeholder="Email">
				<button class="btn btn-primary" type="submit">Submit</button>
				<a class="btn" href="#" onclick="hideRecoverPasswordForm();return false;">Cancel</a>
			</div>
			{% endform %}
		</div>

		{% comment %}
		Guest Login form for shops with optional customer accounts. This form is displayed only when users click on the checkout link
		on the cart page.
		{% endcomment %}

		{% if shop.checkout.guest_login %}
		<div id="guest">
			<div class="template_header">
				<h3 class="title">{{ settings.tr_guest_login }}</h3>
				<hr>
			</div>
			{% form 'guest_login' %}
			<div class="control-group">
				<button class="btn btn-primary" type="submit">Continue as Guest</button>
			</div>
			{% endform %}
		</div>
		{% endif %}
	</div>
    
    <!-- Create Customer -->
	<div id="create-customer" class="span6">
		<h1 class="title">Create an account</h1>

		<h3>New to {{ shop.name }}? Sign up for a free account.</h3>

		{% form 'create_customer' %}

		{{ form.errors | default_errors }}

		<div id="first_name" class="clearfix form-row">
			<label for="first_name" class="login">First Name</label>
			<input type="text" value="" name="customer[first_name]" id="first_name" class="styled-input" placeholder="Your first name" value="{{ form.fields.first_name }}" size="30" />
		</div>

		<div id="last_name" class="clearfix form-row">
			<label for="last_name" class="login">Last Name</label>
			<input type="text" value="" name="customer[last_name]" id="last_name" class="styled-input" placeholder="Your last name" value="{{ form.fields.last_name }}" size="30" />
		</div>

		<div id="email" class="clearfix form-row">
			<label for="email" class="login">Email Address</label>
			<input type="email" value="" name="customer[email]" id="email" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" placeholder="your@email.com" value="{{ form.fields.email }}" size="30" />
		</div>

		<div id="password" class="clearfix form-row">
			<label for="password" class="login">Password</label>
			<input type="password" value="" name="customer[password]" id="password" class="password styled-input{% if form.errors contains 'password' %} error{% endif %}" size="30" />
		</div>

		<div class="action-bottom clearfix">
			<input class="btn styled-submit" type="submit" value="Create" />
		</div>
		{% endform %}
	</div><!-- /#create-customer -->
    
  </div>
</div>
<script type="text/javascript">
function showRecoverPasswordForm() {
	document.getElementById('recover-password').style.display = 'block';
	document.getElementById('customer').style.display='none';
}

function hideRecoverPasswordForm() {
	document.getElementById('recover-password').style.display = 'none';
	document.getElementById('customer').style.display = 'block';
}

if (window.location.hash == '#recover') { showRecoverPasswordForm() }
</script>