Fixed and improved frontend

Co-authored-by: LarsVomMars <lars@kroenner.eu>

7 files changed, 123 insertions, 65 deletions

diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index 3f1a42b..9c52ac2 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -1,5 +1,4 @@
 html, body {
-    max-width: 100vw;
     overflow: visible;
 }
 
@@ -9,8 +8,6 @@ html, body {
 
 .prettyprint, .preview {
     position: absolute;
-    height: 100%;
-    max-width: 100vmin;
     border: none !important;
     overflow: visible;
 }
diff --git a/src/main/resources/css/layout.css b/src/main/resources/css/layout.css
index 5db8bff..cb0850e 100644
--- a/src/main/resources/css/layout.css
+++ b/src/main/resources/css/layout.css
@@ -1,12 +1,56 @@
-html, body {
+body {
+    margin: 0 auto;
+}
+
+.main {
     font-family: Arial, Helvetica, sans-serif;
     color: #424242;
     padding: 0;
     margin: 0;
-    min-width: 100vmin;
-    min-height: 100%;
+}
+
+*:focus {
+    outline: none;
 }
 
 button {
     color: #424242;
 }
+
+.flex {
+    display: flex;
+    flex-flow: wrap column;
+    width: 100vw !important;
+    height: 100vh !important;
+    overflow: hidden;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex div {
+    margin: 10px;
+}
+
+.flex form input, .flex button {
+    background: none;
+    padding: 5px;
+    border: 1px solid #424242;
+    border-radius: 10px;
+}
+
+.flex .button {
+    text-decoration: none;
+    background: none;
+    padding: 5px;
+    border: 1px solid #424242;
+    border-radius: 10px;
+}
+
+.flex .button:visited {
+    color: #424242;
+}
+
+.username {
+    color: #7f8c8d;
+}
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 1247ed1..024f74f 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -38,6 +38,7 @@ drop.addEventListener('drop', e => {
 
         setListeners();
 
+        // TODO: Add empty directory upload support
         const iterateFiles = subItem => {
             if (subItem.isDirectory) {
                 let directoryReader = subItem.createReader();
@@ -88,13 +89,13 @@ function setListeners() {
         const filename = element.getAttribute("data-path");
         const extension = /(?:\.([^.]+))?$/.exec(filename)[1].toLowerCase();
 
-        if (images.indexOf(extension) > -1) {
+        if (images.includes(extension)) {
             element.setAttribute("data-bp", filename);
             element.setAttribute("data-image", "");
-        } else if (videos.indexOf(extension) > -1) {
+        } else if (videos.includes(extension)) {
             element.setAttribute("data-src", filename);
             element.setAttribute("data-video", "");
-        } else if (audio.indexOf(extension) > -1) {
+        } else if (audio.includes(extension)) {
             element.setAttribute("data-src", filename);
             element.setAttribute("data-audio", "");
         }
@@ -125,7 +126,7 @@ function setListeners() {
         });
     });
 
-    //audio // TODO: Fix IOException and scrubbing issues with chromium based browsers
+    // audio // TODO: Fix IOException and scrubbing issues with chromium based browsers
     document.querySelectorAll("[data-audio]").forEach(element => {
         element.addEventListener("click", audio => {
             BigPicture({
@@ -149,9 +150,11 @@ function setListeners() {
             const request = new XMLHttpRequest();
             const parent = e.target.closest("tr");
             const fileName = parent.getAttribute("data-href") || parent.getAttribute("data-path");
-            request.open("POST", `/delete/${path}/${fileName}`);
-            request.send();
-            parent.remove();
+            if (confirm(`Do you really want to delete: ${fileName}?`)) {
+                request.open("POST", `/delete/${path}/${fileName}`);
+                request.send();
+                parent.remove();
+            } else console.log("File not deleted!")
         })
     });
 
diff --git a/src/main/resources/views/index.rocker.html b/src/main/resources/views/index.rocker.html
index a0b4035..72ec4d2 100644
--- a/src/main/resources/views/index.rocker.html
+++ b/src/main/resources/views/index.rocker.html
@@ -1,19 +1,17 @@
 @args (String username)
 
 @layout.template("Index", RockerContent.NONE, RockerContent.NONE) -> {
-<h1>Welcome to Kloud <i>@username</i>!</h1>
+<div class="flex">
+    <h1>Welcome to Kloud <i class="username">@username</i>!</h1>
 
-@if(username.length() > 0) {
-<a href="/logout">
-    <button>Logout</button>
-</a>
-} else {
-<a href="/login">
-    <button>Login</button>
-</a>
-}
+    <div>
+        @if(username.length() > 0) {
+        <a class="button" href="/logout">Logout</a>
+        } else {
+        <a class="button" href="/login">Login</a>
+        }
 
-<a href="/files/">
-    <button>Files</button>
-</a>
+        <a class="button" href="/files/">Files</a>
+    </div>
+</div>
 }
diff --git a/src/main/resources/views/layout.rocker.html b/src/main/resources/views/layout.rocker.html
index f292e24..3e3fb5e 100644
--- a/src/main/resources/views/layout.rocker.html
+++ b/src/main/resources/views/layout.rocker.html
@@ -13,8 +13,9 @@
     <title>@title</title>
 </head>
 <body>
-@content
-
+<div class="main">
+    @content
+</div>
 <script src="/js/prefetch.js"></script>
 @js
 </body>
diff --git a/src/main/resources/views/login.rocker.html b/src/main/resources/views/login.rocker.html
index 6cd28f2..feddbbc 100644
--- a/src/main/resources/views/login.rocker.html
+++ b/src/main/resources/views/login.rocker.html
@@ -6,24 +6,32 @@
 }
 
 @layout.template("Login", RockerContent.NONE, js) -> {
-<form action="/login" id="login-form" method="post">
-    <div>
-        <label for="username">Username:</label>
-        <input id="username" name="username" type="text"/>
-    </div>
-    <div>
-        <label for="password">Password:</label>
-        <input id="password" name="password" type="password"/>
-    </div>
+<div class="flex">
+    <h1>Login</h1>
 
-    <button type="submit">Login</button>
+    <form action="/login" method="post">
+        <div>
+            <label for="username">Username:</label>
+            <input autocomplete="off" autofocus id="username" name="username" required type="text"/>
+        </div>
+        <div>
+            <label for="password">Password:</label>
+            <input id="password" name="password" required type="password"/>
+        </div>
 
-    @if(message.length() > 0) {
-    <small>@message</small>
-    }
+        <div>
+            @if(message.length() > 0) {
+            <small>@message</small>
+            }
 
-    @if(counter > 0) {
-    <small id="tryAgain">Please try again in <span id="counter">@counter</span> seconds.</small>
-    }
-</form>
+            @if(counter > 0) {
+            <small id="tryAgain">Please try again in <span id="counter">@counter</span> seconds.</small>
+            }
+        </div>
+
+        <div>
+            <button type="submit">Login</button>
+        </div>
+    </form>
+</div>
 }
diff --git a/src/main/resources/views/setup.rocker.html b/src/main/resources/views/setup.rocker.html
index f9c8357..595f84a 100644
--- a/src/main/resources/views/setup.rocker.html
+++ b/src/main/resources/views/setup.rocker.html
@@ -1,25 +1,32 @@
 @args (String message)
 
 @layout.template("Setup", RockerContent.NONE, RockerContent.NONE) -> {
-<form action="/setup" method="post">
-    <div>
-        <label for="username">Username:</label>
-        <input id="username" name="username" required type="text"/>
-    </div>
-    <div>
-        <label for="password">Password:</label>
-        <input id="password" name="password" required type="password"/>
-    </div>
-    <div>
-        <label for="verifyPassword">Verify password:</label>
-        <input id="verifyPassword" name="verifyPassword" required type="password"/>
-    </div>
-    <div>
-        <button type="submit">Setup</button>
-    </div>
-</form>
+<div class="flex">
+    <h1>Setup</h1>
 
-@if (message.length() > 0) {
-<small>@message</small>
-}
+    <form action="/setup" method="post">
+        <div>
+            <label for="username">Username:</label>
+            <input autocomplete="off" autofocus id="username" name="username" required type="text"/>
+        </div>
+        <div>
+            <label for="password">Password:</label>
+            <input id="password" name="password" required type="password"/>
+        </div>
+        <div>
+            <label for="verifyPassword">Verify password:</label>
+            <input id="verifyPassword" name="verifyPassword" required type="password"/>
+        </div>
+
+        <div>
+            @if (message.length() > 0) {
+            <small>@message</small>
+            }
+        </div>
+
+        <div>
+            <button type="submit">Setup</button>
+        </div>
+    </form>
+</div>
 }