filesafe/views/home.njk
Bobby Wibowo 264bd88e88
Updated
Improved performance of /api/users/:id (admin's manage users).

Promisify fs.writeFile.

Improved performance of /api/stats.
By a lot in Linux, cause uploads size will be deferred to "du" binary.
In addition, total usage of whichever disk uploads path resides on will
also be queried using "df" binary.
Non-Linux will have to rely on manual calculation by querying DB
for each upload's size.
But logics related to uploads stats were also improved to be almost
twice as fast as before.

Improved parsing of /api/stats results on dashboard.js.
This allows ease of extending server's response by not having to update
dashboard.js by much, if at all.

Improved codes relating to item menus in dashboard's sidebar.
Finally much cleaner now 👍

No longer use /api/upload/delete API route from dashboard.
Single file deletion and bulk files deletion, both from uploads list or
by names, will now properly use a single function that will use
/api/upload/bulkdelete API route.

/api/upload/delete will still be kept indefinitely for backward support.

Fixed oddities with Select all checkbox.

Replaced all instances of modifying HTML element's style attribute with
adding/removing is-hidden CSS helper class.

Rephrased all instances of "files" to "uploads" in any display strings.

Fixed notice message when server is on private mode.

A few other improvements.
2019-09-10 23:31:27 +07:00

231 lines
9.2 KiB
Plaintext

{% extends "_layout.njk" %}
{% block endmeta %}
{{ super() }}
{% if globals.google_site_verification %}
<meta name="google-site-verification" content="{{ globals.google_site_verification }}" />
{% endif %}
{% endblock %}
{% block stylesheets %}
{{ super() }}
<link rel="stylesheet" href="libs/fontello/fontello.css?v={{ globals.v3 }}">
<link rel="stylesheet" href="css/sweetalert.css?v={{ globals.v1 }}">
<link rel="stylesheet" href="css/home.css?v={{ globals.v1 }}">
{% endblock %}
{% block scripts %}
{{ super() }}
<script src="libs/sweetalert/sweetalert.min.js?v={{ globals.v3 }}"></script>
<script src="libs/dropzone/dropzone.min.js?v={{ globals.v3 }}"></script>
<script src="libs/axios/axios.min.js?v={{ globals.v3 }}"></script>
<script src="libs/clipboard.js/clipboard.min.js?v={{ globals.v3 }}"></script>
<script src="libs/lazyload/lazyload.min.js?v={{ globals.v3 }}"></script>
<script src="js/home.js?v={{ globals.v1 }}"></script>
<script src="js/s/utils.js?v={{ globals.v1 }}"></script>
{# We assign an ID for this so that the script can find out version string for render images #}
<script id="renderScript" data-version="{{ globals.v4 }}" src="js/s/render.js?v={{ globals.v1 }}"></script>
{% endblock %}
{% block content %}
{{ super() }}
<section id="home" class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<p id="b">
<img class="logo" alt="logo" src="images/logo_smol.png?v={{ globals.v2 }}">
</p>
<h1 class="title">{{ globals.name }}</h1>
<h2 class="subtitle">{{ globals.home_subtitle | safe }}</h2>
<h3 id="maxSize" class="subtitle"></h3>
<div class="columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<button id="loginToUpload" class="button is-danger is-fullwidth is-loading"></button>
<div id="albumDiv" class="field has-addons is-hidden">
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="albumSelect"></select>
</div>
</div>
<div class="control">
<a id="createAlbum" class="button is-breeze" title="Create new album">
<i class="icon-plus"></i>
</a>
</div>
</div>
<div id="tabs" class="tabs is-centered is-boxed is-hidden">
<ul>
<li data-id="tab-files" class="is-active">
<a>
<span class="icon is-small"><i class="icon-docs"></i></span>
<span>Files</span>
</a>
</li>
{% if urlMaxSize -%}
<li data-id="tab-urls">
<a>
<span class="icon is-small"><i class="icon-link"></i></span>
<span>URLs</span>
</a>
</li>
{%- endif %}
<li data-id="tab-config">
<a>
<span class="icon is-small"><i class="icon-cog-alt"></i></span>
<span>Config</span>
</a>
</li>
</ul>
</div>
<div id="tab-files" class="tab-content is-hidden">
<div class="field dz-container"></div>
<div class="field uploads"></div>
</div>
{% if urlMaxSize -%}
<div id="tab-urls" class="tab-content is-hidden">
<div class="field">
<div class="control">
<textarea id="urls" class="textarea" rows="2"></textarea>
</div>
<p class="help">
{% if urlMaxSize !== maxSize -%}
Maximum file size per URL is <span id="urlMaxSize">{{ urlMaxSize }}</span>.
{%- endif %}
{% if urlExtensionsFilter.length and (urlExtensionsFilterMode === 'blacklist') -%}
Blacklisted extensions: {{ urlExtensionsFilter | join(', ') }}.
{%- elif urlExtensionsFilter.length and (urlExtensionsFilterMode === 'whitelist') -%}
Whitelisted extensions: {{ urlExtensionsFilter | join(', ') }}.
{%- endif %}
{%- if urlDisclaimerMessage %}
{{ urlDisclaimerMessage | safe }}
{% endif -%}
</p>
</div>
<div class="field">
<div class="control is-expanded">
<a id="uploadUrls" class="button is-danger is-fullwidth is-unselectable">
<span class="icon">
<i class="icon-upload-cloud"></i>
</span>
<span>Upload URLs</span>
</a>
</div>
</div>
<div class="field uploads"></div>
</div>
{%- endif %}
<div id="tab-config" class="tab-content is-hidden">
<form>
<div class="field">
<label class="label">File size display</label>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="siBytes">
<option value="default">1000 B = 1 kB = 1 Kilobyte (default)</option>
<option value="0">1024 B = 1 KiB = 1 Kibibyte</option>
</select>
</div>
</div>
<p class="help">This will be used in our homepage, dashboard, and album public pages.</p>
</div>
<div id="fileLengthDiv" class="field is-hidden">
<label class="label">File identifier length</label>
<div class="control is-expanded">
<input id="fileLength" class="input is-fullwidth" type="number" min="0">
</div>
<p class="help"></p>
</div>
{%- if temporaryUploadAges %}
<div id="uploadAgeDiv" class="field is-hidden">
<label class="label">Upload age</label>
<div class="control is-expanded">
<div class="select is-fullwidth">
<select id="uploadAge"></select>
</div>
</div>
<p class="help">This allows your files to automatically be deleted after a certain period of time.</p>
</div>
{%- endif %}
<div id="chunkSizeDiv" class="field">
<label class="label">Upload chunk size (MB)</label>
<div class="control is-expanded">
<input id="chunkSize" class="input is-fullwidth" type="number" min="0">
</div>
<p class="help"></p>
</div>
<div id="parallelUploadsDiv" class="field">
<label class="label">Parallel uploads</label>
<div class="control is-expanded">
<input id="parallelUploads" class="input is-fullwidth" type="number" name="parallelUploads" min="0">
</div>
<p class="help"></p>
</div>
<div class="field">
<p class="control is-expanded">
<button id="saveConfig" type="submit" class="button is-danger is-fullwidth">
<span class="icon">
<i class="icon-floppy"></i>
</span>
<span>Save & reload</span>
</button>
</p>
<p class="help">
This configuration will only be used in this browser.<br>
After reloading the page, some of them will also be applied to the ShareX config that you can download by clicking on the ShareX icon below.
</p>
</div>
</form>
</div>
</div>
<div class="column is-hidden-mobile"></div>
</div>
<div id="tpl" class="is-hidden">
<div class="field">
<i class="icon is-hidden"></i>
<img class="is-unselectable is-hidden">
<p class="name is-unselectable"></p>
<progress class="progress is-small is-danger" max="100" value="0"></progress>
<p class="error"></p>
<p class="link">
<a target="_blank" rel="noopener"></a>
</p>
<p class="help expiry-date is-hidden"></p>
<p class="clipboard-mobile is-hidden">
<a class="button is-small is-info is-outlined clipboard-js" style="display: flex">
<span class="icon">
<i class="icon-clipboard-1"></i>
</span>
<span>Copy link to clipboard</span>
</a>
</p>
</div>
</div>
<h3 class="subtitle">
<a href="auth" id="loginLinkText"></a>
</h3>
{% include "_partial/links.njk" %}
{% if gitHash -%}
<div class="git-commit columns is-gapless">
<div class="column is-hidden-mobile"></div>
<div class="column">
<span>Git commit: </span><a href="https://github.com/BobbyWibowo/lolisafe/commit/{{ gitHash }}" target="_blank" rel="noopener">{{ gitHash }}</a>
</div>
<div class="column is-hidden-mobile"></div>
</div>
{%- endif %}
</div>
</div>
</section>
{% include "_partial/noscript.njk" %}
{% endblock %}