website/views/account/register.handlebars

{{#section 'head'}}
	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
	<link rel="stylesheet" href="/assets/css/login.css" />
{{/section}}

{{> header}}

<div class="wrapper">

	<div class="account-form-wrapper">
		<form action="/account/register" method="post" class="account register">
			<h2>{{ locale.account.loginForm.register }}</h2>
			<p>{{ locale.account.loginForm.detailsPrompt }}</p>
			<div class="email">
				<label for="email">{{ locale.account.loginForm.email }}</label>
				<input name="email" id="email" type="email" value="{{ email }}" required>
			</div>
			<div>
				<label for="username">{{ locale.account.loginForm.username }}</label>
				<input name="username" id="username" value="{{ username }}" minlength=6 maxlength=16 required>
			</div>
			<div>
				<label for="mii_name">{{ locale.account.loginForm.miiName }}</label>
				<input name="mii_name" id="mii_name" value="{{ mii_name }}" maxlength=10 required>
			</div>
			<div>
				<label for="birthday">Birthday</label> {{! TODO - Add this to weblate, hard-coding for now to just push it out }}
				<input type="date" id="birthday" name="birthday">
			</div>
			<br>
			<div>
				<label for="password">{{ locale.account.loginForm.password }}</label>
				<input name="password" id="password" type="password" autocomplete="new-password" minlength="6" maxlength="16" required>
			</div>
			<div>
				<label for="password_confirm">{{ locale.account.loginForm.confirmPassword }}</label>
				<input name="password_confirm" id="password_confirm" type="password" autocomplete="new-password" minlength="6" maxlength="16" required>
			</div>
			<div class="h-captcha" data-sitekey="cf3fd74e-93ca-47e6-9fa0-5fc439de06d4"></div>
			<input name="redirect" id="redirect" type="hidden" value="{{redirect}}">
			<div class="buttons">
				<button type="submit">{{ locale.account.loginForm.register }}</button>
				<a href="/account/login{{#if redirect}}?redirect={{redirect}}{{/if}}" class="register">{{ locale.account.loginForm.loginPrompt }}</a>
			</div>
		</form>
	</div>
</div>

{{#if error}}
<div class="banner-notice error">
	<div>
		<p>{{ error }}</p>
	</div>
</div>
{{/if}}