register: Fix hiding invalid feedback

[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="form-group">
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text">@</span>
						</div>
						<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="form-row mb-3">
					<div class="col">
						<label>{{ _("First Name") }}</label>

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

					<div class="col">
						<label>{{ _("Last Name") }}</label>

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

				<div class="form-group">
					<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>

				<button type="submit" class="btn btn-primary btn-block" disabled>
					{{ _("Register") }}
				</button>
			</form>
		</div>
	</div>
{% 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-valid is-invalid");
						valid.uid = false;

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

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

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

							case "taken":
								uid.addClass("is-invalid");
								$("#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-valid is-invalid");
						valid.email = false;

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

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

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

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

							case "taken":
								email.addClass("is-invalid");
								$("#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 %}