]> git.ipfire.org Git - ipfire.org.git/commitdiff
auth: Center the join form
authorMichael Tremer <michael.tremer@ipfire.org>
Thu, 5 Mar 2026 11:46:10 +0000 (11:46 +0000)
committerMichael Tremer <michael.tremer@ipfire.org>
Thu, 5 Mar 2026 11:46:10 +0000 (11:46 +0000)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/templates/auth/join.html

index 08ac9257785ea7459d7b5b14dd9cee8e5f30181f..45ac56083d537712f5ce6aff6b346435930936b0 100644 (file)
        ) %}
 {% 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>