Updates

* Some structure updates to the homepage and the No-JS uploader form. Making them both somewhat look better, especially in terms of spacing.

* Upload URLs form will now show an error alert when there the form is empty or only filled with whitespaces.

* Upload URLs form will now automatically remove empty lines or lines that consist of only whitespaces when the upload button is pressed.

README.md

@@ -1,6 +1,6 @@
 # lolisafe, a small safe worth protecting
 
-![safe.fiery.me](https://i.fiery.me/3zrP.png)
+![safe.fiery.me](https://i.fiery.me/hIty.png)
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/WeebDev/lolisafe/master/LICENSE)
 [![Chat / Support](https://img.shields.io/badge/Chat%20%2F%20Support-discord-7289DA.svg?style=flat-square)](https://discord.gg/5g6vgwn)

public/css/home.css

@@ -107,7 +107,12 @@
 }
 
 .uploads {
-  margin-bottom: .75rem;
+  padding-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.uploads.nojs {
+  margin-bottom: 0;
 }
 
 .uploads progress {

public/js/home.js

@@ -252,6 +252,7 @@ page.prepareDropzone = () => {
   })
 
   page.dropzone.on('addedfile', file => {
+    tabDiv.getElementsByClassName('uploads')[0].style.display = 'block'
     file.previewElement.querySelector('.name').innerHTML = file.name
   })
 
@@ -298,11 +299,21 @@ page.uploadUrls = async button => {
   if (button.classList.contains('is-loading')) { return }
   button.classList.add('is-loading')
 
+  await new Promise(async (resolve, reject) => {
     const albumid = page.album
     const previewsContainer = tabDiv.getElementsByClassName('uploads')[0]
-  const files = document.getElementById('urls').value
+    const urls = document.getElementById('urls').value
       .split(/\r?\n/)
-    .map(url => {
+      .filter(url => url.trim().length)
+    document.getElementById('urls').value = urls.join('\n')
+
+    if (!urls.length) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return reject('You have not entered any URLs.')
+    }
+
+    tabDiv.getElementsByClassName('uploads')[0].style.display = 'block'
+    const files = urls.map(url => {
       const previewTemplate = document.createElement('template')
       previewTemplate.innerHTML = page.previewTemplate.trim()
       const previewElement = previewTemplate.content.firstChild
@@ -314,7 +325,6 @@ page.uploadUrls = async button => {
       }
     })
 
-  await new Promise(resolve => {
     const post = async i => {
       if (i === files.length) { return resolve() }
       const file = files[i]
@@ -345,6 +355,8 @@ page.uploadUrls = async button => {
       post(i + 1)
     }
     post(0)
+  }).catch(error => {
+    swal('An error occurred!', error.toString(), 'error')
   })
 
   button.classList.remove('is-loading')

views/_globals.njk

@@ -13,7 +13,7 @@
   v2: Images and config files (manifest.json, browserconfig.xml, etc).
   v3: CSS and JS files (libs such as bulma, lazyload, etc).
 #}
-{% set v1 = "HrvcYD3KTh" %}
+{% set v1 = "dSRVE9qwPF" %}
 {% set v2 = "Ii3JYKIhb0" %}
 {% set v3 = "HrvcYD3KTh" %}
 

views/home.njk

@@ -46,7 +46,6 @@
               </a>
             </div>
           </div>
-          <div class="field">
           {% if urlMaxSize -%}
           <div id="tabs" class="tabs is-centered" style="display: none">
             <ul>
@@ -57,7 +56,7 @@
           {%- endif %}
           <div id="tab-files" class="tab-content" style="display: none">
             <div class="field dz-container"></div>
-              <div class="field uploads"></div>
+            <div class="field uploads" style="display: none"></div>
           </div>
           {% if urlMaxSize -%}
           <div id="tab-urls" class="tab-content" style="display: none">
@@ -77,11 +76,10 @@
                 </a>
               </div>
             </div>
-              <div class="field uploads"></div>
+            <div class="field uploads" style="display: none"></div>
           </div>
           {%- endif %}
         </div>
-        </div>
         <div class="column is-hidden-mobile"></div>
       </div>
 

views/nojs.njk

@@ -23,16 +23,13 @@
       <div class="columns is-gapless">
         <div class="column is-hidden-mobile"></div>
         <div class="column">
-          <div class="content">
           <p class="subtitle" style="font-size: 1rem">
             Files uploaded through this No-JS uploader will not be associated to your account, if you have any.
           </p>
-          </div>
-          <div class="content">
           {% if renderOptions.uploadDisabled -%}
           <a class="button is-danger" style="display: flex" href="auth">{{ renderOptions.uploadDisabled }}</a>
           {%- else -%}
-            <form id="form" action="" method="post" enctype="multipart/form-data">
+          <form id="form" class="field" action="" method="post" enctype="multipart/form-data">
             <div class="field">
               <input type="file" name="files[]" multiple="multiple" style="width: 100%">
             </div>
@@ -41,17 +38,10 @@
             </div>
           </form>
           {%- endif %}
-          </div>
-        </div>
-        <div class="column is-hidden-mobile"></div>
-      </div>
-
           {% if files -%}
-      <div id="uploads" style="display: block">
+          <div class="field uploads nojs">
             {% for file in files -%}
-        <div class="columns">
+            <div class="field">
-          <div class="column is-hidden-mobile"></div>
-          <div class="column">
               {% if errorMessage -%}
               <p class="error">{{ errorMessage | safe }}</p>
               {%- endif %}
@@ -61,11 +51,12 @@
               </p>
               {%- endif %}
             </div>
-          <div class="column is-hidden-mobile"></div>
-        </div>
             {% endfor %}
           </div>
           {%- endif %}
+        </div>
+        <div class="column is-hidden-mobile"></div>
+      </div>
 
       {% set plain_links = true %}
       {% include "_partial/links.njk" %}