mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2026-08-23 19:28:52 +00:00
Code Issues Releases Wiki Activity

UI Fixes for remote login function

Browse Source
This commit is contained in:
Ozzie Isaacs
2026-08-16 11:42:58 +02:00
parent e2f2c3014c
commit 661b38bd27
4 changed files with 82 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cps/static/css/caliBlur.css
+40 -10
View File
@@ -3794,7 +3794,8 @@ body > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a
}
body.login > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a,
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a {
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a,
body.remotelogin > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a {
width: 100vw;
height: 120px;
margin: 0 !important;
@@ -3806,26 +3807,30 @@ body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-h
}
body.login > .container-fluid,
body.register > .container-fluid {
body.register > .container-fluid,
body.remotelogin > .container-fluid {
width: 100vw;
height: 100%;
position: relative
}
body.login > div.container-fluid > div.row-fluid > div.col-sm-10,
body.register > div.container-fluid > div.row-fluid > div.col-sm-10 {
body.register > div.container-fluid > div.row-fluid > div.col-sm-10,
body.remotelogin > div.container-fluid > div.row-fluid > div.col-sm-10 {
width: 100%;
height: 100%;
overflow-y: visible !important
}
body.login > div.navbar.navbar-default.navbar-static-top > div > div.navbar-collapse.collapse,
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-collapse.collapse {
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-collapse.collapse,
body.remotelogin > div.navbar.navbar-default.navbar-static-top > div > div.navbar-collapse.collapse {
display: none !important
}
.login .navbar-default,
.register .navbar-default {
.register .navbar-default,
.remotelogin .navbar-default {
background: 0 0 !important
}
@@ -3840,21 +3845,31 @@ body.author .undefined-img, body.shelfcreate, body.shelfedit {
}
body.login > div.container-fluid > div.row-fluid > div.col-sm-10::before, body.login > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a::before,
body.remotelogin > div.container-fluid > div.row-fluid > div.col-sm-10::before, body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a::before,
body.remotelogin > div.container-fluid > div.row-fluid > div.col-sm-2::after,
body.register > div.container-fluid > div.row-fluid > div.col-sm-10::before, body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a::before {
display: none
}
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a {
body.remotelogin > div.container-fluid > div.row-fluid > div.col-sm-2 {
background: none;
}
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a,
body.remotelogin > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a {
pointer-events: none;
cursor: default
}
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a:hover {
body.register > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a:hover,
body.remotelogin > div.navbar.navbar-default.navbar-static-top > div > div.navbar-header > a:hover {
background: 0 0 !important;
color: #ccc !important
}
body.register .well > form > h2 {
body.register .well > form > h2,
body.remotelogin .well > form > h2,
body.remotelogin .caliblur-remote-login-form > h2 {
position: static !important;
width: 100% !important;
max-width: none !important;
@@ -3872,11 +3887,21 @@ body.register .well > form > h2 {
background: transparent !important
}
body.register .well > form {
body.register .well > form,
body.remotelogin .well > form,
body.remotelogin .caliblur-remote-login-form {
margin-top: 0;
padding-top: 0;
}
body.remotelogin .well > form.caliblur-remote-login-form,
body.remotelogin .well > .caliblur-remote-login-form {
background: rgba(0, 0, 0, .4);
border-radius: 4px;
padding: 20px 25px 10px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.book-meta > .bookinfo > .comments[aria-expanded=true] + a:after, .book-meta > .description[aria-expanded=true] + a:after {
content: '';
display: inline-block;
@@ -4369,10 +4394,15 @@ body.advanced_search > div.container-fluid > div.row-fluid > div.col-sm-10 > div
}
.login .home-btn, .login .plexBack, .register .plexBack, body.login > div.container-fluid > div.row-fluid > div.col-sm-2, body.register > div.container-fluid > div.row-fluid > div.col-sm-2, body.login > div.navbar.navbar-default.navbar-static-top > div > form, body.register > div.navbar.navbar-default.navbar-static-top > div > form {
.login .home-btn, .login .plexBack, .register .plexBack, body.login > div.container-fluid > div.row-fluid > div.col-sm-2, body.register > div.container-fluid > div.row-fluid > div.col-sm-2, body.login > div.navbar.navbar-default.navbar-static-top > div > form, body.register > div.navbar.navbar-default.navbar-static-top > div > form, body.remotelogin > div.navbar.navbar-default.navbar-static-top > div > form {
display: none
}
body.remotelogin .plexBack,
body.remotelogin .plexBack > a {
display: none !important;
}
@media only screen and (min-width: 768px) {
#main-nav + #scnd-nav {
background: rgba(0, 0, 0, .15)
cps/themes/caliblur/templates/remote_login.html
+22
View File
@@ -0,0 +1,22 @@
{% extends theme("layout.html") %}
{% block body %}
<div class="well col-sm-6 col-sm-offset-2 caliblur-login-panel">
<form method="POST" role="form" class="caliblur-remote-login-form">
<h2 style="margin-top: 0">{{_('Magic Link - Authorise New Device')}}</h2>
<p>
{{_('On another device, login and visit:')}}
</p>
<h4><a id="verify_url" data-token="{{token}}" href="{{verify_url}}">{{verify_url}}</a></h4>
<p>
{{_('Once verified, you will automatically be logged in on this device.')}}
</p>
<p>
{{_('This verification link will expire in 10 minutes.')}}
</p>
</form>
</div>
{% endblock %}
{% block js %}
<script src="{{ url_for('static', filename='js/remote_login.js') }}"></script>
{% endblock %}
cps/themes/caliblur/templates/remote_login_verify.html
+19
View File
@@ -0,0 +1,19 @@
{% extends theme("layout.html") %}
{% block body %}
<div class="well col-sm-6 col-sm-offset-2 caliblur-login-panel">
<form method="POST" role="form" class="caliblur-remote-login-form">
<h2 style="margin-top: 0">{{ _('Approve Magic Link Login') }}</h2>
<p>{{ _('Review the device that requested access before approving this login.') }}</p>
<dl class="dl-horizontal">
<dt>{{ _('IP address') }}</dt>
<dd>{{ request_ip or _('Unknown') }}</dd>
<dt>{{ _('Browser') }}</dt>
<dd>{{ request_user_agent or _('Unknown') }}</dd>
</dl>
<p>{{ _('If you approve this request, the device that started it will be logged in as %(username)s.', username=current_user.name) }}</p>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-primary">{{ _('Approve Login') }}</button>
<a class="btn btn-default" href="{{ url_for('web.index') }}">{{ _('Cancel') }}</a>
</form>
</div>
{% endblock %}
cps/themes/standard/templates/remote_login_verify.html
+1 -1
View File
@@ -1,6 +1,7 @@
{% extends theme("layout.html") %}
{% block body %}
<div class="well col-sm-6 col-sm-offset-2">
<form method="POST" role="form">
<h2 style="margin-top: 0">{{ _('Approve Magic Link Login') }}</h2>
<p>{{ _('Review the device that requested access before approving this login.') }}</p>
<dl class="dl-horizontal">
@@ -10,7 +11,6 @@
<dd>{{ request_user_agent or _('Unknown') }}</dd>
</dl>
<p>{{ _('If you approve this request, the device that started it will be logged in as %(username)s.', username=current_user.name) }}</p>
<form method="POST" role="form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-primary">{{ _('Approve Login') }}</button>
<a class="btn btn-default" href="{{ url_for('web.index') }}">{{ _('Cancel') }}</a>