From: Michael Tremer <michael.tremer@ipfire.org>
Date: Thu, 5 Mar 2026 11:46:10 +0000 (+0000)
Subject: auth: Center the join form
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8c8266625e187dd4b56fdbe3f72aaf3bc698acdf;p=ipfire.org.git

auth: Center the join form

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/templates/auth/join.html b/src/templates/auth/join.html
index 08ac9257..45ac5608 100644
--- a/src/templates/auth/join.html
+++ b/src/templates/auth/join.html
@@ -9,113 +9,115 @@
 	) %}
 {% end block %}
 
-{% block content %}
-	<section class="section">
-		<div class="container">
-			<div class="columns is-centered">
-				<div class="column is-one-third">
-					<h1 class="title">
-						IPFire<span class="has-text-primary">_</span>
-					</h1>
-					<h4 class="subtitle">{{ _("Join Our Community") }}</h4>
-
-					<form id="form-join" action="" method="POST">
-						{% raw xsrf_form_html() %}
-
-						<input type="hidden" name="next" value="{{ next or "" }}">
-
-						<div class="block">
-							<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" name="uid"
-										placeholder="{{ _("Username") }}"
-										pattern="[a-z_][a-z0-9_-]{3,31}"
-										required autofocus>
-								</p>
-
-								<p id="uid-invalid" class="help is-danger 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") }}
-								</p>
-
-								<p id="uid-taken" class="help is-danger invalid-feedback invalid-feedback-uid">
-									{{ _("This username is not available") }}
-								</p>
+{% block container %}
+	<section class="hero is-fullheight-with-navbar">
+		<div class="hero-body">
+			<div class="container">
+				<div class="columns is-centered">
+					<div class="column is-one-third">
+						<h1 class="title">
+							IPFire<span class="has-text-primary">_</span>
+						</h1>
+						<h4 class="subtitle">{{ _("Join Our Community") }}</h4>
+
+						<form id="form-join" action="" method="POST">
+							{% raw xsrf_form_html() %}
+
+							<input type="hidden" name="next" value="{{ next or "" }}">
+
+							<div class="block">
+								<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" name="uid"
+											placeholder="{{ _("Username") }}"
+											pattern="[a-z_][a-z0-9_-]{3,31}"
+											required autofocus>
+									</p>
+
+									<p id="uid-invalid" class="help is-danger 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") }}
+									</p>
+
+									<p id="uid-taken" class="help is-danger invalid-feedback invalid-feedback-uid">
+										{{ _("This username is not available") }}
+									</p>
+								</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-person"></i>
-											</span>
-											<input class="input" type="text"
-												name="first_name" placeholder="{{ _("First Name") }}"
-												required>
-										</p>
-									</div>
 
-									<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="last_name" placeholder="{{ _("Last Name") }}"
-												required>
-										</p>
+							<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>
+											</p>
+										</div>
+
+										<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="last_name" placeholder="{{ _("Last Name") }}"
+													required>
+											</p>
+										</div>
 									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="block">
-							<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>
-								</p>
-
-								<p id="email-invalid" class="help is-danger invalid-feedback invalid-feedback-email">
-									{{ _("This email address is invalid") }}
-								</p>
-
-								<p id="email-blacklisted" class="help is-danger invalid-feedback invalid-feedback-email">
-									{{ _("This email address cannot be used") }}
-								</p>
-
-								<p id="email-taken" class="help is-danger invalid-feedback invalid-feedback-email">
-									{{ _("This email address is already in use") }}
-								</p>
+							<div class="block">
+								<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>
+									</p>
+
+									<p id="email-invalid" class="help is-danger invalid-feedback invalid-feedback-email">
+										{{ _("This email address is invalid") }}
+									</p>
+
+									<p id="email-blacklisted" class="help is-danger invalid-feedback invalid-feedback-email">
+										{{ _("This email address cannot be used") }}
+									</p>
+
+									<p id="email-taken" class="help is-danger invalid-feedback invalid-feedback-email">
+										{{ _("This email address is already in use") }}
+									</p>
+								</div>
 							</div>
-						</div>
 
-						{# Honeypot Field #}
-						<div class="block">
-							<div class="field">
-								<p class="control">
-									<input class="input is-hidden" type="text" name="honey"
-										placeholder="{{ _("Give me honey") }}">
-								</p>
+							{# Honeypot Field #}
+							<div class="block">
+								<div class="field">
+									<p class="control">
+										<input class="input is-hidden" type="text" name="honey"
+											placeholder="{{ _("Give me honey") }}">
+									</p>
+								</div>
 							</div>
-						</div>
 
-						<div class="field">
-							<div class="control">
-								<button class="button is-primary is-medium is-fullwidth">
-									{{ _("Join Now") }}
-								</button>
+							<div class="field">
+								<div class="control">
+									<button class="button is-primary is-medium is-fullwidth">
+										{{ _("Join Now") }}
+									</button>
+								</div>
 							</div>
-						</div>
-					</form>
+						</form>
+					</div>
 				</div>
 			</div>
 		</div>