people: Update design of profile edit page

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

diff --git a/src/templates/people/user-edit.html b/src/templates/people/user-edit.html
index 1e05d0ae03f7eececafbf1a2afa685d89156bfb1..70f32713b1afbed36ffec5adbd1146ee47b7ec8b 100644 (file)
--- a/src/templates/people/user-edit.html
+++ b/src/templates/people/user-edit.html
@@ -2,138 +2,150 @@
 
 {% block title %}{{ account }} - {{ _("Edit") }}{% end block %}
 
-{% block content %}
-       <h4 class="mb-4">{{ _("Edit") }}</h4>
+{% block container %}
+       <div class="header">
+               <div class="container">
+                       <h1>{{ _("Edit Profile") }}</h1>
+
+                       <p class="text-muted">
+                               {{ account }}
+                       </p>
+               </div>
+       </div>
 
-       <form method="POST" action="" enctype="multipart/form-data">
-               {% raw xsrf_form_html() %}
+       <div class="container">
+               <section>
+                       <form method="POST" action="" enctype="multipart/form-data">
+                               {% raw xsrf_form_html() %}
 
-               <div class="form-row mb-3">
-                       <div class="col">
-                               <label>{{ _("First Name") }}</label>
+                               <div class="form-row mb-3">
+                                       <div class="col">
+                                               <label>{{ _("First Name") }}</label>
 
-                               <input type="text" class="form-control" name="first_name"
-                                       placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
-                       </div>
+                                               <input type="text" class="form-control" name="first_name"
+                                                       placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
+                                       </div>
 
-                       <div class="col">
-                               <label>{{ _("Last Name") }}</label>
+                                       <div class="col">
+                                               <label>{{ _("Last Name") }}</label>
 
-                               <input type="text" class="form-control" name="last_name"
-                                       placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
-                       </div>
-               </div>
+                                               <input type="text" class="form-control" name="last_name"
+                                                       placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+                                       </div>
+                               </div>
 
-               <div class="form-group">
-                       <label>{{ _("Nickname") }} ({{ _("optional") }})</label>
+                               <div class="form-group">
+                                       <label>{{ _("Nickname") }} ({{ _("optional") }})</label>
 
-                       <input type="text" class="form-control" name="nickname"
-                               placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
-               </div>
+                                       <input type="text" class="form-control" name="nickname"
+                                               placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+                               </div>
 
-               <div class="form-group">
-                       <label>{{ _("Address") }}</label>
+                               <div class="form-group">
+                                       <label>{{ _("Address") }}</label>
 
-                       <textarea type="text" class="form-control" name="street" rows="3"
-                               placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
-               </div>
+                                       <textarea type="text" class="form-control" name="street" rows="3"
+                                               placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
+                               </div>
 
-               <div class="form-row mb-3">
-                       <div class="col">
-                               <label>{{ _("City") }}</label>
+                               <div class="form-row mb-3">
+                                       <div class="col">
+                                               <label>{{ _("City") }}</label>
 
-                               <input type="text" class="form-control" name="city"
-                                       placeholder="{{ _("City") }}" value="{{ account.city }}">
-                       </div>
+                                               <input type="text" class="form-control" name="city"
+                                                       placeholder="{{ _("City") }}" value="{{ account.city }}">
+                                       </div>
 
-                       <div class="col">
-                               <label>{{ _("Postal Code") }}</label>
+                                       <div class="col">
+                                               <label>{{ _("Postal Code") }}</label>
 
-                               <input type="text" class="form-control" name="postal_code"
-                                       placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
-                       </div>
-               </div>
+                                               <input type="text" class="form-control" name="postal_code"
+                                                       placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+                                       </div>
+                               </div>
 
-               <div class="form-group">
-                       <label>{{ _("Country") }}</label>
+                               <div class="form-group">
+                                       <label>{{ _("Country") }}</label>
 
-                       <select class="form-control" name="country_code">
-                               <option value="">{{ _("- Please Select -") }}</option>
+                                       <select class="form-control" name="country_code">
+                                               <option value="">{{ _("- Please Select -") }}</option>
 
-                               {% for c in countries %}
-                                       <option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-                               {% end %}
-                       </select>
-               </div>
+                                               {% for c in countries %}
+                                                       <option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+                                               {% end %}
+                                       </select>
+                               </div>
 
-               <fieldset>
-                       <legend>{{ _("Tell Us Who You Are") }}</legend>
+                               <fieldset>
+                                       <legend>{{ _("Tell Us Who You Are") }}</legend>
 
