added email field to form

[ipfire.org.git] / src / templates / auth / register.html

{% extends "../base.html" %}

{% block title %}{{ _("Register") }}{% end block %}

{% block content %}
	<!--<div class="row justify-content-center my-5">
		<div class="col col-md-6">
			<h4 class="mb-4">{{ _("Register A New Account") }}</h4>

			<p class="lead">
				{{ _("Become a part of our community by registering an account!") }}
			</p>

			<form id="form-register" action="" method="POST">
				{% raw xsrf_form_html() %}

				<input type="hidden" name="next" value="{{ next or "" }}">

				<div class="mb-3">
					<div class="input-group">
						<span class="input-group-text">@</span>
						<input type="text" class="form-control form-control-lg"
							name="uid" placeholder="{{ _("Username") }}" required autofocus
							pattern="[a-z_][a-z0-9_-]{3,31}">
					</div>
					<div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
						{{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
					</div>
					<div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
						{{ _("This username is not available") }}
					</div>
				</div>

				<div class="row mb-3">
					<div class="col-12 col-sm-6">
						<label class="form-label">{{ _("First Name") }}</label>

						<input type="text" class="form-control" name="first_name"
							placeholder="{{ _("First Name") }}" required>
					</div>

					<div class="col-12 col-sm-6">
						<label class="form-label">{{ _("Last Name") }}</label>

						<input type="text" class="form-control" name="last_name"
							placeholder="{{ _("Last Name") }}" required>
					</div>
				</div>

				<div class="mb-3">
					<input type="email" class="form-control"
						name="email" placeholder="{{ _("Email Address") }}" required>
					<div id="email-invalid" class="invalid-feedback invalid-feedback-email">
						{{ _("This email address is invalid") }}
					</div>
					<div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
						{{ _("This email address cannot be used") }}
					</div>
					<div id="email-taken" class="invalid-feedback invalid-feedback-email">
						{{ _("This email address is already in use") }}
					</div>
				</div>

				<div class="d-grid">
					<button type="submit" class="is-primary" disabled>
						{{ _("Register") }}
					</button>
				</div>
			</form>
		</div>
	</div>-->

	<section class="section">
		<div class="container">
			<div class="columns is-centered">
				<div class="column is-one-third">
					<h1 class="title is-1">
						IPFire<span class="has-text-primary">_</span>
					</h1>
					<h4 class="subtitle is-4">{{ _("Register A New Account") }}</h4>

					<div class="block">
						<p class="is-size-5">
							{{ _("Become a part of our community by registering an account!") }}
						</p>
					</div>

					<form id="form-register" action="" method="POST">
						{% raw xsrf_form_html() %}

						<input type="hidden" name="next" value="{{ next or "" }}">

							<div class="block">
								<div class="field">
									<div class="field-body">
										<div class="field">
											<p class="control has-icons-left">
												<span class="icon is-small is-left">
													<i class="fas fa-at"></i>
												</span>
												<input class="input" type="text" placeholder="{{ _("Username") }}" required autofocus
													pattern="[a-z_][a-z0-9_-]{3,31}">
											</p>
										</div>
									</div>
								</div>

									<div id="uid-invalid" class="invalid-feedback invalid-feedback-uid">
										{{ _("Please choose a username in UNIX format with at least four characters, starting with a lowercase letter, followed by only lowercase letters, digits, dash and underscore") }}
									</div>
									<div id="uid-taken" class="invalid-feedback invalid-feedback-uid">
										{{ _("This username is not available") }}
									</div>
							</div>

							<div class="block">
								<div class="field">
									<div class="field-body">
										<div class="field">
											<p class="control has-icons-left">
												<span class="icon is-small is-left">
													<i class="fas fa-person"></i>
												</span>
												<input class="input" type="text" name="first_name" placeholder="{{ _("First Name") }}" required autofocus>
											</p>
											<p class="control has-icons-left">
												<span class="icon is-small is-left">
													<i class="fas fa-person"></i>
												</span>
												<input class="input" type="text" name="last_name" placeholder="{{ _("Last Name") }}" required autofocus>
											</p>
										</div>
									</div>
								</div>
							</div>

							<div class="block">
								<div class="field">
									<div class="field-body">
										<div class="field">
											<p class="control has-icons-left">
												<span class="icon is-small is-left">
													<i class="fas fa-envelope"></i>
												</span>
												<input class="input" type="email"
													name="email" placeholder="{{ _("Email Address") }}" required>
												<div id="email-invalid" class="invalid-feedback invalid-feedback-email">
													{{ _("This email address is invalid") }}
												</div>
												<div id="email-blacklisted" class="invalid-feedback invalid-feedback-email">
													{{ _("This email address cannot be used") }}
												</div>
												<div id="email-taken" class="invalid-feedback invalid-feedback-email">
													{{ _("This email address is already in use") }}
												</div>
											</p>
										</div>
									</div>
								</div>
							</div>

							<div class="field">
								<div class="control">
									<button class="button is-primary is-medium is-fullwidth">
										{{ _("Register") }}
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</section>
{% end block %}

{% block javascript %}
	<script>
		var form = $("#form-register");
		var submit = form.find(":submit");

		// Store the valid status
		var valid = {
			uid: false,
			email: false,
		};

		var check_uid;
		var check_email;

		form.find("input[name=uid]").on("keyup", function(e) {
			if (check_uid)
				clearTimeout(check_uid);

			var uid = $(this);

			check_uid = setTimeout(function() {
				$.get("/api/check/uid", { uid : uid.val() },
					function(data) {
						// Reset all classes
						uid.removeClass("is-success is-danger");
						valid.uid = false;

						// Hide all feedback
						$(".invalid-feedback-uid").hide();

						switch (data.result) {
							case "ok":
								uid.addClass("is-success");
								valid.uid = true;
								break;

							case "invalid":
								uid.addClass("is-danger");
								$("#uid-invalid").show();
								break;

							case "taken":
								uid.addClass("is-danger");
								$("#uid-taken").show();
								break;
						}

						form.trigger("change");
					}
				);
			}, 250);
		});

		form.find("input[name=email]").on("keyup", function(e) {
			if (check_email)
				clearTimeout(check_email);

			var email = $(this);

			check_email = setTimeout(function() {
				$.get("/api/check/email", { email : email.val() },
					function(data) {
						// Reset all classes
						email.removeClass("is-success is-danger");
						valid.email = false;

						// Hide all feedback
						$(".invalid-feedback-email").hide();

						switch (data.result) {
							case "ok":
								email.addClass("is-success");
								valid.email = true;
								break;

							case "invalid":
								email.addClass("is-danger");
								$("#email-invalid").show();
								break;

							case "blacklisted":
								email.addClass("is-danger");
								$("#email-blacklisted").show();
								break;

							case "taken":
								email.addClass("is-danger");
								$("#email-taken").show();
								break;
						}

						form.trigger("change");
					}
				);
			}, 250);
		});

		form.on("change", function() {
			var disabled = false;

			$.each(valid, function(field, status) {
				if (!status) {
					disabled = true;
					return false;
				}
			});

			submit.prop("disabled", disabled);
		});
	</script>
{% end block %}