From: Jonatan Schlag <jonatan.schlag@ipfire.org>
Date: Fri, 12 Jan 2018 18:03:50 +0000 (+0100)
Subject: bootstrap4: port registration sites to bootstrap4
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=76e724ba42437bc9ce85e41cccd10052b8763501;p=people%2Fjschlag%2Fpbs.git

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 25f8a24..d1af8ac 100644
--- 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 474cfad..8db4bce 100644
--- 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 af204af..e0a331c 100644
--- 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 d5d2623..232470e 100644
--- 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 6d5a822..ca35050 100644
--- 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 %}