-                       <div class="form-group">
-                               <textarea type="text" class="form-control" name="description" rows="5"
-                                       placeholder="{{ _("Tell Us Who You Are") }}">{{ account.description or "" }}</textarea>
+                                       <div class="form-group" id="description">
+                                               <textarea type="text" class="form-control" name="description" rows="5"
+                                                       placeholder="{{ _("Tell Us Who You Are") }}">{{ account.description or "" }}</textarea>
 
-                               <small class="form-text text-muted">
-                                       {{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
-                               </small>
-                       </div>
+                                               <small class="form-text text-muted">
+                                                       {{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
+                                               </small>
+                                       </div>
 
-                       <div class="form-group">
-                               <label>{{ _("Avatar") }}</label>
+                                       <div class="form-group" id="avatar">
+                                               <label>{{ _("Avatar") }}</label>
 
-                               <input type="file" class="form-control-file" name="avatar">
+                                               <input type="file" class="form-control-file" name="avatar">
 
-                               <small class="form-text text-muted">
-                                       {{ _("Upload a new avatar") }}
-                               </small>
-                       </div>
-               </fieldset>
+                                               <small class="form-text text-muted">
+                                                       {{ _("Upload a new avatar") }}
+                                               </small>
+                                       </div>
+                               </fieldset>
 
-               {% if account.has_mail() %}
-                       <fieldset>
-                               <legend>{{ _("Email") }}</legend>
+                               {% if account.has_mail() %}
+                                       <fieldset>
+                                               <legend>{{ _("Email") }}</legend>
 
-                               <div class="form-group">
-                                       <label>{{ _("Forward Emails") }}</label>
+                                               <div class="form-group">
+                                                       <label>{{ _("Forward Emails") }}</label>
 
-                                       <input type="mail" class="form-control" name="mail_routing_address"
-                                               placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
+                                                       <input type="mail" class="form-control" name="mail_routing_address"
+                                                               placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
 
-                                       <small class="form-text text-muted">
-                                               {{ _("All emails will be forwarded to this email address") }}
-                                       </small>
-                               </div>
-                       </fieldset>
-               {% end %}
+                                                       <small class="form-text text-muted">
+                                                               {{ _("All emails will be forwarded to this email address") }}
+                                                       </small>
+                                               </div>
+                                       </fieldset>
+                               {% end %}
 
-               <fieldset>
-                       <legend>{{ _("Telephone") }}</legend>
+                               <fieldset>
+                                       <legend>{{ _("Telephone") }}</legend>
 
-                       <div class="form-group">
-                               <label>{{ _("Phone Numbers") }}</label>
+                                       <div class="form-group">
+                                               <label>{{ _("Phone Numbers") }}</label>
 
-                               <textarea type="text" class="form-control" name="phone_numbers" rows="3"
-                                       placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
+                                               <textarea type="text" class="form-control" name="phone_numbers" rows="3"
+                                                       placeholder="{{ _("Phone Numbers") }}">{{ "\n".join((format_phone_number_to_e164(n) for n in account.phone_numbers)) }}</textarea>
 
-                               <small class="form-text text-muted">
-                                       {{ _("Enter your landline and mobile phone numbers") }}
-                               </small>
-                       </div>
+                                               <small class="form-text text-muted">
+                                                       {{ _("Enter your landline and mobile phone numbers") }}
+                                               </small>
+                                       </div>
 
-                       {% if account.has_sip() %}
-                               <div class="form-group">
-                                       <label>{{ _("Forward Calls") }}</label>
+                                       {% if account.has_sip() %}
+                                               <div class="form-group">
+                                                       <label>{{ _("Forward Calls") }}</label>
 
-                                       <input type="text" class="form-control" name="sip_routing_address"
-                                               placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
+                                                       <input type="text" class="form-control" name="sip_routing_address"
+                                                               placeholder="{{ _("SIP URI or Phone Number") }}" value="{{ account.sip_routing_address or "" }}">
 
-                                       <small class="form-text text-muted">
-                                               {{ _("All calls will be forwarded to this phone number or SIP URI") }}
-                                       </small>
-                               </div>
-                       {% end %}
-               </fieldset>
+                                                       <small class="form-text text-muted">
+                                                               {{ _("All calls will be forwarded to this phone number or SIP URI") }}
+                                                       </small>
+                                               </div>
+                                       {% end %}
+                               </fieldset>
 
-               <input class="btn btn-primary btn-block" type="submit" value="{{ _("Save") }}">
-       </form>
+                               <input class="btn btn-primary btn-block" type="submit" value="{{ _("Save") }}">
+                       </form>
+               </section>
+       </div>
 {% end block %}