register.html: Drop all old commented content

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

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

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

{% block content %}
	<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 %}