From 8ffccddc5f7c772a392064dd0914e6d26b394e00 Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 23 Jul 2023 14:07:20 +0000
Subject: [PATCH] applied new design to register.html

---
 src/templates/auth/register.html | 106 +++++++++++++++++++++++++++----
 1 file changed, 92 insertions(+), 14 deletions(-)

diff --git a/src/templates/auth/register.html b/src/templates/auth/register.html
index 86842060..a96868e7 100644
--- a/src/templates/auth/register.html
+++ b/src/templates/auth/register.html
@@ -3,7 +3,7 @@
 {% block title %}{{ _("Register") }}{% end block %}
 
 {% block content %}
-	<div class="row justify-content-center my-5">
+	<!--<div class="row justify-content-center my-5">
 		<div class="col col-md-6">
 			<h4 class="mb-4">{{ _("Register A New Account") }}</h4>
 
@@ -62,13 +62,91 @@
 				</div>
 
 				<div class="d-grid">
-					<button type="submit" class="btn btn-primary" disabled>
+					<button type="submit" class="is-primary" disabled>
 						{{ _("Register") }}
 					</button>
 				</div>
 			</form>
 		</div>
-	</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="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 %}
@@ -92,10 +170,10 @@
 			var uid = $(this);
 
 			check_uid = setTimeout(function() {
-				$.get("/api/check/uid", { uid : uid.val() },
+				$.get("/api/check/uid", { uid : uid.val() },
 					function(data) {
 						// Reset all classes
-						uid.removeClass("is-valid is-invalid");
+						uid.removeClass("is-success is-danger");
 						valid.uid = false;
 
 						// Hide all feedback
@@ -103,17 +181,17 @@
 
 						switch (data.result) {
 							case "ok":
-								uid.addClass("is-valid");
+								uid.addClass("is-success");
 								valid.uid = true;
 								break;
 
 							case "invalid":
-								uid.addClass("is-invalid");
+								uid.addClass("is-danger");
 								$("#uid-invalid").show();
 								break;
 
 							case "taken":
-								uid.addClass("is-invalid");
+								uid.addClass("is-danger");
 								$("#uid-taken").show();
 								break;
 						}
@@ -134,7 +212,7 @@
 				$.get("/api/check/email", { email : email.val() },
 					function(data) {
 						// Reset all classes
-						email.removeClass("is-valid is-invalid");
+						email.removeClass("is-success is-danger");
 						valid.email = false;
 
 						// Hide all feedback
@@ -142,22 +220,22 @@
 
 						switch (data.result) {
 							case "ok":
-								email.addClass("is-valid");
+								email.addClass("is-success");
 								valid.email = true;
 								break;
 
 							case "invalid":
-								email.addClass("is-invalid");
+								email.addClass("is-danger");
 								$("#email-invalid").show();
 								break;
 
 							case "blacklisted":
-								email.addClass("is-invalid");
+								email.addClass("is-danger");
 								$("#email-blacklisted").show();
 								break;
 
 							case "taken":
-								email.addClass("is-invalid");
+								email.addClass("is-danger");
 								$("#email-taken").show();
 								break;
 						}
@@ -181,4 +259,4 @@
 			submit.prop("disabled", disabled);
 		});
 	</script>
-{% end block %}
+{% end block %}
\ No newline at end of file
-- 
2.47.3