Improve import form

template/html/import.html

@@ -16,13 +16,13 @@
     </ul>
 </section>
 
-<form action="{{ route "uploadOPML" }}" method="post" enctype="multipart/form-data">
-    <input type="hidden" name="csrf" value="{{ .csrf }}">
-
 {{ if .errorMessage }}
     <div class="alert alert-error">{{ t .errorMessage }}</div>
 {{ end }}
 
+<form action="{{ route "uploadOPML" }}" method="post" enctype="multipart/form-data">
+    <input type="hidden" name="csrf" value="{{ .csrf }}">
+
     <label for="form-file">{{ t "form.import.label.file" }}</label>
     <input type="file" name="file" id="form-file">
 
@@ -30,12 +30,12 @@
         <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.import" }}</button>
     </div>
 </form>
-
+<hr>
 <form action="{{ route "fetchOPML" }}" method="post" enctype="multipart/form-data">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 
     <label for="form-url">{{ t "form.import.label.url" }}</label>
-    <input type="url" name="url" id="form-url">
+    <input type="url" name="url" id="form-url" required>
 
     <div class="buttons">
         <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.import" }}</button>

template/views.go

@@ -940,13 +940,13 @@ var templateViewsMap = map[string]string{
     </ul>
 </section>
 
-<form action="{{ route "uploadOPML" }}" method="post" enctype="multipart/form-data">
-    <input type="hidden" name="csrf" value="{{ .csrf }}">
-
 {{ if .errorMessage }}
     <div class="alert alert-error">{{ t .errorMessage }}</div>
 {{ end }}
 
+<form action="{{ route "uploadOPML" }}" method="post" enctype="multipart/form-data">
+    <input type="hidden" name="csrf" value="{{ .csrf }}">
+
     <label for="form-file">{{ t "form.import.label.file" }}</label>
     <input type="file" name="file" id="form-file">
 
@@ -954,12 +954,12 @@ var templateViewsMap = map[string]string{
         <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.import" }}</button>
     </div>
 </form>
-
+<hr>
 <form action="{{ route "fetchOPML" }}" method="post" enctype="multipart/form-data">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 
     <label for="form-url">{{ t "form.import.label.url" }}</label>
-    <input type="url" name="url" id="form-url">
+    <input type="url" name="url" id="form-url" required>
 
     <div class="buttons">
         <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.import" }}</button>
@@ -1480,7 +1480,7 @@ var templateViewsMapChecksums = map[string]string{
 	"feed_entries":        "4bb6b96ba4d13dbaf22dcf6dd95ae36b6e5a0c99175d502865a164dc68fd4bae",
 	"feeds":               "d11fb629921e22bbf6d9ecb1adcc38922fafcee84f81c437abf47209544bd1c5",
 	"history_entries":     "9763d2120cfaeb78d406fdc029197fed2f7cfa7682970eeedae82ae79be65519",
-	"import":              "d7abfdc2cd4db38ed695d5fecd140e2e736d3633127589e1292736224dc23798",
+	"import":              "5eb56cecaa4d369b9acc991a82be7617710c551089a2e99d34ce8b6e5c37df0a",
 	"integrations":        "f85b4a48ab1fc13b8ca94bfbbc44bd5e8784f35b26a63ec32cbe82b96b45e008",
 	"login":               "2e72d2d4b9786641b696bedbed5e10b04bdfd68254ddbbdb0a53cca621d200c7",
 	"search_entries":      "d71849a4f2b0573c7c76ad0ea941812009e9f022de60895987a781d3e6f08a01",

ui/static/css/black.css

@@ -4,6 +4,10 @@ body {
     color: #efefef;
 }
 
+hr {
+    border-color: #555;
+}
+
 h1, h2, h3 {
     color: #aaa;
 }

ui/static/css/common.css

@@ -15,6 +15,13 @@ body {
     text-rendering: optimizeLegibility;
 }
 
+hr {
+    border: 0;
+    height: 0;
+    border-top: 1px dotted #ccc;
+    padding-bottom: 10px;
+}
+
 main {
     padding-left: 5px;
     padding-right: 5px;

ui/static/js.go

@@ -52,7 +52,7 @@ callback(event);};});}
 function toggleMainMenu(){let menu=document.querySelector(".header nav ul");if(DomHelper.isVisible(menu)){menu.style.display="none";}else{menu.style.display="block";}
 let searchElement=document.querySelector(".header .search");if(DomHelper.isVisible(searchElement)){searchElement.style.display="none";}else{searchElement.style.display="block";}}
 function onClickMainMenuListItem(event){let element=event.target;if(element.tagName==="A"){window.location.href=element.getAttribute("href");}else{window.location.href=element.querySelector("a").getAttribute("href");}}
-function handleSubmitButtons(){let elements=document.querySelectorAll("form");elements.forEach((element)=>{element.onsubmit=()=>{let button=document.querySelector("button");if(button){button.innerHTML=button.dataset.labelLoading;button.disabled=true;}};});}
+function handleSubmitButtons(){let elements=document.querySelectorAll("form");elements.forEach((element)=>{element.onsubmit=()=>{let button=element.querySelector("button");if(button){button.innerHTML=button.dataset.labelLoading;button.disabled=true;}};});}
 function setFocusToSearchInput(event){event.preventDefault();event.stopPropagation();let toggleSwitchElement=document.querySelector(".search-toggle-switch");if(toggleSwitchElement){toggleSwitchElement.style.display="none";}
 let searchFormElement=document.querySelector(".search-form");if(searchFormElement){searchFormElement.style.display="block";}
 let searchInputElement=document.getElementById("search-input");if(searchInputElement){searchInputElement.focus();searchInputElement.value="";}}
@@ -105,6 +105,6 @@ if("serviceWorker"in navigator){let scriptElement=document.getElementById("servi
 }
 
 var JavascriptsChecksums = map[string]string{
-	"app": "4d95eed76ba60a01f0366ef36b399d2b25f8a553941236f262b9d62e0fe66688",
+	"app": "3e73bb4f1be3c679e59dcf91560efdf8646d7d549e682e5ad83f3bb1a6eeeff7",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }

ui/static/js/app.js

@@ -45,7 +45,7 @@ function handleSubmitButtons() {
     let elements = document.querySelectorAll("form");
     elements.forEach((element) => {
         element.onsubmit = () => {
-            let button = document.querySelector("button");
+            let button = element.querySelector("button");
 
             if (button) {
                 button.innerHTML = button.dataset.labelLoading;