Add styling to login history as well as a descriptions to sessions page.
This commit is contained in:
parent
bbaddbeacd
commit
98de031d03
7 changed files with 126 additions and 6 deletions
|
@ -10,7 +10,7 @@
|
|||
font-size: 1.17em;
|
||||
font-weight: 700;
|
||||
padding: 3px;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-family: @mio-font-heading;
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
font-size: 1.1em;
|
||||
font-weight: 700;
|
||||
padding: 3px;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-family: @mio-font-heading;
|
||||
}
|
||||
|
||||
&__input {
|
||||
|
|
6
assets/less/mio/classes/settings/description.less
Normal file
6
assets/less/mio/classes/settings/description.less
Normal file
|
@ -0,0 +1,6 @@
|
|||
.mio__settings__description {
|
||||
font-size: .9em;
|
||||
padding: 1px 4px;
|
||||
border-bottom: 1px solid #9475b2;
|
||||
margin-bottom: 1px;
|
||||
}
|
61
assets/less/mio/classes/settings/login-history.less
Normal file
61
assets/less/mio/classes/settings/login-history.less
Normal file
|
@ -0,0 +1,61 @@
|
|||
.mio__settings__login-history {
|
||||
&__country {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
display: flex;
|
||||
border: 1px solid #9475b2;
|
||||
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,3 +1,6 @@
|
|||
@mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -16,7 +19,7 @@ body {
|
|||
background-image: linear-gradient(180deg, #c2affe, transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-size: 100% 150px;
|
||||
font: 12px/20px Tahoma, Verdana, Arial, Helvetica, sans-serif;
|
||||
font: 12px/20px @mio-font-regular;
|
||||
color: #000;
|
||||
|
||||
&__wrapper {
|
||||
|
@ -51,9 +54,11 @@ body {
|
|||
|
||||
// Settings
|
||||
@import "classes/settings/content";
|
||||
@import "classes/settings/description";
|
||||
@import "classes/settings/errors";
|
||||
@import "classes/settings/account";
|
||||
@import "classes/settings/avatar";
|
||||
@import "classes/settings/login-history";
|
||||
@import "classes/settings/sessions";
|
||||
|
||||
// Forums
|
||||
|
|
|
@ -1,7 +1,51 @@
|
|||
{% extends '@mio/settings/master.twig' %}
|
||||
|
||||
{% block settings_content %}
|
||||
{% for login_attempt in user_login_attempts %}
|
||||
<p>{{ login_attempt.attempt_id }}, {{ login_attempt.was_successful }}, {{ login_attempt.attempt_ip.string }}, {{ login_attempt.user_agent }}, {{ login_attempt.attempt_country }}, {{ login_attempt.created_at }}</p>
|
||||
<div class="mio__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="mio__settings__login-history">
|
||||
{% for attempt in user_login_attempts %}
|
||||
<div class="mio__settings__login-history__entry" id="attempt-{{ attempt.attempt_id }}">
|
||||
<div class="mio__settings__login-history__column mio__settings__login-history__column--ip">
|
||||
<div class="mio__settings__login-history__column__name">
|
||||
IP
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column__value">
|
||||
{{ attempt.attempt_ip.string }}
|
||||
{% if attempt.attempt_country != 'XX' %}
|
||||
<img class="mio__settings__login-history__country" src="https://static.flash.moe/flags/fff/{{ attempt.attempt_country|lower }}.png" alt="{{ attempt.attempt_country }}" title="{{ attempt.attempt_country|country_name }}">
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column mio__settings__login-history__column--success">
|
||||
<div class="mio__settings__login-history__column__name">
|
||||
Was Successful?
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column__value mio__settings__login-history__column__value--{{ attempt.was_successful ? 'successful' : 'failed' }}">
|
||||
{{ attempt.was_successful ? 'Yes' : 'No' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column mio__settings__login-history__column--created" onmouseenter="this.children[1].textContent = '{{ attempt.created_at }}';" onmouseleave="this.children[1].textContent = '{{ attempt.created_at.diffForHumans }}';">
|
||||
<div class="mio__settings__login-history__column__name">
|
||||
Attempted
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column__value">
|
||||
{{ attempt.created_at.diffForHumans }}
|
||||
</div>
|
||||
</div>
|
||||
{% if attempt.user_agent|length > 0 %}
|
||||
<div class="mio__settings__login-history__column mio__settings__login-history__column--user_agent">
|
||||
<div class="mio__settings__login-history__column__name">
|
||||
User Agent
|
||||
</div>
|
||||
<div class="mio__settings__login-history__column__value">
|
||||
{{ attempt.user_agent }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
{% extends '@mio/settings/master.twig' %}
|
||||
|
||||
{% block settings_content %}
|
||||
<div class="mio__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 darker purple so you don't accidentally force yourself to logout.</p>
|
||||
</div>
|
||||
|
||||
<div class="mio__settings__sessions">
|
||||
{% for session in user_sessions %}
|
||||
<div class="mio__settings__sessions__entry{% if session.session_id == settings_session.session_id %} mio__settings__sessions__entry--current{% endif %}" id="session-{{ session.session_id }}">
|
||||
|
|
Loading…
Add table
Reference in a new issue