flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyled login attempts.

Browse source
This commit is contained in:
flash 2018-11-19 23:48:01 +01:00
parent 84c5bcacaa
commit 70c3cd63fc
7 changed files with 224 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
assets/less/classes/settings/login-attempt.less Normal file
View 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
View file

@ -0,0 +1,6 @@
.settings__login-attempts {
&__pagination {
margin: 4px;
}
}

63
assets/less/classes/settings/login-history.less
View file

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

14
assets/less/classes/settings/session.less
View file

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

3
assets/less/main.less
View file

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

56
templates/user/macros.twig
View file

@ -49,6 +49,7 @@
{% 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__container">
<div class="settings__session__important">
<div class="flag flag--{{ session.session_country|lower }} settings__session__flag"></div>
@ -119,4 +120,59 @@
</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>
</div>
{% endmacro %}

51
templates/user/settings.twig
View file

@ -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,57 +198,20 @@
<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">
<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 %}
<div class="settings__login-attempts__pagination">
{{ lhpagination }}
</div>
</div>
</div>
<div class="container settings__container" id="log">
{{ container_title('<i class="fas fa-file-alt fa-fw"></i> Account Log', '', true) }}