148 lines
6.4 KiB
Text
148 lines
6.4 KiB
Text
{% extends "shell" %}
|
|
|
|
{% block content %}
|
|
<!-- Page header -->
|
|
<div class="page-header d-print-none">
|
|
<div class="container-xl">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col">
|
|
<h2 class="page-title">
|
|
Settings
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Page body -->
|
|
<div class="page-body">
|
|
<div class="container-xl">
|
|
|
|
{% if flash %}
|
|
<div class="alert alert-{{flash.0}}" role="alert">
|
|
<h4 class="alert-title">{{ flash.1 | safe }}</h4>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card">
|
|
<div class="row g-0">
|
|
<div class="col-3 d-none d-md-block border-end">
|
|
<div class="card-body">
|
|
<div class="list-group list-group-transparent">
|
|
<a href="./personal"
|
|
class="list-group-item list-group-item-action d-flex align-items-center active">Personal</a>
|
|
<a href="./security"
|
|
class="list-group-item list-group-item-action d-flex align-items-center">Security</a>
|
|
<a href="./visual"
|
|
class="list-group-item list-group-item-action d-flex align-items-center">Visual</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column">
|
|
<form action="" method="post">
|
|
<div class="card-header">
|
|
<h3 class="card-title">My Profile</h3>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<!-- Username -->
|
|
<label class="form-label required" for="username">Username</label>
|
|
<div class="input-icon mb-3">
|
|
<span class="input-icon-addon">
|
|
{% include "icons/id-badge-2" %}
|
|
</span>
|
|
<input name="username" id="username" value="{{ username }}" type="text"
|
|
placeholder="Enter a username"
|
|
class="form-control"
|
|
required>
|
|
</div>
|
|
|
|
<!-- Name -->
|
|
<label class="form-label" for="name">Full Name</label>
|
|
<div class="input-icon mb-3">
|
|
<span class="input-icon-addon">
|
|
{% include "icons/user" %}
|
|
</span>
|
|
<input name="name" id="name" value="{{ name }}" type="text"
|
|
placeholder="Napoleon Bonaparte"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<label class="form-label" for="email">Email address</label>
|
|
<div class="input-icon mb-3">
|
|
<span class="input-icon-addon">
|
|
{% include "icons/at" %}
|
|
</span>
|
|
<input name="email" id="email" value="{{ email }}" type="email"
|
|
placeholder="napoleon@bonaparte.fr"
|
|
class="form-control">
|
|
</div>
|
|
|
|
<!-- Timezone -->
|
|
<label class="form-label" for="select-timezone">Timezone</label>
|
|
<div class="mb-3">
|
|
<select type="text" class="form-select" placeholder="Search your nearest city..."
|
|
id="select-timezone" name="timezone" autocomplete="off">
|
|
|
|
<option value="UTC">UTC (Default)</option>
|
|
|
|
{% for tz in list_timezones %}
|
|
{% if timezone == tz %}
|
|
<option value="{{ tz }}" selected>{{ tz }}</option>
|
|
{% else %}
|
|
<option value="{{ tz }}">{{ tz }}</option>
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
|
|
</select>
|
|
</div>
|
|
|
|
<p class="mt-4 text-muted">Profile last updated on {{ updated_at | date(format="%A %-d %B %Y, %T", timezone=user.zoneinfo | default(value="UTC")) }}</p>
|
|
</div>
|
|
|
|
<div class="card-footer text-end">
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
|
|
{% block libs_js %}
|
|
<script src="/libs/tom-select/tom-select.popular.min.js" defer></script>
|
|
{% endblock lib_js %}
|
|
|
|
{% block additional_js %}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var el;
|
|
window.TomSelect && (new TomSelect(el = document.getElementById('select-timezone'), {
|
|
maxOptions: null,
|
|
plugins: ['dropdown_input'],
|
|
copyClassesToDropdown: false,
|
|
dropdownClass: 'dropdown-menu ts-dropdown',
|
|
optionClass: 'dropdown-item',
|
|
controlInput: '<input>',
|
|
render: {
|
|
item: function (data, escape) {
|
|
if (data.customProperties) {
|
|
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
|
|
}
|
|
return '<div>' + escape(data.text) + '</div>';
|
|
},
|
|
option: function (data, escape) {
|
|
if (data.customProperties) {
|
|
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
|
|
}
|
|
return '<div>' + escape(data.text) + '</div>';
|
|
},
|
|
},
|
|
}));
|
|
});
|
|
</script>
|
|
{% endblock additional_js %}
|