) %}
{% 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>