4 files changed, 66 insertions, 52 deletions
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>
 }