bootstrap4: port registration sites to bootstrap4

Signed-off-by: Jonatan Schlag <jonatan.schlag@ipfire.org>

diff --git a/src/templates/register-activation-fail.html b/src/templates/register-activation-fail.html
index 25f8a241bf22a5df28933bfcaa0f9263991e4f5d..d1af8acb857750ef422d4f002a2a8a649268f63e 100644 (file)
--- a/src/templates/register-activation-fail.html
+++ b/src/templates/register-activation-fail.html
@@ -3,27 +3,26 @@
 {% block title %}{{ _("Account activation failed") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       {{ _("Account activation") }}
-               </li>
-       </ul>
-
-       <div class="page-header">
-               <h1>{{ _("Activation failed") }}</h1>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <nav aria-label="breadcrumb" role="navigation">
+                               <ol class="breadcrumb">
+                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
+                                       <li class="breadcrumb-item active">{{ _("Account activation") }}</li>
+                               </ol>
+                       </nav>
+               </div>
        </div>
-
-       <div class="row">
-               <div class="span6 offset3">
-                       <p>
-                               {{ _("We are sorry.") }}
-                               {{ _("The activation of your account has failed.") }}
-                               {{ _("Possibly the registration code is wrong or your registration timed out.") }}
-                       </p>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <div class="alert alert-danger">
+                               <h2 style="word-wrap: break-word;" class="alert-heading">{{ _("Activation failed") }}</h2>
+                               <p>
+                                               {{ _("We are sorry.") }}
+                                               {{ _("The activation of your account has failed.") }}
+                                               {{ _("Possibly the registration code is wrong or your registration timed out.") }}
+                                       </p>
+                       </div>
                </div>
        </div>
 {% end %}

diff --git a/src/templates/register-activation-success.html b/src/templates/register-activation-success.html
index 474cfad7efb81d5a26beb8afb5283c2d9ff375c9..8db4bcefe56f6e4ed001dd8ecc03fd2f06b64493 100644 (file)
--- a/src/templates/register-activation-success.html
+++ b/src/templates/register-activation-success.html
@@ -3,26 +3,25 @@
 {% block title %}{{ _("Account activation successful") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       {{ _("Account activation") }}
-               </li>
-       </ul>
-
-       <div class="page-header">
-               <h1>{{ _("Activation successful") }}</h1>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <nav aria-label="breadcrumb" role="navigation">
+                               <ol class="breadcrumb">
+                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
+                                       <li class="breadcrumb-item active">{{ _("Account activation") }}</li>
+                               </ol>
+                       </nav>
+               </div>
        </div>
-
-       <div class="row">
-               <div class="span6 offset3">
-                       <p>
-                               {{ _("Your account has been activated, %s.") % user.realname }}
-                               {{ _("Have fun!") }}
-                       </p>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <div class="alert alert-success">
+                               <h2 style="word-wrap: break-word;" class="alert-heading">{{ _("Activation successful") }}</h2>
+                                       <p>
+                                               {{ _("Your account has been activated, %s.") % user.realname }}
+                                               {{ _("Have fun!") }}
+                                       </p>
+                       </div>
                </div>
        </div>
 {% end %}

diff --git a/src/templates/register-fail.html b/src/templates/register-fail.html
index af204afa4c41872ff5afeb8cc8c9f5498899f881..e0a331c78bd723c8fd99db5b764ae42d469f59d1 100644 (file)
--- a/src/templates/register-fail.html
+++ b/src/templates/register-fail.html
@@ -1,19 +1,23 @@
 {% extends "base.html" %}
 
 {% block body %}
-       <h1>{{ _("Registration failed") }}</h1>
-       <p>
-               {{ _("We are sorry.") }}
-               {{ _("We could not create your requested account.") }}
-       </p>
-
-       <ul>
-               {% for msg in messages %}
-                       <li>{{ msg }}</li>
-               {% end %}
-       </ul>
-
-       <p>
-               {{ _("Use the back button on your web browser to go back to the previous page and correct your submission.") }}
-       </p>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <div class="alert alert-danger">
+                               <h2 style="word-wrap: break-word;" class="alert-heading">{{ _("Registration failed") }}</h2>
+                               <p>
+                                       {{ _("We are sorry.") }}
+                                       {{ _("We could not create your requested account, because we encountered the following errors:") }}
+                               </p>
+                               <ul>
+                                       {% for msg in messages %}
+                                               <li>{{ msg }}</li>
+                                       {% end %}
+                               </ul>
+                               <p>
+                                       {{ _("Use the back button on your web browser to go back to the previous page and correct your submission.") }}
+                               </p>
+                       </div>
+               </div>
+       </div>
 {% end %}

diff --git a/src/templates/register-success.html b/src/templates/register-success.html
index d5d2623012b957f76a9d5d12285b190ddcd6030e..232470e2faba0b90d140891bde02e1b5afc5625c 100644 (file)
--- a/src/templates/register-success.html
+++ b/src/templates/register-success.html
@@ -1,9 +1,15 @@
 {% extends "base.html" %}
 
 {% block body %}
-       <h1>{{ _("Registration successful") }}</h1>
-       <p>
-               {{ _("Your new account has been created, %s.") % user.realname }}
-               {{ _("To complete the activation, follow the instructions that were sent to you in an activation email.") }}
-       </p>
+       <div class="row justify-content-center">
+                       <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                               <div class="alert alert-success">
+                                               <h2 style="word-wrap: break-word;" class="alert-heading">{{ _("Registration successful") }}</h2>
+                                               <p>
+                                                       {{ _("Your new account has been created, %s.") % user.realname }}
+                                                       {{ _("To complete the activation, follow the instructions that were sent to you in an activation email.") }}
+                                               </p>
+                               </div>
+                       </div>
+               </div>
 {% end %}

diff --git a/src/templates/register.html b/src/templates/register.html
index 6d5a822f5ea407463a9fa45dd45ef55f3ff7a4e6..ca35050e06a37b59e8f9e8f86f495198bddbdd07 100644 (file)
--- a/src/templates/register.html
+++ b/src/templates/register.html
@@ -3,92 +3,83 @@
 {% block title %}{{ _("Register a new account") }}{% end block %}
 
 {% block body %}
-       <ul class="breadcrumb">
-               <li>
-                       <a href="/">{{ _("Home") }}</a>
-                       <span class="divider">/</span>
-               </li>
-               <li class="active">
-                       <a href="/register">{{ _("Register new account") }}</a>
-               </li>
-       </ul>
-
-       <div class="page-header">
-               <h2>
-                       {{ _("Register a new account") }}
-                       <small>{{ _("Join the community!") }}</small>
-               </h2>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <nav aria-label="breadcrumb" role="navigation">
+                               <ol class="breadcrumb">
+                                       <li class="breadcrumb-item"><a href="/">{{ _("Home") }}</a></li>
+                                       <li class="breadcrumb-item active"><a href="/register">{{ _("Register new account") }}</a></li>
+                               </ol>
+                       </nav>
+               </div>
        </div>
 
-       <form class="form-horizontal" method="POST" action="">
-               {% raw xsrf_form_html() %}
-
-               <legend>{{ _("Registration form") }}</legend>
-
-               <fieldset>
-                       <div class="control-group">
-                               <label class="control-label" for="name">{{ _("Username") }}</label>
-                               <div class="controls">
-                                       <input type="text" class="input-xlarge" id="name" name="name" placeholder="{{ _("Username") }}">
-
-                                       <p class="help-block">
-                                               {{ _("Must be a unique name you login with.") }}
-                                       </p>
-                               </div>
-                       </div>
-
-                       <div class="control-group">
-                               <label class="control-label" for="email">{{ _("Email address") }}</label>
-                               <div class="controls">
-                                       <input type="text" class="input-xlarge" id="email" name="email" placeholder="{{ _("Email address") }}">
-
-                                       <p class="help-block">
-                                               {{ _("Type in your email address, which is used to verify the account.") }}
-                                       </p>
-                               </div>
-                       </div>
-
-                       <div class="control-group">
-                               <label class="control-label" for="realname">{{ _("Real name (optional)") }}</label>
-                               <div class="controls">
-                                       <input type="text" class="input-xlarge" id="realname" name="realname" placeholder="{{ _("Real name") }}">
-
-                                       <p class="help-block">
-                                               {{ _("Type you firstname and your lastname here.") }}
-                                       </p>
-                               </div>
-                       </div>
-               </fieldset>
-
-               <fieldset>
-                       <legend>{{ _("Account security") }}</legend>
-
-                       <div class="control-group">
-                               <label class="control-label" for="pass1">{{ _("Password") }}</label>
-                               <div class="controls">
-                                       <input type="password" class="input-xlarge" id="pass1" name="pass1" placeholder="{{ _("Password") }}">
-
-                                       <p class="help-block">
-                                               {{ _("The password is used to secure the login and must be at least 8 characters.") }}
-                                       </p>
-                               </div>
-                       </div>
-
-                       <div class="control-group">
-                               <label class="control-label" for="pass2">{{ _("Confirm password") }}</label>
-                               <div class="controls">
-                                       <input type="password" class="input-xlarge" id="pass2" name="pass2" placeholder="{{ _("Confirm password") }}">
-
-                                       <p class="help-block">
-                                               {{ _("Pick a password that is as strong as possible.") }}
-                                               {{ _("Don't login at unsecure places where people could spy on your password.") }}
-                                       </p>
-                               </div>
-                       </div>
-               </fieldset>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+                       <h2>
+                               {{ _("Register a new account") }}
+                               <small>{{ _("Join the community!") }}</small>
+                       </h2>
+               </div>
+       </div>
 
-               <div class="form-actions">
-                       <button type="submit" class="btn btn-primary">{{ _("Sign up!") }}</button>
+       <div class="row justify-content-center">
+               <div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
+
+                       <form method="POST" action="">
+                               {% raw xsrf_form_html() %}
+                               <fieldset>
+                                       <legend>{{ _("Registration form") }}</legend>
+
+                                       <div class="form-group">
+                                               <label for="name">{{ _("Username") }}</label>
+                                               <input type="text" class="form-control" id="name" name="name" aria-describedby="nameHelp" placeholder="{{ _("Username") }}">
+                                               <small id="nameHelp" class="form-text text-muted">
+                                                       {{ _("Must be a unique name you login with.") }}
+                                               </small>
+                                       </div>
+
+                                       <div class="form-group">
+                                               <label for="email">{{ _("Email address") }}</label>
+                                               <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="{{ _("Email address") }}">
+                                               <small id="emailHelp" class="form-text text-muted">
+                                                       {{ _("Type in your email address, which is used to verify the account.") }}
+                                               </small>
+                                       </div>
+
+                                       <div class="form-group">
+                                               <label for="realname">{{ _("Real name (optional)") }}</label>
+                                               <input type="text" class="form-control" id="realname" name="realname" aria-describedby="realnameHelp" placeholder="{{ _("Real name") }}">
+                                               <small id="realnameHelp" class="form-text text-muted">
+                                                       {{ _("Type you firstname and your lastname here.") }}
+                                               </small>
+                                       </div>
+                               </fieldset>
+                               <fieldset>
+                                       <legend>{{ _("Account security") }}</legend>
+
+                                       <div class="form-group">
+                                               <label for="pass1">{{ _("Password") }}</label>
+                                               <input type="password" class="form-control"
+                                                       id="pass1" name="pass1" aria-describedby="pass1Help" placeholder="{{ _("Password") }}">
+                                               <small id="pass1Help" class="form-text text-muted">
+                                                       {{ _("The password is used to secure the login and must be at least 8 characters.") }}
+                                               </small>
+                                       </div>
+
+                                       <div class="form-group">
+                                               <label for="pass2">{{ _("Password") }}</label>
+                                               <input type="password" class="form-control"
+                                                       id="pass2" name="pass2" aria-describedby="pass2Help" placeholder="{{ _("Confirm password") }}">
+                                               <small id="pass1Help" class="form-text text-muted">
+                                                       {{ _("Pick a password that is as strong as possible.") }}
+                                                       {{ _("Don't login at unsecure places where people could spy on your password.") }}
+                                               </small>
+                                       </div>
+                               </fieldset>
+
+                               <button type="submit" class="btn btn-primary">{{ _("Sign up!") }}</button>
+                       </form>
                </div>
-       </form>
+       </div>
 {% end block %}