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