From 98de031d03f988c10f989eaafd8f7160acc16692 Mon Sep 17 00:00:00 2001 From: flashwave Date: Mon, 26 Mar 2018 18:00:51 +0200 Subject: [PATCH] Add styling to login history as well as a descriptions to sessions page. --- assets/less/mio/classes/container.less | 2 +- assets/less/mio/classes/settings/account.less | 2 +- .../mio/classes/settings/description.less | 6 ++ .../mio/classes/settings/login-history.less | 61 +++++++++++++++++++ assets/less/mio/main.less | 7 ++- views/mio/settings/login-history.twig | 50 ++++++++++++++- views/mio/settings/sessions.twig | 4 ++ 7 files changed, 126 insertions(+), 6 deletions(-) create mode 100644 assets/less/mio/classes/settings/description.less create mode 100644 assets/less/mio/classes/settings/login-history.less diff --git a/assets/less/mio/classes/container.less b/assets/less/mio/classes/container.less index 818a409d..92f52ba6 100644 --- a/assets/less/mio/classes/container.less +++ b/assets/less/mio/classes/container.less @@ -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 { diff --git a/assets/less/mio/classes/settings/account.less b/assets/less/mio/classes/settings/account.less index f99137c9..e8357307 100644 --- a/assets/less/mio/classes/settings/account.less +++ b/assets/less/mio/classes/settings/account.less @@ -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 { diff --git a/assets/less/mio/classes/settings/description.less b/assets/less/mio/classes/settings/description.less new file mode 100644 index 00000000..4a10897a --- /dev/null +++ b/assets/less/mio/classes/settings/description.less @@ -0,0 +1,6 @@ +.mio__settings__description { + font-size: .9em; + padding: 1px 4px; + border-bottom: 1px solid #9475b2; + margin-bottom: 1px; +} diff --git a/assets/less/mio/classes/settings/login-history.less b/assets/less/mio/classes/settings/login-history.less new file mode 100644 index 00000000..729e253a --- /dev/null +++ b/assets/less/mio/classes/settings/login-history.less @@ -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; + } + } + } +} diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less index 9a60fa77..051b243f 100644 --- a/assets/less/mio/main.less +++ b/assets/less/mio/main.less @@ -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 diff --git a/views/mio/settings/login-history.twig b/views/mio/settings/login-history.twig index 8a3459e5..c710be6b 100644 --- a/views/mio/settings/login-history.twig +++ b/views/mio/settings/login-history.twig @@ -1,7 +1,51 @@ {% extends '@mio/settings/master.twig' %} {% block settings_content %} - {% for login_attempt in user_login_attempts %} -

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

- {% endfor %} +
+

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.

+
+ +
+ {% for attempt in user_login_attempts %} + + {% endfor %} +
{% endblock %} diff --git a/views/mio/settings/sessions.twig b/views/mio/settings/sessions.twig index 64966bb3..8f3ee673 100644 --- a/views/mio/settings/sessions.twig +++ b/views/mio/settings/sessions.twig @@ -1,6 +1,10 @@ {% extends '@mio/settings/master.twig' %} {% block settings_content %} +
+

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.

+
+
{% for session in user_sessions %}