From f8026d2e8684e6b1eef4bc48bfe2fd5ed438a2db Mon Sep 17 00:00:00 2001
From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Tue, 1 Aug 2023 12:02:19 +0000
Subject: [PATCH] users/edit.html: updated to new design

---
 src/templates/users/edit.html | 256 +++++++++++++++++++++-------------
 1 file changed, 157 insertions(+), 99 deletions(-)

diff --git a/src/templates/users/edit.html b/src/templates/users/edit.html
index 5c4d4e78..0235b636 100644
--- a/src/templates/users/edit.html
+++ b/src/templates/users/edit.html
@@ -3,149 +3,207 @@
 {% block title %}{{ account }} - {{ _("Edit") }}{% end block %}
 
 {% block container %}
-	<div class="header">
-		<div class="container">
-			<h1>{{ _("Edit Profile") }}</h1>
-
-			<p class="text-muted">
-				{{ account }}
-			</p>
+	<section class="hero is-dark">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="/">
+								{{ _("Home") }}
+							</a>
+						</li>
+						<li>
+							<a href="/users">
+								{{ _("Users") }}
+							</a>
+						</li>
+						<li>
+							<a href="/users/{{ account.uid }}">
+								{{ account }}
+							</a>
+						</li>
+						<li class="is-active">
+							<a href="#" aria-current="page">
+								Edit
+							</a>
+						</li>
+					</ul>
+				</nav>
+
+				<h1 class="title is-1">{{ _("Edit Profile") }}</h1>
+				<h6 class="subtitle is-6">{{ account }} | {{ account.uid }}</h6>
+			</div>
 		</div>
-	</div>
+	</section>
 
 	<div class="container">
-		<section>
+		<section class="section">
 			<form method="POST" action="" enctype="multipart/form-data">
 				{% raw xsrf_form_html() %}
 
-				<div class="row mb-3">
-					<div class="col-12 col-sm-6">
-						<label class="form-label">{{ _("First Name") }}</label>
+				<div class="block">
+					<div class="columns is-5">
+						<div class="column is-4">
+							<label class="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="input" name="first_name"
+								placeholder="{{ _("First Name") }}" value="{{ account.first_name }}" required>
+						</div>
 
-					<div class="col-12 col-sm-6">
-						<label class="form-label">{{ _("Last Name") }}</label>
+						<div class="column is-4">
+							<label class="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="input" name="last_name"
+								placeholder="{{ _("Last Name") }}" value="{{ account.last_name }}" required>
+						</div>
 
-				<div class="mb-3">
-					<label class="form-label">{{ _("Nickname") }} ({{ _("optional") }})</label>
+						<div class="column is-4">
+							<label class="label">{{ _("Nickname") }} ({{ _("optional") }})</label>
 
-					<input type="text" class="form-control" name="nickname"
-						placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+							<input type="text" class="input" name="nickname"
+								placeholder="{{ _("Nickname") }}" value="{{ account.nickname or "" }}">
+						</div>
+					</div>
 				</div>
 
-				<div class="mb-3">
-					<label class="form-label">{{ _("Address") }}</label>
+				<div class="block">
+					<div class="columns">
+						<div class="column is-4">
+							<label class="label">{{ _("Address") }}</label>
 
-					<textarea type="text" class="form-control" name="street" rows="3"
-						placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
-				</div>
+							<textarea type="text" class="textarea" name="street" rows="3"
+								placeholder="{{ _("Address") }}">{{ account.street or "" }}</textarea>
+						</div>
+					</div>
 
-				<div class="row mb-3">
-					<div class="col-12 col-sm-6">
-						<label class="form-label">{{ _("City") }}</label>
+					<div class="columns">
+						<div class="column is-4">
+							<label class="label">{{ _("City") }}</label>
 
-						<input type="text" class="form-control" name="city"
-							placeholder="{{ _("City") }}" value="{{ account.city }}">
-					</div>
+							<input type="text" class="input" name="city"
+								placeholder="{{ _("City") }}" value="{{ account.city }}">
+						</div>
 
-					<div class="col-12 col-sm-6">
-						<label class="form-label">{{ _("Postal Code") }}</label>
+						<div class="column is-4">
+							<label class="label">{{ _("Postal Code") }}</label>
 
-						<input type="text" class="form-control" name="postal_code"
-							placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+							<input type="text" class="input" name="postal_code"
+								placeholder="{{ _("Postal Code") }}" value="{{ account.postal_code }}">
+						</div>
 					</div>
 				</div>
 
