Add styling to login history as well as a descriptions to sessions page.

This commit is contained in:
flash 2018-03-26 18:00:51 +02:00
parent bbaddbeacd
commit 98de031d03
7 changed files with 126 additions and 6 deletions

View file

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

View file

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

View file

@ -0,0 +1,6 @@
.mio__settings__description {
font-size: .9em;
padding: 1px 4px;
border-bottom: 1px solid #9475b2;
margin-bottom: 1px;
}

View 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;
}
}
}
}

View file

@ -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

View file

@ -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 %}

View file

@ -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 }}">