sftpgo-mirror/templates/webclient/share.html
Nicola Murino 1e0b3a2a8c
web client: add share mode read/write
Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
2022-05-09 19:09:43 +02:00

212 lines
No EOL
10 KiB
HTML

{{template "base" .}}
{{define "title"}}{{.Title}}{{end}}
{{define "extra_css"}}
<link href="{{.StaticURL}}/vendor/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet">
<link href="{{.StaticURL}}/vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
{{end}}
{{define "page_body"}}
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">{{if .IsAdd}}Add a new share{{else}}Edit share{{end}}</h6>
</div>
<div class="card-body">
{{if .Error}}
<div class="card mb-4 border-left-warning">
<div class="card-body text-form-error">{{.Error}}</div>
</div>
{{end}}
<form id="share_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">
<div class="form-group row">
<label for="idName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="idName" name="name" placeholder=""
value="{{.Share.Name}}" maxlength="255" autocomplete="nope" required {{if not .IsAdd}}readonly{{end}}>
</div>
</div>
<div class="form-group row">
<label for="idScope" class="col-sm-2 col-form-label">Scope</label>
<div class="col-sm-10">
<select class="form-control selectpicker" id="idScope" name="scope" aria-describedby="scopeHelpBlock">
<option value="1" {{if eq .Share.Scope 1 }}selected{{end}}>Read</option>
<option value="2" {{if eq .Share.Scope 2 }}selected{{end}}>Write</option>
<option value="3" {{if eq .Share.Scope 3 }}selected{{end}}>Read/Write</option>
</select>
<small id="scopeHelpBlock" class="form-text text-muted">
For scope "Write" and "Read&Write" you have to define one path and it must be a directory
</small>
</div>
</div>
<div class="card bg-light mb-3">
<div class="card-header">
Paths
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-md-12 form_field_path_outer">
{{range $idx, $val := .Share.Paths}}
<div class="row form_field_path_outer_row">
<div class="form-group col-md-11">
<input type="text" class="form-control" id="idPath{{$idx}}" name="paths"
placeholder="file or directory path, i.e. /dir or /dir/file.txt" value="{{$val}}" maxlength="255">
</div>
<div class="form-group col-md-1">
<button class="btn btn-circle btn-danger remove_path_btn_frm_field">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
{{else}}
<div class="row form_field_path_outer_row">
<div class="form-group col-md-11">
<input type="text" class="form-control" id="idPath0" name="paths"
placeholder="file or directory path, i.e. /dir or /dir/file.txt" value="" maxlength="512">
</div>
<div class="form-group col-md-1">
<button class="btn btn-circle btn-danger remove_path_btn_frm_field">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
{{end}}
</div>
</div>
<div class="row mx-1">
<button type="button" class="btn btn-secondary add_new_path_field_btn">
<i class="fas fa-plus"></i> Add a path
</button>
</div>
</div>
</div>
<div class="form-group row">
<label for="idPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="idPassword" name="password" placeholder=""
value="{{.Share.Password}}" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
If set the share will be password-protected
</small>
</div>
</div>
<div class="form-group row">
<label for="idExpiration" class="col-sm-2 col-form-label">Expiration</label>
<div class="col-sm-10 input-group date" id="expirationDateTimePicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="idExpiration"
data-target="#expirationDateTimePicker" placeholder="none">
<div class="input-group-append" data-target="#expirationDateTimePicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fas fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group row">
<label for="idMaxTokens" class="col-sm-2 col-form-label">Max tokens</label>
<div class="col-sm-10">
<input type="number" min="0" class="form-control" id="idMaxTokens" name="max_tokens" placeholder=""
value="{{.Share.MaxTokens}}" aria-describedby="maxTokensHelpBlock">
<small id="maxTokensHelpBlock" class="form-text text-muted">
Maximum number of times this share can be accessed. 0 means no limit
</small>
</div>
</div>
<div class="form-group row">
<label for="idAllowedIP" class="col-sm-2 col-form-label">Allowed IP/Mask</label>
<div class="col-sm-10">
<textarea class="form-control" id="idAllowedIP" name="allowed_ip" rows="3" placeholder=""
aria-describedby="allowedIPHelpBlock">{{.Share.GetAllowedFromAsString}}</textarea>
<small id="allowedIPHelpBlock" class="form-text text-muted">
Comma separated IP/Mask in CIDR format, for example "192.168.1.0/24,10.8.0.100/32"
</small>
</div>
</div>
<div class="form-group row">
<label for="idDescription" class="col-sm-2 col-form-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="idDescription" name="description" rows="3">{{.Share.Description}}</textarea>
</div>
</div>
<input type="hidden" name="expiration_date" id="hidden_start_datetime" value="">
<input type="hidden" name="_form_token" value="{{.CSRFToken}}">
<button type="submit" class="btn btn-primary float-right mt-3 px-5">Submit</button>
</form>
</div>
</div>
{{end}}
{{define "extra_js"}}
<script src="{{.StaticURL}}/vendor/moment/js/moment.min.js"></script>
<script src="{{.StaticURL}}/vendor/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="{{.StaticURL}}/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#expirationDateTimePicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm',
sideBySide: true,
minDate: moment(),
buttons: {
showClear: false,
showClose: true,
showToday: false
}
});
{{ if gt .Share.ExpiresAt 0 }}
var input_dt = moment({{.Share.ExpiresAt }}).format('YYYY-MM-DD HH:mm');
$('#idExpiration').val(input_dt);
$('#expirationDateTimePicker').datetimepicker('viewDate', input_dt);
{{ end }}
$("#share_form").submit(function (event) {
var dt = $('#idExpiration').val();
if (dt) {
var d = $('#expirationDateTimePicker').datetimepicker('viewDate');
if (d) {
var dateString = moment.utc(d).format('YYYY-MM-DD HH:mm:ss');
$('#hidden_start_datetime').val(dateString);
} else {
$('#hidden_start_datetime').val("");
}
} else {
$('#hidden_start_datetime').val("");
}
return true;
});
$("body").on("click", ".add_new_path_field_btn", function () {
var index = $(".form_field_path_outer").find(".form_field_path_outer_row").length;
while (document.getElementById("idPath"+index) != null){
index++;
}
$(".form_field_path_outer").append(`
<div class="row form_field_path_outer_row">
<div class="form-group col-md-11">
<input type="text" class="form-control" id="idPath${index}" name="paths"
placeholder="file or directory path, i.e. /dir or /dir/file.txt" value="" maxlength="512">
</div>
<div class="form-group col-md-1">
<button class="btn btn-circle btn-danger remove_path_btn_frm_field">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
`);
});
$("body").on("click", ".remove_path_btn_frm_field", function () {
$(this).closest(".form_field_path_outer_row").remove();
});
});
</script>
{{end}}