-				<div class="mb-3">
-					<label class="form-label">{{ _("Country") }}</label>
+				<div class="block">
+					<div class="columns">
+						<div class="column is-4">
+							<label class="label">{{ _("Country") }}</label>
 
-					<select class="form-control" name="country_code">
-						<option value="">{{ _("- Please Select -") }}</option>
+							<div class="select">
+								<select name="country_code">
+								  	<option>{{ _("- Please Select -") }}</option>
 
-						{% for c in countries %}
-							<option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
-						{% end %}
-					</select>
+									{% for c in countries %}
+										<option value="{{ c.alpha2 }}" {% if account.country_code == c.alpha2 %}selected{% end %}>{{ c.name }}</option>
+									{% end %}
+								</select>
+							  </div>
+						</div>
+					</div>
 				</div>
 
-				<fieldset>
-					<legend>{{ _("Tell Us Who You Are") }}</legend>
+				<div class="block">
+					<h4 class="title is-4">{{ _("Tell Us Who You Are") }}</h4>
 
-					<div class="mb-3" id="description">
-						<textarea type="text" class="form-control" name="description" rows="5"
+					<div class="columns" id="description">
+						<div class="column is-4">
+							<textarea type="text" class="textarea" 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>
+							<p class="help">
+								{{ _("You can use Markdown syntax as you know it from the IPFire Wiki") }}
+							</p>
+						</div>
 					</div>
 
-					<div class="mb-3" id="avatar">
-						<label class="form-label">{{ _("Avatar") }}</label>
-
-						<input type="file" class="form-control-file" name="avatar">
-
-						<small class="form-text text-muted">
-							{{ _("Upload a new avatar") }}
-						</small>
+				<div class="block">
+					<div class="columns" id="avatar">
+						<div class="column is-4">
+							<div class="file">
+								<label class="file-label">
+								  	<input class="file-input" type="file" name="avatar">
+								  	<span class="file-cta">
+										<span class="file-icon">
+											<i class="fas fa-upload"></i>
+										</span>
+										<span class="file-label">
+											{{ _("Upload a new avatar") }}
+										</span>
+								  	</span>
+								</label>
+							  </div>
+						</div>
 					</div>
-				</fieldset>
+				</div>
 
 				{% if account.has_mail() %}
-					<fieldset>
-						<legend>{{ _("Email") }}</legend>
-
-						<div class="mb-3">
-							<label class="form-label">{{ _("Forward Emails") }}</label>
-
-							<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 class="block">
+						<div class="columns">
+							<div class="column is-4">
+								<label class="label">{{ _("Email") }}</label>
+
+								<div class="field-body">
+									<div class="field">
+										<p class="control">
+											<input type="mail" class="input" name="mail_routing_address"
+											placeholder="{{ _("Email Address") }}" value="{{ account.mail_routing_address or "" }}">
+										</p>
+									</div>
+								</div>
+
+								<p class="help">
+									{{ _("All emails will be forwarded to this email address") }}
+								</p>
+							</div>
 						</div>
-					</fieldset>
+					</div>
 				{% end %}
 
-				<fieldset>
-					<legend>{{ _("Telephone") }}</legend>
+				<div class="block">
+					<div class="columns">
+						<div class="column is-4">
+							<label class="label">{{ _("Telephone") }}</label>
 
-					<div class="mb-3">
-						<label class="form-label">{{ _("Phone Numbers") }}</label>
+							<textarea type="text" class="textarea" 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>
+							<p class="help">
+								{{ _("Enter your landline and mobile phone numbers") }}
+							</p>
+						</div>
 
-					{% if account.has_sip() %}
-						<div class="mb-3">
-							<label class="form-label">{{ _("Forward Calls") }}</label>
+						{% if account.has_sip() %}
+							<div class="column is-4">
+								<label class="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="input" 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>
+								<p class="help">
+									{{ _("All calls will be forwarded to this phone number or SIP URI") }}
+								</p>
+							</div>
+						{% end %}
+					</div>
+
+				<div class="block">
+					<div class="columns">
+						<div class="column is-4">
+							<input class="button is-primary is-fullwidth is-outlined is-medium has-text-weight-bold" type="submit" value="{{ _("SAVE") }}">
 						</div>
-					{% end %}
-				</fieldset>
+					</div>
 
-				<div class="d-grid">
-					<input class="btn btn-primary" type="submit" value="{{ _("Save") }}">
 				</div>
 			</form>
 		</section>
-- 
2.47.3