add setup template

2026-05-24 09:28:37 +00:00 · 2023-11-17 10:03:35 +01:00 · 2023-11-17 10:03:35 +01:00 · 984a3de5cb
commit 984a3de5cb
parent f36d2d0c93
3 changed files with 253 additions and 5005 deletions
--- a/src/ui/static/css/dashboard.css
+++ b/src/ui/static/css/dashboard.css
--- a/src/ui/templates/login.html
+++ b/src/ui/templates/login.html
@ -6,7 +6,7 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>BunkerWeb UI</title>
+    <title>BunkerWeb UI | Log in</title>
    <link href="images/favicon.ico" rel="icon" type="image/x-icon" />
    <link rel="stylesheet" href="css/dashboard.css" />
    <link rel="stylesheet" href="css/login.css" />
@ -69,7 +69,9 @@
      <div
        class="mx-4 lg:mx-0 col-span-2 lg:col-span-1 bg-none lg:bg-gray-50 h-full flex flex-col items-center justify-center"
      >
-        <div class="bg-gray-50 rounded px-12 py-16 w-full max-w-[400px]">
+        <div
+          class="bg-gray-50 rounded px-4 sm:px-12 py-16 w-full max-w-[400px]"
+        >
          <div class="flex justify-center">
            <img
              class="lg:hidden max-w-60 max-h-30 mb-6"
@ -97,6 +99,7 @@
              >
                Username
              </h5>
+              <label class="sr-only" for="username">username</label>
              <input
                type="username"
                id="username"
@ -115,6 +118,7 @@
              >
                Password
              </h5>
+              <label class="sr-only" for="password">password</label>
              <input
                type="password"
                id="password"
