mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2025-02-22 05:09:03 +00:00
c3d61733af
Added iamdustan/smoothscroll polyfill in dashboard pages. This will polyfill smooth scroll (when executed programmatically) for older browers. No-JS uploader's notice button when on private mode will now also say "Log in to upload", although auth page will still require JS. All front-end buttons will now use outlined version. I'm lovin' it. Auth page will now show a loading spinner if the user has a saved token. Afterwards, they will still be redirected to dashboard. Better error handlers in home, dashboard, and auth pages. Removed <hr> from uploads & users lists in dashboard. "Manage your token" menu will no longer try to make an API request prior to displaying its page. Reloading the page will already trigger token verification anyway. Updated public/images/fb_share.png. Updated README.md. A few other tweaks.
266 lines
11 KiB
Plaintext
266 lines
11 KiB
Plaintext
{% extends "_layout.njk" %}
|
|
|
|
{% set maxSizeInt = config.uploads.maxSize | int %}
|
|
{% set urlMaxSizeInt = config.uploads.urlMaxSize | int %}
|
|
{% set urlDisclaimerMessage = config.uploads.urlDisclaimerMessage %}
|
|
{% set urlExtensionsFilterMode = config.uploads.urlExtensionsFilterMode %}
|
|
{% set urlExtensionsFilter = config.uploads.urlExtensionsFilter %}
|
|
{% set temporaryUploadAges = config.uploads.temporaryUploadAges %}
|
|
|
|
{% 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/misc/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/misc/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" class="is-relative">
|
|
<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">
|
|
Maximum upload size per file is <span>{{ maxSizeInt }} MB</span>
|
|
</h3>
|
|
|
|
<div class="columns is-gapless">
|
|
<div class="column is-hidden-mobile"></div>
|
|
<div class="column">
|
|
<a id="loginToUpload" class="button is-danger is-outlined is-fullwidth is-loading"></a>
|
|
<div id="albumDiv" class="field has-addons is-hidden">
|
|
<div class="control is-expanded">
|
|
<div class="select is-fullwidth">
|
|
<select id="albumSelect">
|
|
<option value="" selected>Upload to album</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="control">
|
|
<a id="createAlbum" class="button is-info is-outlined" 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 urlMaxSizeInt -%}
|
|
<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 urlMaxSizeInt -%}
|
|
<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 urlMaxSizeInt !== maxSizeInt -%}
|
|
Maximum file size per URL is <span id="urlMaxSize">{{ urlMaxSizeInt }} MB</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">
|
|
<a id="uploadUrls" class="button is-danger is-outlined 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">
|
|
<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">
|
|
<input id="fileLength" class="input is-fullwidth" type="number" min="0">
|
|
</div>
|
|
<p class="help"></p>
|
|
</div>
|
|
{%- if temporaryUploadAges and temporaryUploadAges.length %}
|
|
<div id="uploadAgeDiv" class="field is-hidden">
|
|
<label class="label">Upload age</label>
|
|
<div class="control">
|
|
<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">
|
|
<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">
|
|
<input id="parallelUploads" class="input is-fullwidth" type="number" name="parallelUploads" min="0">
|
|
</div>
|
|
<p class="help"></p>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Uploads history order</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select id="uploadsHistoryOrder">
|
|
<option value="default">Older files on top (default)</option>
|
|
<option value="0">Newer files on top</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p class="help">Newer files on top will use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Accessibility_Concerns" target="_blank" rel="noopener">a CSS technique</a>. Trying to select their texts manually from top to bottom will end up selecting the texts from bottom to top instead.</p>
|
|
</div>
|
|
<div class="field">
|
|
<label class="label">Load images for preview</label>
|
|
<div class="control">
|
|
<div class="select is-fullwidth">
|
|
<select id="previewImages">
|
|
<option value="default">Yes (default)</option>
|
|
<option value="0">No</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p class="help">By default, uploaded images will be loaded as their previews.</p>
|
|
</div>
|
|
<div class="field">
|
|
<p class="control">
|
|
<button id="saveConfig" type="submit" class="button is-danger is-outlined 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"></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 is-flex clipboard-js">
|
|
<span class="icon">
|
|
<i class="icon-clipboard"></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 %}
|