ui: add landing page placeholder

options.go

@@ -1,7 +1,25 @@
 package bunker
 
+import (
+	"os"
+	"strings"
+)
+
 type DataDir string
 
 func (d DataDir) String() string {
 	return string(d)
 }
+
+var _debug map[string]bool
+
+func init() {
+	_debug = make(map[string]bool)
+	for _, v := range strings.Split(os.Getenv("DEBUG"), ",") {
+		_debug[strings.TrimSpace(v)] = true
+	}
+}
+
+func Debug(name string) bool {
+	return _debug[name]
+}

static.go

@@ -4,6 +4,8 @@ import (
 	"embed"
 	"io/fs"
 	"net/http"
+	"net/http/httputil"
+	"net/url"
 	"path"
 
 	"github.com/yankeguo/rg"
@@ -14,6 +16,11 @@ import (
 var STATIC embed.FS
 
 func InstallStaticToRouter(ur ufx.Router) {
-	f := rg.Must(fs.Sub(STATIC, path.Join("ui", ".output", "public")))
-	ur.ServeMux().Handle("/", http.FileServer(http.FS(f)))
+	if Debug("ui") {
+		proxy := httputil.NewSingleHostReverseProxy(rg.Must(url.Parse("http://localhost:3000")))
+		ur.ServeMux().Handle("/", proxy)
+	} else {
+		f := rg.Must(fs.Sub(STATIC, path.Join("ui", ".output", "public")))
+		ur.ServeMux().Handle("/", http.FileServer(http.FS(f)))
+	}
 }

ui/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: "cyan",
+    gray: "slate",
+  },
+});

ui/pages/index.vue

@@ -1 +1,62 @@
-<template></template>
+<script setup lang="ts">
+import type { FormError, FormSubmitEvent } from "#ui/types";
+
+const state = reactive({
+  username: undefined,
+  password: undefined,
+});
+
+const validate = (state: any): FormError[] => {
+  const errors = [];
+  if (!state.username) errors.push({ path: "username", message: "Required" });
+  if (!state.password) errors.push({ path: "password", message: "Required" });
+  return errors;
+};
+
+async function onSubmit(event: FormSubmitEvent<any>) {
+  // Do something with data
+  console.log(event.data);
+}
+</script>
+
+<template>
+  <div
+    class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center"
+  >
+    <div class="mb-12">
+      <div class="font-semibold font-mono text-4xl mb-4">Bunker System</div>
+      <div class="flex flex-row items-center">
+        <span class="me-2">by</span>
+        <UButton
+          size="sm"
+          icon="i-simple-icons-github"
+          variant="link"
+          to="https://github.com/yankeguo/bunker"
+          target="_blank"
+          label="yankeguo"
+        ></UButton>
+      </div>
+    </div>
+
+    <UCard class="w-80">
+      <UForm
+        :validate="validate"
+        :state="state"
+        class="space-y-4"
+        @submit="onSubmit"
+      >
+        <UFormGroup label="Username" name="username">
+          <UInput v-model="state.username" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="state.password" type="password" />
+        </UFormGroup>
+
+        <UButton type="submit">Sign In</UButton>
+      </UForm>
+    </UCard>
+
+    <div class="h-64"></div>
+  </div>
+</template>