--- a/src/ui/templates/setup.html
+++ b/src/ui/templates/setup.html
@ -0,0 +1,246 @@
+<!DOCTYPE html>
+{% block content %}
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>BunkerWeb UI | Setup</title>
+    <link href="images/favicon.ico" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="css/dashboard.css" />
+    <link rel="stylesheet" href="css/login.css" />
+  </head>
+  <body>
+    <div
+      data-loader
+      class="fixed z-[10000] transition duration-300 h-screen w-screen bg-primary flex justify-center align-middle items-center"
+    >
+      <img
+        data-loader-img
+        src="images/logo-menu-2.png"
+        class="duration-300 w-40 h-12 sm:w-50 sm:h-14 md:w-60 md:h-16 lg:w-80 lg:h-24 inline transition-all"
+        alt="main logo"
+      />
+    </div>
+    {% with messages = get_flashed_messages(with_categories=true) %} {% if
+    messages %}
+    <!-- flash message-->
+    {% for category, message in messages %}
+    <div
+      data-flash-message
+      class="p-4 mb-1 md:mb-3 md:mr-3 z-[1001] flex flex-col fixed bottom-0 right-0 w-full md:w-1/2 max-w-[300px] min-h-20 bg-white rounded-lg dark:brightness-110 hover:scale-102 transition shadow-md break-words dark:bg-slate-850 dark:shadow-dark-xl bg-clip-border"
+    >
+      <button
+        data-close-flash-message
+        role="close alert message"
+        type="button"
+        class="absolute right-7 top-1.5"
+      >
+        <svg
+          class="cursor-pointer fill-gray-600 dark:fill-gray-300 dark:opacity-80 absolute h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z"
+          ></path>
+        </svg>
+      </button>
+      {% if category == 'error' %}
+      <h5 class="text-lg mb-0 text-red-500">Error</h5>
+      <p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
+        {{ message|safe }}
+      </p>
+      {% else %}
+      <h5 class="text-lg mb-0 text-green-500">Success</h5>
+      <p class="text-gray-700 dark:text-gray-300 mb-0 text-sm">
+        {{ message|safe }}
+      </p>
+      {% endif %}
+    </div>
+    {% endfor %}
+    <!-- end flash message-->
+    {% endif %} {% endwith %}
+    <!-- end flash message-->
+    <!--content -->
+    <main class="grid grid-cols-2 align-middle items-center min-h-screen">
+      <!--form -->
+      <div
+        class="mx-4 lg:mx-0 col-span-2 h-full flex flex-col items-center justify-center"
+      >
+        <div
+          class="bg-gray-50 rounded px-4 sm:px-12 pt-10 pb-4 w-full max-w-[400px]"
+        >
+          <div class="flex justify-center">
+            <img
+              class="max-w-60 max-h-30 mb-6"
+              src="images/BUNKERWEB-print-hd.png"
+              alt="logo"
+              class="logo"
+            />
+          </div>
+          <h1 class="block text-center font-bold dark:text-white mb-8 text-3xl">
+            Setup BunkerWeb
+          </h1>
+          <form action="/setup" method="POST" autocomplete="off">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <input
+              type="hidden"
+              name="next"
+              value="{{ request.values.get('next', '') }}"
+            />
+            <!-- username inpt-->
+            <div class="flex flex-col relative col-span-12 my-3">
+              <h5
+                class="text-lg my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
+              >
+                Username
+              </h5>
+              <label class="sr-only" for="ADMIN_USERNAME">Username</label>
+              <input
+                type="text"
+                id="ADMIN_USERNAME"
+                name="ADMIN_USERNAME"
+                class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                placeholder="enter username"
+                pattern="(.*?)"
+                maxlength="256"
+                required
+              />
+            </div>
+            <!-- end username inpt-->
+            <!-- password inpt-->
+            <div class="flex flex-col relative col-span-12 my-3">
+              <h5
+                class="text-lg my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
+              >
+                Password
+              </h5>
+              <label class="sr-only" for="ADMIN_PASSWORD">Password</label>
+              <input
+                type="password"
+                id="ADMIN_PASSWORD"
+                name="ADMIN_PASSWORD"
+                class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                placeholder="enter password"
+                pattern="(.*?)"
+                required
+              />
+            </div>
+            <!-- end password inpt-->
+            <!-- password inpt-->
+            <div class="flex flex-col relative col-span-12 my-3">
+              <h5
+                class="text-lg my-1 transition duration-300 ease-in-out dark:opacity-90 text-md font-bold m-0 dark:text-gray-300"
+              >
+                Hostname
+              </h5>
+              <label class="sr-only" for="HOSTNAME">Hostname</label>
+              <input
+                type="password"
+                id="HOSTNAME"
+                name="HOSTNAME"
+                class="col-span-12 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-300 disabled:opacity-75 focus:valid:border-green-500 focus:invalid:border-red-500 outline-none focus:border-primary text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-4 py-2 font-normal text-gray-700 transition-all placeholder:text-gray-500"
+                placeholder="enter hostname"
+                pattern="^https?:\/\/([a-zA-Z0-9.-]{1,255}(:((6553[0-5])|(655[0-2][0-9])|(65[0-4][0-9]{2})|(6[0-4][0-9]{3})|([1-5][0-9]{4})|([0-5]{0,5})|([0-9]{1,4})))?)(\/.*)$"
+                required
+              />
+            </div>
+            <!-- end password inpt-->
+            <div class="flex justify-center">
+              <button
+                type="submit"
+                id="setup"
+                name="setup"
+                value="setup"
+                class="tracking-wide my-4 dark:brightness-90 inline-block px-6 py-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-primary hover:bg-primary/80 focus:bg-primary/80 leading-normal text-sm ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md"
+              >
+                Setup
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <!-- end form -->
+    </main>
+    <script>
+      class Loader {
+        constructor() {
+          this.menuContainer = document.querySelector("[data-menu-container]");
+          this.logoContainer = document.querySelector("[data-loader]");
+          this.logoEl = document.querySelector("[data-loader-img]");
+          this.isLoading = true;
+          this.init();
+        }
+
+        init() {
+          this.loading();
+          window.addEventListener("load", (e) => {
+            setTimeout(() => {
+              this.logoContainer.classList.add("opacity-0");
+            }, 350);
+
+            setTimeout(() => {
+              this.isLoading = false;
+              this.logoContainer.classList.add("hidden");
+            }, 650);
+
+            setTimeout(() => {
+              this.logoContainer.remove();
+            }, 800);
+          });
+        }
+
+        loading() {
+          if ((this.isLoading = true)) {
+            setTimeout(() => {
+              this.logoEl.classList.toggle("scale-105");
+              this.loading();
+            }, 300);
+          }
+        }
+      }
+
+      class FlashMsg {
+        constructor() {
+          this.delayBeforeRemove = 8000;
+          this.init();
+        }
+
+        //remove flash message after this.delay if exist
+        init() {
+          window.addEventListener("DOMContentLoaded", () => {
+            try {
+              const flashEl = document.querySelector("[data-flash-message]");
+              setTimeout(() => {
+                try {
+                  flashEl.remove();
+                } catch (err) {}
+              }, this.delayBeforeRemove);
+            } catch (err) {}
+          });
+
+          window.addEventListener("click", (e) => {
+            try {
+              if (
+                e.target
+                  .closest("button")
+                  .hasAttribute("data-close-flash-message")
+              ) {
+                const closeBtn = e.target.closest("button");
+                const flashEl = closeBtn.closest("[data-flash-message]");
+                flashEl.remove();
+              }
+            } catch (err) {}
+          });
+        }
+      }
+
+      const setLoader = new Loader();
+      const setFlash = new FlashMsg();
+    </script>
+  </body>
+</html>
+
+{% endblock %}