1
0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2025-04-20 02:52:11 +00:00

Implemented b2 in frontend

This commit is contained in:
hija 2020-08-26 15:37:44 +02:00
parent 9199294455
commit 1081be8ba5

View File

@ -1,15 +1,15 @@
<style> <style>
#backup-status th { text-align: center; } #backup-status th { text-align: center; }
#backup-status tr.full-backup td { font-weight: bold; } #backup-status tr.full-backup td { font-weight: bold; }
</style> </style>
<h2>Backup Status</h2> <h2>Backup Status</h2>
<p>The box makes an incremental backup each night. By default the backup is stored on the machine itself, but you can also have it stored on Amazon S3.</p> <p>The box makes an incremental backup each night. By default the backup is stored on the machine itself, but you can also have it stored on Amazon S3.</p>
<h3>Configuration</h3> <h3>Configuration</h3>
<form class="form-horizontal" role="form" onsubmit="set_custom_backup(); return false;"> <form class="form-horizontal" role="form" onsubmit="set_custom_backup(); return false;">
<div class="form-group"> <div class="form-group">
<label for="backup-target-type" class="col-sm-2 control-label">Backup to:</label> <label for="backup-target-type" class="col-sm-2 control-label">Backup to:</label>
<div class="col-sm-2"> <div class="col-sm-2">
@ -18,6 +18,7 @@
<option value="local">{{hostname}}</option> <option value="local">{{hostname}}</option>
<option value="rsync">rsync</option> <option value="rsync">rsync</option>
<option value="s3">Amazon S3</option> <option value="s3">Amazon S3</option>
<option value="b2">Backblaze B2</option>
</select> </select>
</div> </div>
</div> </div>
@ -111,6 +112,38 @@
<input type="text" class="form-control" rows="1" id="backup-target-pass"> <input type="text" class="form-control" rows="1" id="backup-target-pass">
</div> </div>
</div> </div>
<!-- Backblaze -->
<div class="form-group backup-target-b2">
<div class="col-sm-10 col-sm-offset-2">
<p>Backups are stored in a Backblaze B2 bucket. You must have a Backblaze account already.</p>
<p>You MUST manually copy the encryption password from <tt class="backup-encpassword-file"></tt> to a safe and secure location. You will need this file to decrypt backup files. It is NOT stored in your Backblaze B2 bucket.</p>
</div>
</div>
<div class="form-group backup-target-b2">
<label for="backup-target-b2-user" class="col-sm-2 control-label">B2 Application KeyID</label>
<div class="col-sm-8">
<input type="text" class="form-control" rows="1" id="backup-target-b2-user" onchange="compute_b2_url()">
</div>
</div>
<div class="form-group backup-target-b2">
<label for="backup-target-b2-pass" class="col-sm-2 control-label">B2 Application Key</label>
<div class="col-sm-8">
<input type="text" class="form-control" rows="1" id="backup-target-b2-pass" onchange="compute_b2_url()">
</div>
</div>
<div class="form-group backup-target-b2">
<label for="backup-target-b2-bucket" class="col-sm-2 control-label">B2 Bucket</label>
<div class="col-sm-8">
<input type="text" placeholder="B2 Bucket" class="form-control" rows="1" id="backup-target-b2-bucket" onchange="compute_b2_url()">
</div>
</div>
<div class="form-group backup-target-b2">
<label for="backup-target-b2-url" class="col-sm-2 control-label">B2 Backup URL</label>
<div class="col-sm-8">
<input type="text" placeholder="Will be filled automatically" class="form-control" rows="1" id="backup-target-b2-url" disabled>
</div>
</div>
<!-- Common --> <!-- Common -->
<div class="form-group backup-target-local backup-target-rsync backup-target-s3"> <div class="form-group backup-target-local backup-target-rsync backup-target-s3">
<label for="min-age" class="col-sm-2 control-label">Days:</label> <label for="min-age" class="col-sm-2 control-label">Days:</label>
@ -124,13 +157,13 @@
<button id="set-s3-backup-button" type="submit" class="btn btn-primary">Save</button> <button id="set-s3-backup-button" type="submit" class="btn btn-primary">Save</button>
</div> </div>
</div> </div>
</form> </form>
<h3>Available backups</h3> <h3>Available backups</h3>
<p>The backup location currently contains the backups listed below. The total size of the backups is currently <span id="backup-total-size"></span>.</p> <p>The backup location currently contains the backups listed below. The total size of the backups is currently <span id="backup-total-size"></span>.</p>
<table id="backup-status" class="table" style="width: auto"> <table id="backup-status" class="table" style="width: auto">
<thead> <thead>
<th colspan="2">When</th> <th colspan="2">When</th>
<th>Type</th> <th>Type</th>
@ -139,18 +172,18 @@
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
<script> <script>
function toggle_form() { function toggle_form() {
var target_type = $("#backup-target-type").val(); var target_type = $("#backup-target-type").val();
$(".backup-target-local, .backup-target-rsync, .backup-target-s3").hide(); $(".backup-target-local, .backup-target-rsync, .backup-target-s3, .backup-target-b2").hide();
$(".backup-target-" + target_type).show(); $(".backup-target-" + target_type).show();
init_inputs(target_type); init_inputs(target_type);
} }
function nice_size(bytes) { function nice_size(bytes) {
var powers = ['bytes', 'KB', 'MB', 'GB', 'TB']; var powers = ['bytes', 'KB', 'MB', 'GB', 'TB'];
while (true) { while (true) {
if (powers.length == 1) break; if (powers.length == 1) break;
@ -164,9 +197,10 @@ function nice_size(bytes) {
else else
bytes = Math.round(bytes*10)/10; bytes = Math.round(bytes*10)/10;
return bytes + " " + powers[0]; return bytes + " " + powers[0];
} }
function show_system_backup() { function show_system_backup() {
// TODO: b3
show_custom_backup() show_custom_backup()
$('#backup-status tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>") $('#backup-status tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
@ -212,10 +246,10 @@ function show_system_backup() {
total_disk_size += r.unmatched_file_size; total_disk_size += r.unmatched_file_size;
$('#backup-total-size').text(nice_size(total_disk_size)); $('#backup-total-size').text(nice_size(total_disk_size));
}) })
} }
function show_custom_backup() { function show_custom_backup() {
$(".backup-target-local, .backup-target-rsync, .backup-target-s3").hide(); $(".backup-target-local, .backup-target-rsync, .backup-target-s3, .backup-target-b2").hide();
api( api(
"/system/backup/config", "/system/backup/config",
"GET", "GET",
@ -245,12 +279,21 @@ function show_custom_backup() {
var host = hostpath.shift(); var host = hostpath.shift();
$("#backup-target-s3-host").val(host); $("#backup-target-s3-host").val(host);
$("#backup-target-s3-path").val(hostpath.join('/')); $("#backup-target-s3-path").val(hostpath.join('/'));
} else if (r.target.substring(0, 5) == "b2://") {
$("#backup-target-type").val("b2");
var b2_application_keyid = r.target.substring(5).split(':')[0];
var b2_applicationkey = r.target.substring(5).split(':')[1].split('@')[0];
var b2_bucket = r.target.substring(5).split('@')[1];
$("#backup-target-b2-user").val(b2_application_keyid);
$("#backup-target-b2-pass").val(b2_applicationkey);
$("#backup-target-b2-bucket").val(b2_bucket);
compute_b2_url();
} }
toggle_form() toggle_form()
}) })
} }
function set_custom_backup() { function set_custom_backup() {
var target_type = $("#backup-target-type").val(); var target_type = $("#backup-target-type").val();
var target_user = $("#backup-target-user").val(); var target_user = $("#backup-target-user").val();
var target_pass = $("#backup-target-pass").val(); var target_pass = $("#backup-target-pass").val();
@ -264,6 +307,10 @@ function set_custom_backup() {
target = "rsync://" + $("#backup-target-rsync-user").val() + "@" + $("#backup-target-rsync-host").val() target = "rsync://" + $("#backup-target-rsync-user").val() + "@" + $("#backup-target-rsync-host").val()
+ "/" + $("#backup-target-rsync-path").val(); + "/" + $("#backup-target-rsync-path").val();
target_user = ''; target_user = '';
} else if (target_type == "b2"){
target = $('#backup-target-b2-url').val();
target_user = '';
target_pass = '';
} }
@ -286,9 +333,9 @@ function set_custom_backup() {
show_modal_error("Backup configuration", $("<p/>").text(r)); show_modal_error("Backup configuration", $("<p/>").text(r));
}); });
return false; return false;
} }
function init_inputs(target_type) { function init_inputs(target_type) {
function set_host(host) { function set_host(host) {
if(host !== 'other') { if(host !== 'other') {
$("#backup-target-s3-host").val(host); $("#backup-target-s3-host").val(host);
@ -302,5 +349,15 @@ function init_inputs(target_type) {
}); });
set_host($('#backup-target-s3-host-select').val()); set_host($('#backup-target-s3-host-select').val());
} }
} }
</script>
function compute_b2_url(){
if ($('#backup-target-b2-user').val() && $('#backup-target-b2-pass').val() && $('#backup-target-b2-bucket').val()){
$('#backup-target-b2-url').val('b2://' + $('#backup-target-b2-user').val() + ':' + $('#backup-target-b2-pass').val()
+ '@' + $('#backup-target-b2-bucket').val());
}else{
$('#backup-target-b2-url').val('');
}
}
</script>