sftpgo/templates/webclient/share.html
Nicola Murino c76a18168b
WebClient: add language switcher, complete localization support
Signed-off-by: Nicola Murino <nicola.murino@gmail.com>
2023-12-13 18:03:42 +01:00

241 lines
No EOL
12 KiB
HTML

<!--
Copyright (C) 2023 Nicola Murino
This WebUI uses the KeenThemes Mega Bundle, a proprietary theme:
https://keenthemes.com/products/templates-mega-bundle
KeenThemes HTML/CSS/JS components are allowed for use only within the
SFTPGo product and restricted to be used in a resealable HTML template
that can compete with KeenThemes products anyhow.
This WebUI is allowed for use only within the SFTPGo product and
therefore cannot be used in derivative works/products without an
explicit grant from the SFTPGo Team (support@sftpgo.com).
-->
{{template "base" .}}
{{- define "page_body"}}
<div class="card shadow-sm">
<div class="card-header bg-light">
<h3 {{if .IsAdd}}data-i18n="title.add_share"{{else}}data-i18n="title.update_share"{{end}} class="card-title text-primary"></h3>
</div>
<div class="card-body">
{{- template "errmsg" .Error}}
<form id="share_form" action="{{.CurrentURL}}" method="POST" autocomplete="off">
<div class="form-group row">
<label for="name" data-i18n="general.name" class="col-md-3 col-form-label">Name</label>
<div class="col-md-9">
<input id="name" type="text" class="form-control" placeholder="" name="name" value="{{.Share.Name}}"
maxlength="255" autocomplete="nope" required {{if not .IsAdd}}readonly{{end}} />
</div>
</div>
<div class="form-group row mt-10">
<label for="scope" data-i18n="share.scope" class="col-md-3 col-form-label">Scope</label>
<div class="col-md-9">
<select id="scope" name="scope" class="form-select" data-control="i18n-select2" data-hide-search="true">
<option data-i18n="share.scope_read" value="1" {{if eq .Share.Scope 1 }}selected{{end}}>Read</option>
<option data-i18n="share.scope_write" value="2" {{if eq .Share.Scope 2 }}selected{{end}}>Write</option>
<option data-i18n="share.scope_read_write" value="3" {{if eq .Share.Scope 3 }}selected{{end}}>Read/Write</option>
</select>
<div data-i18n="share.scope_help" class="form-text">
For scope "Write" and "Read/Write" you have to define one path and it must be a directory
</div>
</div>
</div>
<div class="card card-rounded mt-10">
<div class="card-header bg-light">
<h3 data-i18n="share.paths" class="card-title">Paths</h3>
</div>
<div class="card-body">
<div id="paths">
<div class="form-group">
<div data-repeater-list="paths">
{{- range $idx, $val := .Share.Paths}}
<div data-repeater-item>
<div class="form-group row">
<div class="col-md-9">
<input data-i18n="[placeholder]share.path_help" type="text" class="form-control mt-3 mt-md-8"
name="path" value="{{$val}}" />
</div>
<div class="col-md-3">
<a data-i18n="general.delete" href="#" data-repeater-delete
class="btn btn-light-danger mt-3 mt-md-8">
<i class="ki-duotone ki-trash fs-5">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
</i>
Delete
</a>
</div>
</div>
</div>
{{- else}}
<div data-repeater-item>
<div class="form-group row">
<div class="col-md-9">
<input data-i18n="[placeholder]share.path_help" type="text" class="form-control mt-3 mt-md-8"
name="path" value="" />
</div>
<div class="col-md-3">
<a data-i18n="general.delete" href="#" data-repeater-delete
class="btn btn-light-danger mt-3 mt-md-8">
<i class="ki-duotone ki-trash fs-5">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
</i>
Delete
</a>
</div>
</div>
</div>
{{- end}}
</div>
</div>
<div class="form-group mt-5">
<a data-i18n="general.add" href="#" data-repeater-create class="btn btn-light-primary">
<i class="ki-duotone ki-plus fs-3"></i>
Add
</a>
</div>
</div>
</div>
</div>
<div class="form-group row mt-10">
<label for="password" data-i18n="login.password" class="col-md-3 col-form-label">Password</label>
<div class="col-md-9">
<input id="password" type="password" class="form-control" name="password" autocomplete="new-password"
placeholder="" spellcheck="false" value="{{.Share.Password}}" />
<div data-i18n="share.password_help" class="form-text">
If set the share will be password-protected
</div>
</div>
</div>
<div class="form-group row mt-10">
<label for="id_expiration" data-i18n="share.expiration" class="col-md-3 col-form-label">Expiration</label>
<div class="col-md-9 d-flex">
<input data-i18n="[placeholder]share.expiration_help" id="id_expiration" class="form-control" placeholder="Pick an expiration date" />
<button class="btn btn-icon btn-light-danger ms-2 d-none" id="id_expiration_clear">
<i class="ki-duotone ki-cross fs-1">
<span class="path1"></span>
<span class="path2"></span>
</i>
</button>
</div>
</div>
<div class="form-group row mt-10">
<label for="max_tokens" data-i18n="share.max_tokens" class="col-md-3 col-form-label">Max tokens</label>
<div class="col-md-9">
<input id="max_tokens" type="number" min="0" class="form-control" name="max_tokens" value="{{.Share.MaxTokens}}" />
<div data-i18n="share.max_tokens_help" class="form-text">
Maximum number of times this share can be accessed. 0 means no limit
</div>
</div>
</div>
<div class="form-group row mt-10">
<label for="allowed_ip" data-i18n="general.allowed_ip_mask" class="col-md-3 col-form-label">Allowed IP/Mask</label>
<div class="col-md-9">
<textarea id="allowed_ip" class="form-control" name="allowed_ip" rows="3"
placeholder="">{{.Share.GetAllowedFromAsString}}</textarea>
<div data-i18n="general.allowed_ip_mask_help" class="form-text">
Comma separated IP/Mask in CIDR format, for example "192.168.1.0/24,10.8.0.100/32"
</div>
</div>
</div>
<div class="form-group row mt-10">
<label for="description" data-i18n="general.description" class="col-md-3 col-form-label">Description</label>
<div class="col-md-9">
<textarea id="description" class="form-control" name="description" rows="3"
placeholder="">{{.Share.Description}}</textarea>
</div>
</div>
<div class="d-flex justify-content-end mt-12">
<input type="hidden" name="expiration_date" id="hidden_start_datetime" value="">
<input type="hidden" name="_form_token" value="{{.CSRFToken}}">
<button type="submit" id="form_submit" class="btn btn-primary px-10">
<span data-i18n="general.submit" class="indicator-label">
Submit
</span>
<span data-i18n="general.wait" class="indicator-progress">
Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
</span>
</button>
</div>
</form>
</div>
</div>
{{- end}}
{{- define "extra_js"}}
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}} src="{{.StaticURL}}/assets/plugins/custom/flatpickr/l10n/it.js"></script>
<script type="text/javascript" {{- if .CSPNonce}} nonce="{{.CSPNonce}}"{{- end}}>
$(document).on("i18nshow", function(){
initRepeater('#paths');
initRepeaterItems();
const picker = $('#id_expiration').flatpickr({
enableTime: false,
time_24hr: true,
formatDate: (date, format, locale) => {
return $.t('general.datetime', {
val: new Date(date),
formatParams: {
val: { year: 'numeric', month: 'numeric', day: 'numeric' },
}
});
},
defaultHour: 23,
defaultMinute: 59,
locale: i18next.language,
onChange: function(selectedDates, dateStr, instance) {
if (selectedDates.length > 0){
$('#id_expiration_clear').removeClass("d-none");
} else {
$('#id_expiration_clear').addClass("d-none");
}
}
});
//{{ if gt .Share.ExpiresAt 0 }}
let input_dt = moment('{{.Share.ExpiresAt }}', 'x').format('YYYY-MM-DD');
picker.setDate(input_dt, true);
//{{ end }}
$('#id_expiration_clear').on("click", function(e){
e.preventDefault();
picker.clear();
});
$("#share_form").submit(function (event) {
$('#hidden_start_datetime').val("");
let dt = picker.selectedDates;
if (dt.length > 0) {
let d = dt[0];
if (d) {
let dateString = moment.utc(d).format('YYYY-MM-DD HH:mm:ss');
$('#hidden_start_datetime').val(dateString);
}
}
let submitButton = document.querySelector('#form_submit');
submitButton.setAttribute('data-kt-indicator', 'on');
submitButton.disabled = true;
});
});
</script>
{{- end}}