Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework panel config for login page

Browse Source
This commit is contained in:
Silversthorn 2023-01-10 00:53:47 +01:00
parent d7d27b00c4
commit 3c11f0120d
2 changed files with 88 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
app/frontend/templates/panel/panel_config.html
View File

@ -230,68 +230,81 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-6 grid-margin stretch-card"> <div class="col-md-12 col-lg-12 grid-margin stretch-card">
<div class="card"> <div class="card">
<div class="card-header header-sm d-flex justify-content-between align-items-center">
<h4>{{ translate('panelConfig', 'customLoginPage', data['lang']) }}</h4>
</div>
<div class="card-body"> <div class="card-body">
<div class="row">
<div class="col-sm-6">
<h4>{{ translate('panelConfig', 'loginImage', data['lang']) }}</h4> <h4>{{ translate('panelConfig', 'loginImage', data['lang']) }}</h4>
<br /> <hr>
<p class="card-description"> <form class="form-inline" name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
<form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
{% raw xsrf_form_html() %} {% raw xsrf_form_html() %}
<input type="hidden" value="import_zip" name="create_type"> <input type="hidden" value="import_zip" name="create_type">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="form-group"> <div class="form-group">
<label for="server">{{ translate('panelConfig', 'backgroundUpload', data['lang']) <span id="upload_input"><input type="file" class="form-control-file" id="file" name="file" multiple="false" required></span>
}}</label><br>
<span id="upload_input">
<input type="file" multiple="false" class="form-control" id="file" name="file" required
style="width: 70%;">
<button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()"
disabled>UPLOAD</button>
</span>
</div>
</div>
</div>
</div> </div>
<div class="form-group">
<button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()" disabled>UPLOAD</button>
</div> </div>
</form> </form>
</p> <hr>
</div> <hr />
</div> <h4>{{ translate('panelConfig', 'loginBackground', data['lang']) }}</h4>
<div class="col-sm-6 grid-margin stretch-card"> <form id="try_photo_form">
<div class="card"> <select class="form-select form-control form-control-lg select-css" id="try_photo" name="try_photo"
<div class="card-body"> form="try_photo" onchange="updateBackgroundSelect()">
<h4>{{ translate('panelConfig', 'loginBackground', data['lang']) }}</h4><br /><br><br />
<form id="photo_form">
<select class="form-select form-control form-control-lg select-css" id="photo" name="photo"
form="photo_form">
{% for image in data["backgrounds"] %} {% for image in data["backgrounds"] %}
<option value="{{image}}">{{image}}</option> <option value="{{image}}">{{image}}</option>
{% end %} {% end %}
</select> </select>
<div> <button class="btn btn-outline-danger delete-photo" type="button">{{ translate('panelConfig',
<br> 'delete', data['lang']) }}</button>
<h6>{{ translate('panelConfig', 'preview', data['lang']) }}:</h6> </form>
<img style="width: 200px; height: 113px;"
src="../../static/assets/images/auth/{{ data['background'] }}">
</div> </div>
<br /> <div class="col-sm-6">
<br /> <div>
<h6>{{ translate('panelConfig', 'preview', data['lang']) }}:</h6>
<form>
<div class="form-group row">
<label for="photo" class="col-sm-6 col-form-label">Selected Background Image</label>
<div class="col-sm-6">
<select class="form-select form-control form-control-lg select-css form-control-plaintext" id="photo" name="photo"
form="photo_form" onchange="updateBackgroundPreview()">
{% for image in data["backgrounds"] %}
<option value="{{image}}">{{image}}</option>
{% end %}
</select>
</div>
</div>
<div id="photo_loading" class="form-group" hidden>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3" for="formControlRange">{{ translate('panelConfig', 'loginOpacity', data['lang']) }}</label>
<div class="col-sm-9">
<input type="range" class="form-control-range" id="modal_opacity" name="modal_opacity">
</div>
</div>
<img id="bg-preview" src="../../static/assets/images/auth/{{ data['background'] }}" class="img-fluid" alt="Responsive image">
<div class="form-group">
<button class="btn btn-outline-success select-photo" type="button">{{ translate('panelConfig', <button class="btn btn-outline-success select-photo" type="button">{{ translate('panelConfig',
'select', data['lang']) }}</button> 'select', data['lang']) }}</button>
<button class="btn btn-outline-danger delete-photo" type="button">{{ translate('panelConfig', <button class="btn btn-outline-danger delete-photo" type="button">{{ translate('panelConfig',
'delete', data['lang']) }}</button> 'delete', data['lang']) }}</button>
</div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
{% end %} {% end %}
</div> </div>
</div> </div>
@ -404,10 +417,25 @@
}); });
}) })
function updateBackgroundSelect() {
$("#photo").val($("#try_photo").val()).change();
}
function updateBackgroundPreview() {
var img = document.getElementById('bg-preview');
if ($("#photo").val() == "login_1.jpg") {
var src_path = "../../static/assets/images/auth/".concat($("#photo").val());
}
else {
var src_path = "../../static/assets/images/auth/custom/".concat($("#photo").val());
}
img.src = src_path;
}
var file; var file;
function sendFile() { function sendFile() {
file = $("#file")[0].files[0] file = $("#file")[0].files[0]
document.getElementById("upload_input").innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>' document.getElementById("upload_input").innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>';
let xmlHttpRequest = new XMLHttpRequest(); let xmlHttpRequest = new XMLHttpRequest();
let token = getCookie("_xsrf") let token = getCookie("_xsrf")
let fileName = file.name let fileName = file.name

2
app/translations/en_EN.json
View File

@ -228,9 +228,11 @@
"superConfirmTitle": "Enable superuser? Are you sure?", "superConfirmTitle": "Enable superuser? Are you sure?",
"user": "User", "user": "User",
"users": "Users", "users": "Users",
"customLoginPage": "Customise the Login Page",
"loginImage": "Upload a background image for the login screen.", "loginImage": "Upload a background image for the login screen.",
"backgroundUpload": "Background Upload", "backgroundUpload": "Background Upload",
"loginBackground": "Login Background Image", "loginBackground": "Login Background Image",
"loginOpacity": "Select the Login Window Opacity",
"select": "Select", "select": "Select",
"selectImage": "Select an image", "selectImage": "Select an image",
"preview": "Preview" "preview": "Preview"