From 4614dd04ac13b30bbb0287196b05704fbc5b48bf Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Mon, 2 Sep 2024 15:18:14 +0200
Subject: [PATCH] basic setup styling

---
 src/pages/setup.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/pages/setup.vue b/src/pages/setup.vue
index e1a2b24b..8ca091c7 100644
--- a/src/pages/setup.vue
+++ b/src/pages/setup.vue
@@ -1,7 +1,15 @@
 <template>
   <main>
-    <div>
-      <h1>Welcome to your first setup of wg-easy !</h1>
+    <h1
+      class="text-4xl font-medium my-16 text-gray-700 dark:text-neutral-200 text-center"
+    >
+      <img src="/logo.png" width="32" class="inline align-middle dark:bg" />
+      <span class="align-middle">WireGuard</span>
+    </h1>
+    <div
+      class="shadow rounded-md bg-white dark:bg-neutral-700 mx-auto w-96 p-5 overflow-hidden mt-10 text-gray-700 dark:text-neutral-200"
+    >
+      <h2>Welcome to your first setup of wg-easy !</h2>
       <p>Please first enter an admin username and a strong password.</p>
       <form @submit="newAccount">
         <div>
@@ -12,6 +20,7 @@
             type="text"
             name="username"
             autocomplete="username"
+            class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none"
           />
         </div>
         <div>
@@ -22,13 +31,26 @@
             type="password"
             name="password"
             autocomplete="new-password"
+            class="px-3 py-2 text-sm dark:bg-neutral-700 text-gray-500 dark:text-gray-500 mb-5 border-2 border-gray-100 dark:border-neutral-800 rounded-lg w-full focus:border-red-800 dark:focus:border-red-800 dark:placeholder:text-neutral-400 outline-none"
           />
         </div>
         <div>
-          <label for="accept">I accept the condition.</label>
+          <label for="accept">I accept the condition</label>
           <input id="accept" type="checkbox" name="accept" />
         </div>
-        <button type="submit">Save</button>
+        <input
+          type="submit"
+          value="Save"
+          :class="[
+            {
+              'bg-red-800 dark:bg-red-800 hover:bg-red-700 dark:hover:bg-red-700 transition cursor-pointer':
+                password && username,
+              'bg-gray-200 dark:bg-neutral-800 cursor-not-allowed':
+                !password && !username,
+            },
+            'w-full rounded shadow py-2 text-sm text-white dark:text-white',
+          ]"
+        />
       </form>
     </div>
   </main>