Added navigation to settings.
This commit is contained in:
parent
e4ad15b660
commit
1412fd6568
3 changed files with 274 additions and 207 deletions
42
assets/less/classes/settings/wrapper.less
Normal file
42
assets/less/classes/settings/wrapper.less
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.settings__wrapper {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
width: 280px;
|
||||
position: sticky;
|
||||
top: 2px;
|
||||
margin: 0 2px 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-colour-translucent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,6 +124,7 @@ body {
|
|||
@import "classes/changelog-actions-tags";
|
||||
|
||||
// Settings
|
||||
@import "classes/settings/wrapper";
|
||||
@import "classes/settings/container";
|
||||
@import "classes/settings/description";
|
||||
@import "classes/settings/disabled";
|
||||
|
|
|
|||
|
|
@ -4,6 +4,13 @@
|
|||
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
|
||||
|
||||
{% set title = 'Settings' %}
|
||||
{% set menu = {
|
||||
'account': '<i class="fas fa-user fa-fw"></i> Account',
|
||||
'roles': '<i class="fas fa-user-check"></i> Roles',
|
||||
'sessions': '<i class="fas fa-key fa-fw"></i> Sessions',
|
||||
'login-attempts': '<i class="fas fa-user-lock fa-fw"></i> Login Attempts',
|
||||
'account-log': '<i class="fas fa-file-alt fa-fw"></i> Account Log',
|
||||
} %}
|
||||
|
||||
{% block content %}
|
||||
{% if errors|length > 0 %}
|
||||
|
|
@ -16,235 +23,252 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form action="" method="post" class="container settings__container" id="account">
|
||||
{{ container_title('<i class="fas fa-user fa-fw"></i> Account', '', true) }}
|
||||
{{ input_csrf('settings') }}
|
||||
<div class="settings__wrapper">
|
||||
<div class="settings__wrapper__sidebar">
|
||||
<div class="container settings__container settings__wrapper__menu">
|
||||
{{ container_title('Settings') }}
|
||||
|
||||
<div class="settings__description">
|
||||
<p>Here you can change your e-mail address and/or your password, please make sure your e-mail is accurate and your password is strong in order to protect your account. For convenience your current e-mail address is displayed. You are required to verify yourself by entering your current password to change either value.</p>
|
||||
</div>
|
||||
|
||||
{% if disable_account_options %}
|
||||
<div class="settings__disabled">
|
||||
<div class="settings__disabled__notice">
|
||||
E-mail and password changing is only available on the main site for stability reasons.
|
||||
</div>
|
||||
<div class="settings__disabled__options">
|
||||
<a class="input__button" href="https://flashii.net/settings.php">
|
||||
<i class="fas fa-external-link-square-alt fa-fw"></i> Change E-mail or Password on Flashii
|
||||
{% for id, text in menu %}
|
||||
<a href="#{{ id }}" class="settings__wrapper__link">
|
||||
{{ text|raw }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="settings__account">
|
||||
<div class="settings__account__section">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
New e-mail address
|
||||
</div>
|
||||
{{ input_text('email[new]', 'settings__account__input', '', 'email', current_email) }}
|
||||
</label>
|
||||
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Confirm new e-mail address
|
||||
</div>
|
||||
{{ input_text('email[confirm]', 'settings__account__input', '', 'email') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings__account__section">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
New password
|
||||
</div>
|
||||
{{ input_text('password[new]', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Confirm new password
|
||||
</div>
|
||||
{{ input_text('password[confirm]', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings__account__section settings__account__section--confirm">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Current password
|
||||
</div>
|
||||
{{ input_text('current_password', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
|
||||
<div class="settings__account__buttons">
|
||||
<button class="input__button settings__account__button">Update</button>
|
||||
<button class="input__button settings__account__button" type="reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<div class="container settings__container" id="roles">
|
||||
{{ container_title('<i class="fas fa-user-check"></i> Roles', '', true) }}
|
||||
|
||||
<div class="settings__description">
|
||||
<p>This is a listing of the user roles you're a part of, you can select which you want to leave or which one you want to boast as your main role which will change your username colour accordingly.</p>
|
||||
</div>
|
||||
|
||||
<div class="settings__role__collection">
|
||||
{% for role in user_roles %}
|
||||
{% set is_display_role = user_display_role == role.role_id %}
|
||||
|
||||
<div class="settings__role" style="{{ role.role_colour|html_colour('--accent-colour') }}">
|
||||
<div class="settings__role__content">
|
||||
<div class="settings__role__name">
|
||||
{{ role.role_name }}
|
||||
</div>
|
||||
|
||||
<div class="settings__role__description">
|
||||
{{ role.role_description }}
|
||||
</div>
|
||||
|
||||
<form class="settings__role__options" method="post" action="/settings.php">
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('role[id]', role.role_id) }}
|
||||
|
||||
<button class="settings__role__option{% if is_display_role %} settings__role__option--disabled{% endif %}"
|
||||
name="role[mode]" value="display" title="Set this as your display role"
|
||||
{% if is_display_role %}disabled{% endif %}>
|
||||
<i class="far {{ is_display_role ? 'fa-check-square' : 'fa-square' }}"></i>
|
||||
</button>
|
||||
|
||||
<button class="settings__role__option{% if not role.role_can_leave %} settings__role__option--disabled{% endif %}"
|
||||
name="role[mode]" value="leave" title="Leave this role"
|
||||
onclick="return confirm('Are you sure you want to remove {{ role.role_name|replace({"'": "\'"}) }} from your account?')"
|
||||
{% if not role.role_can_leave %}disabled{% endif %}>
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container settings__container" id="sessions">
|
||||
{{ container_title('<i class="fas fa-key fa-fw"></i> Sessions', '', true) }}
|
||||
{% set spagination = pagination(
|
||||
sessions.amount,
|
||||
sessions.take,
|
||||
sessions.offset,
|
||||
''|url_construct({
|
||||
'logins[offset]': logins.offset,
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[offset]': logs.offset,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'sessions[offset]'
|
||||
) %}
|
||||
|
||||
<div class="settings__description">
|
||||
<p>These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a different colour so you don't accidentally force yourself to logout.</p>
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions">
|
||||
<form action="" method="post" class="settings__sessions__all">
|
||||
<div class="settings__wrapper__content">
|
||||
<form action="" method="post" class="container settings__container" id="account">
|
||||
{{ container_title('<i class="fas fa-user fa-fw"></i> Account', '', true) }}
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('session', 'all') }}
|
||||
|
||||
<button class="input__button">
|
||||
<i class="fas fa-bomb"></i> Kill ALL active sessions
|
||||
</button>
|
||||
<div class="settings__description">
|
||||
<p>Here you can change your e-mail address and/or your password, please make sure your e-mail is accurate and your password is strong in order to protect your account. For convenience your current e-mail address is displayed. You are required to verify yourself by entering your current password to change either value.</p>
|
||||
</div>
|
||||
|
||||
{% if disable_account_options %}
|
||||
<div class="settings__disabled">
|
||||
<div class="settings__disabled__notice">
|
||||
E-mail and password changing is only available on the main site for stability reasons.
|
||||
</div>
|
||||
<div class="settings__disabled__options">
|
||||
<a class="input__button" href="https://flashii.net/settings.php">
|
||||
<i class="fas fa-external-link-square-alt fa-fw"></i> Change E-mail or Password on Flashii
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="settings__account">
|
||||
<div class="settings__account__section">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
New e-mail address
|
||||
</div>
|
||||
{{ input_text('email[new]', 'settings__account__input', '', 'email', current_email) }}
|
||||
</label>
|
||||
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Confirm new e-mail address
|
||||
</div>
|
||||
{{ input_text('email[confirm]', 'settings__account__input', '', 'email') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings__account__section">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
New password
|
||||
</div>
|
||||
{{ input_text('password[new]', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Confirm new password
|
||||
</div>
|
||||
{{ input_text('password[confirm]', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings__account__section settings__account__section--confirm">
|
||||
<label class="settings__account__input">
|
||||
<div class="settings__account__title">
|
||||
Current password
|
||||
</div>
|
||||
{{ input_text('current_password', 'settings__account__input', '', 'password') }}
|
||||
</label>
|
||||
|
||||
<div class="settings__account__buttons">
|
||||
<button class="input__button settings__account__button">Update</button>
|
||||
<button class="input__button settings__account__button" type="reset">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
<div class="settings__sessions__pagination">
|
||||
{{ spagination }}
|
||||
<div class="container settings__container" id="roles">
|
||||
{{ container_title('<i class="fas fa-user-check"></i> Roles', '', true) }}
|
||||
|
||||
<div class="settings__description">
|
||||
<p>This is a listing of the user roles you're a part of, you can select which you want to leave or which one you want to boast as your main role which will change your username colour accordingly.</p>
|
||||
</div>
|
||||
|
||||
<div class="settings__role__collection">
|
||||
{% for role in user_roles %}
|
||||
{% set is_display_role = user_display_role == role.role_id %}
|
||||
|
||||
<div class="settings__role" style="{{ role.role_colour|html_colour('--accent-colour') }}">
|
||||
<div class="settings__role__content">
|
||||
<div class="settings__role__name">
|
||||
{{ role.role_name }}
|
||||
</div>
|
||||
|
||||
<div class="settings__role__description">
|
||||
{{ role.role_description }}
|
||||
</div>
|
||||
|
||||
<form class="settings__role__options" method="post" action="/settings.php">
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('role[id]', role.role_id) }}
|
||||
|
||||
<button class="settings__role__option{% if is_display_role %} settings__role__option--disabled{% endif %}"
|
||||
name="role[mode]" value="display" title="Set this as your display role"
|
||||
{% if is_display_role %}disabled{% endif %}>
|
||||
<i class="far {{ is_display_role ? 'fa-check-square' : 'fa-square' }}"></i>
|
||||
</button>
|
||||
|
||||
<button class="settings__role__option{% if not role.role_can_leave %} settings__role__option--disabled{% endif %}"
|
||||
name="role[mode]" value="leave" title="Leave this role"
|
||||
onclick="return confirm('Are you sure you want to remove {{ role.role_name|replace({"'": "\'"}) }} from your account?')"
|
||||
{% if not role.role_can_leave %}disabled{% endif %}>
|
||||
<i class="fas fa-times-circle"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions__list">
|
||||
{% for session in sessions.list %}
|
||||
{{ user_session(session, session.session_id == sessions.active) }}
|
||||
{% endfor %}
|
||||
<div class="container settings__container" id="sessions">
|
||||
{{ container_title('<i class="fas fa-key fa-fw"></i> Sessions', '', true) }}
|
||||
{% set spagination = pagination(
|
||||
sessions.amount,
|
||||
sessions.take,
|
||||
sessions.offset,
|
||||
''|url_construct({
|
||||
'logins[offset]': logins.offset,
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[offset]': logs.offset,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'sessions[offset]'
|
||||
) %}
|
||||
|
||||
<div class="settings__description">
|
||||
<p>These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a different colour so you don't accidentally force yourself to logout.</p>
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions">
|
||||
<form action="" method="post" class="settings__sessions__all">
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('session', 'all') }}
|
||||
|
||||
<button class="input__button">
|
||||
<i class="fas fa-bomb"></i> Kill ALL active sessions
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="settings__sessions__pagination">
|
||||
{{ spagination }}
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions__list">
|
||||
{% for session in sessions.list %}
|
||||
{{ user_session(session, session.session_id == sessions.active) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions__pagination">
|
||||
{{ spagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__sessions__pagination">
|
||||
{{ spagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container settings__container" id="login-attempts">
|
||||
{{ container_title('<i class="fas fa-user-lock fa-fw"></i> Login Attempts', '', true) }}
|
||||
{% set lhpagination = pagination(
|
||||
logins.amount,
|
||||
logins.take,
|
||||
logins.offset,
|
||||
''|url_construct({
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[offset]': logs.offset,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[offset]': sessions.offset,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'logins[offset]'
|
||||
) %}
|
||||
|
||||
<div class="container settings__container" id="logins">
|
||||
{{ container_title('<i class="fas fa-user-lock fa-fw"></i> Login History', '', true) }}
|
||||
{% set lhpagination = pagination(
|
||||
logins.amount,
|
||||
logins.take,
|
||||
logins.offset,
|
||||
''|url_construct({
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[offset]': logs.offset,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[offset]': sessions.offset,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'logins[offset]'
|
||||
) %}
|
||||
<div class="settings__description">
|
||||
<p>These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.</p>
|
||||
</div>
|
||||
|
||||
<div class="settings__description">
|
||||
<p>These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.</p>
|
||||
</div>
|
||||
<div class="settings__login-attempts">
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
</div>
|
||||
|
||||
<div class="settings__login-attempts">
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
{% for attempt in logins.list %}
|
||||
{{ user_login_attempt(attempt) }}
|
||||
{% endfor %}
|
||||
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for attempt in logins.list %}
|
||||
{{ user_login_attempt(attempt) }}
|
||||
{% endfor %}
|
||||
<div class="container settings__container" id="account-log">
|
||||
{{ container_title('<i class="fas fa-file-alt fa-fw"></i> Account Log', '', true) }}
|
||||
{% set alpagination = pagination(
|
||||
logs.amount,
|
||||
logs.take,
|
||||
logs.offset,
|
||||
''|url_construct({
|
||||
'logins[offset]': logins.offset,
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[offset]': sessions.offset,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'logs[offset]'
|
||||
) %}
|
||||
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings__description">
|
||||
<p>This is a log of all "important" actions that have been done using your account for your review. If you notice anything strange, please alert the staff.</p>
|
||||
</div>
|
||||
|
||||
<div class="container settings__container" id="log">
|
||||
{{ container_title('<i class="fas fa-file-alt fa-fw"></i> Account Log', '', true) }}
|
||||
{% set alpagination = pagination(
|
||||
logs.amount,
|
||||
logs.take,
|
||||
logs.offset,
|
||||
''|url_construct({
|
||||
'logins[offset]': logins.offset,
|
||||
'logins[take]': logins.take == 15 ? 0 : logins.take,
|
||||
'logs[take]': logs.take == 15 ? 0 : logs.take,
|
||||
'sessions[offset]': sessions.offset,
|
||||
'sessions[take]': sessions.take == 15 ? 0 : sessions.take,
|
||||
}),
|
||||
false,
|
||||
'logs[offset]'
|
||||
) %}
|
||||
<div class="settings__account-logs">
|
||||
<div class="settings__account-logs__pagination">
|
||||
{{ alpagination }}
|
||||
</div>
|
||||
|
||||
<div class="settings__description">
|
||||
<p>This is a log of all "important" actions that have been done using your account for your review. If you notice anything strange, please alert the staff.</p>
|
||||
</div>
|
||||
{% for log in logs.list %}
|
||||
{{ user_account_log(log, logs.strings) }}
|
||||
{% endfor %}
|
||||
|
||||
<div class="settings__account-logs">
|
||||
<div class="settings__account-logs__pagination">
|
||||
{{ alpagination }}
|
||||
</div>
|
||||
|
||||
{% for log in logs.list %}
|
||||
{{ user_account_log(log, logs.strings) }}
|
||||
{% endfor %}
|
||||
|
||||
<div class="settings__account-logs__pagination">
|
||||
{{ alpagination }}
|
||||
<div class="settings__account-logs__pagination">
|
||||
{{ alpagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue