Restyled login attempts.
This commit is contained in:
parent
84c5bcacaa
commit
70c3cd63fc
7 changed files with 224 additions and 170 deletions
83
assets/less/classes/settings/login-attempt.less
Normal file
83
assets/less/classes/settings/login-attempt.less
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
.settings__login-attempt {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
|
||||
&--failed {
|
||||
--accent-colour: #a00;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&--failed &__container {
|
||||
background-color: fade(#111, 80%);
|
||||
}
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__important {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__flag {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex: 1 1 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__action {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-shadow: inherit;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
margin-top: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
min-width: 120px;
|
||||
|
||||
&__title {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
assets/less/classes/settings/login-attempts.less
Normal file
6
assets/less/classes/settings/login-attempts.less
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.settings__login-attempts {
|
||||
|
||||
&__pagination {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
.settings__login-history {
|
||||
margin: 1px;
|
||||
|
||||
&__country {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
display: flex;
|
||||
border: 1px solid var(--accent-colour);
|
||||
justify-content: space-between;
|
||||
padding: 1px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__column {
|
||||
flex-grow: 1;
|
||||
margin-left: 5px;
|
||||
margin-right: 1px;
|
||||
|
||||
&--ip,
|
||||
&--created,
|
||||
&--success {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--user-agent {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&--ip {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
&--created,
|
||||
&--success {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__value {
|
||||
&--successful {
|
||||
color: #0a0;
|
||||
}
|
||||
|
||||
&--failed {
|
||||
color: #c00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,23 @@
|
|||
.settings__session {
|
||||
margin: 4px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
|
||||
&--current {
|
||||
// todo: make this not bad
|
||||
background-image: linear-gradient(0deg, #111c, #111c);
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&--current &__container {
|
||||
background-color: fade(#111, 80%);
|
||||
}
|
||||
|
||||
&__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__important {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,8 @@ body {
|
|||
@import "classes/settings/pagination";
|
||||
@import "classes/settings/account";
|
||||
@import "classes/settings/log";
|
||||
@import "classes/settings/login-history";
|
||||
@import "classes/settings/login-attempt";
|
||||
@import "classes/settings/login-attempts";
|
||||
@import "classes/settings/session";
|
||||
@import "classes/settings/sessions";
|
||||
@import "classes/settings/role";
|
||||
|
|
|
|||
|
|
@ -49,72 +49,128 @@
|
|||
{% set browser = get_browser(session.session_user_agent) %}
|
||||
|
||||
<div class="settings__session{% if is_current_session %} settings__session--current{% endif %}" id="session-{{ session.session_id }}">
|
||||
<div class="settings__session__important">
|
||||
<div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
|
||||
<div class="settings__session__container">
|
||||
<div class="settings__session__important">
|
||||
<div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
|
||||
|
||||
<div class="settings__session__description">
|
||||
{{ browser.browser }} on {{ browser.platform }}
|
||||
<div class="settings__session__description">
|
||||
{{ browser.browser }} on {{ browser.platform }}
|
||||
</div>
|
||||
|
||||
<form class="settings__session__actions" method="post" action="/settings.php">
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('session[]', session.session_id) }}
|
||||
|
||||
<button class="settings__session__action" title="{{ is_current_session ? 'Logout' : 'End Session' }}">
|
||||
{% if is_current_session %}
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-times-circle"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form class="settings__session__actions" method="post" action="/settings.php">
|
||||
{{ input_csrf('settings') }}
|
||||
{{ input_hidden('session[]', session.session_id) }}
|
||||
|
||||
<button class="settings__session__action" title="{{ is_current_session ? 'Logout' : 'End Session' }}">
|
||||
{% if is_current_session %}
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-times-circle"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="settings__session__details">
|
||||
<div class="settings__session__detail">
|
||||
<div class="settings__session__detail__title">
|
||||
IP Address
|
||||
</div>
|
||||
<div class="settings__session__detail__value">
|
||||
{{ session.session_ip }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__session__detail" title="{{ session.session_created|date('r') }}">
|
||||
<div class="settings__session__detail__title">
|
||||
Created
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_created|date('c') }}">
|
||||
{{ session.session_created|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<div class="settings__session__detail" title="{{ session.session_expires|date('r') }}">
|
||||
<div class="settings__session__detail__title">
|
||||
Expires
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_expires|date('c') }}">
|
||||
{{ session.session_expires|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{% if session.session_active is not null %}
|
||||
<div class="settings__session__detail" title="{{ session.session_active|date('r') }}">
|
||||
<div class="settings__session__details">
|
||||
<div class="settings__session__detail">
|
||||
<div class="settings__session__detail__title">
|
||||
Last Active
|
||||
IP Address
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_active|date('c') }}">
|
||||
{{ session.session_active|time_diff }}
|
||||
<div class="settings__session__detail__value">
|
||||
{{ session.session_ip }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__session__detail" title="{{ session.session_created|date('r') }}">
|
||||
<div class="settings__session__detail__title">
|
||||
Created
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_created|date('c') }}">
|
||||
{{ session.session_created|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="settings__session__detail">
|
||||
<div class="settings__session__detail__title">
|
||||
User Agent
|
||||
<div class="settings__session__detail" title="{{ session.session_expires|date('r') }}">
|
||||
<div class="settings__session__detail__title">
|
||||
Expires
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_expires|date('c') }}">
|
||||
{{ session.session_expires|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
<div class="settings__session__detail__value">
|
||||
{{ session.session_user_agent|length > 0 ? session.session_user_agent : 'None' }}
|
||||
|
||||
{% if session.session_active is not null %}
|
||||
<div class="settings__session__detail" title="{{ session.session_active|date('r') }}">
|
||||
<div class="settings__session__detail__title">
|
||||
Last Active
|
||||
</div>
|
||||
<time class="settings__session__detail__value" datetime="{{ session.session_active|date('c') }}">
|
||||
{{ session.session_active|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="settings__session__detail">
|
||||
<div class="settings__session__detail__title">
|
||||
User Agent
|
||||
</div>
|
||||
<div class="settings__session__detail__value">
|
||||
{{ session.session_user_agent|length > 0 ? session.session_user_agent : 'None' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro user_login_attempt(attempt) %}
|
||||
{% set browser = get_browser(attempt.attempt_user_agent) %}
|
||||
|
||||
<div class="settings__login-attempt{% if not attempt.attempt_success %} settings__login-attempt--failed{% endif %}" id="login-attempt-{{ attempt.attempt_id }}">
|
||||
<div class="settings__login-attempt__container">
|
||||
<div class="settings__login-attempt__important">
|
||||
<div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-attempt__flag"></div>
|
||||
|
||||
<div class="settings__login-attempt__description">
|
||||
{{ browser.browser }} on {{ browser.platform }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-attempt__details">
|
||||
<div class="settings__login-attempt__detail">
|
||||
<div class="settings__login-attempt__detail__title">
|
||||
IP Address
|
||||
</div>
|
||||
<div class="settings__login-attempt__detail__value">
|
||||
{{ attempt.attempt_ip }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-attempt__detail">
|
||||
<div class="settings__login-attempt__detail__title">
|
||||
Succeeded
|
||||
</div>
|
||||
<div class="settings__login-attempt__detail__value">
|
||||
{{ attempt.attempt_success ? 'Yes' : 'No' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-attempt__detail" title="{{ attempt.attempt_created|date('r') }}">
|
||||
<div class="settings__login-attempt__detail__title">
|
||||
Attempted
|
||||
</div>
|
||||
<time class="settings__login-attempt__detail__value" datetime="{{ attempt.attempt_created|date('c') }}">
|
||||
{{ attempt.attempt_created|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-attempt__detail">
|
||||
<div class="settings__login-attempt__detail__title">
|
||||
User Agent
|
||||
</div>
|
||||
<div class="settings__login-attempt__detail__value">
|
||||
{{ attempt.attempt_user_agent|length > 0 ? attempt.attempt_user_agent : 'None' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends 'user/master.twig' %}
|
||||
{% from 'macros.twig' import container_title, pagination %}
|
||||
{% from 'user/macros.twig' import user_session %}
|
||||
{% from 'user/macros.twig' import user_session, user_login_attempt %}
|
||||
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
|
||||
|
||||
{% set title = 'Settings' %}
|
||||
|
|
@ -198,55 +198,18 @@
|
|||
<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-history">
|
||||
{{ lhpagination }}
|
||||
<div class="settings__login-attempts">
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
</div>
|
||||
|
||||
{% for attempt in logins.list %}
|
||||
<div class="settings__login-history__entry" id="attempt-{{ attempt.attempt_id }}">
|
||||
<div class="settings__login-history__column settings__login-history__column--ip">
|
||||
<div class="settings__login-history__column__name">
|
||||
IP
|
||||
</div>
|
||||
<div class="settings__login-history__column__value">
|
||||
{{ attempt.attempt_ip }}
|
||||
{% if attempt.attempt_country != 'XX' %}
|
||||
<div class="flag flag--{{ attempt.attempt_country|lower }} settings__login-history__country" title="{{ attempt.attempt_country|country_name }}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-history__column settings__login-history__column--success">
|
||||
<div class="settings__login-history__column__name">
|
||||
Was Successful?
|
||||
</div>
|
||||
<div class="settings__login-history__column__value settings__login-history__column__value--{{ attempt.attempt_success ? 'successful' : 'failed' }}">
|
||||
{{ attempt.attempt_success ? 'Yes' : 'No' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings__login-history__column settings__login-history__column--created" title="{{ attempt.attempt_created|date('r') }}">
|
||||
<div class="settings__login-history__column__name">
|
||||
Attempted
|
||||
</div>
|
||||
<time class="settings__login-history__column__value" datetime="{{ attempt.attempt_created|date('c') }}">
|
||||
{{ attempt.attempt_created|time_diff }}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{% if attempt.attempt_user_agent|length > 0 %}
|
||||
<div class="settings__login-history__column settings__login-history__column--user_agent">
|
||||
<div class="settings__login-history__column__name">
|
||||
User Agent
|
||||
</div>
|
||||
<div class="settings__login-history__column__value">
|
||||
{{ attempt.attempt_user_agent }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{{ user_login_attempt(attempt) }}
|
||||
{% endfor %}
|
||||
|
||||
{{ lhpagination }}
|
||||
<div class="settings__login-attempts__pagination">
|
||||
{{ lhpagination }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue