enh: UI and and authentication improvements

tphakala · Nov 8, 2024 · 1c3374d · 1c3374d
1 parent 1a55608
commit 1c3374d
Show file tree

Hide file tree

Showing 16 changed files with 515 additions and 330 deletions.
diff --git a/.air.toml b/.air.toml
@@ -8,10 +8,10 @@ tmp_dir = "tmp"  # Temporary directory for build artifacts
   pre_cmd = [
     """
     if command -v tailwindcss >/dev/null 2>&1; then
-      tailwindcss -i input.css -o assets/tailwind.css
+      tailwindcss -i tailwind.input.css -o assets/tailwind.css
     elif command -v npx >/dev/null 2>&1; then
       npm install -D daisyui
-      npx --yes tailwindcss@latest -i input.css -o assets/tailwind.css
+      npx --yes tailwindcss@latest -i tailwind.input.css -o assets/tailwind.css
     else
       echo "Error: Neither 'tailwindcss' binary nor 'npx' found. Please install Tailwind CSS."
       exit 1

diff --git a/Makefile b/Makefile
@@ -11,7 +11,7 @@ UNAME_S := $(shell uname -s)
 UNAME_M := $(shell uname -m)
 
 # Tailwind CSS
-TAILWIND_INPUT := input.css
+TAILWIND_INPUT := tailwind.input.css
 TAILWIND_OUTPUT := assets/tailwind.css
 
 # Function to determine library path based on target and host architecture

diff --git a/assets/audioplayer.js b/assets/audioplayer.js
@@ -126,7 +126,7 @@ htmx.on('htmx:afterSettle', function (event) {
                 if (!audio.paused && !playerOverlay.contains(e.target)) {
                     isDragging = true; 
                 }
-            });
+            }, {passive: true});
             spectrogramContainer.addEventListener('touchmove', (e) => {
                 if (isDragging && !playerOverlay.contains(e.target)) {
                     e.preventDefault(); // Prevent scrolling while dragging
@@ -136,14 +136,18 @@ htmx.on('htmx:afterSettle', function (event) {
                     audio.currentTime = pos * audio.duration;
                     updateProgress(); // Immediately update visuals
                 }
-            });
-            spectrogramContainer.addEventListener('touchend', () => { isDragging = false; });
+            }, {passive: true});
+            spectrogramContainer.addEventListener('touchend', () => { isDragging = false; }, {passive: true});
         }
 
-        // Show full version player when hovering over the spectrogram (desktop only)
         if (isDesktop()) {
+            // On desktop show full version player when hovering over the spectrogram
             spectrogramContainer.addEventListener('mouseenter', () => { playerOverlay.style.opacity = '1'; });
             spectrogramContainer.addEventListener('mouseleave', () => { playerOverlay.style.opacity = '0'; });
+            playerOverlay.style.opacity = '0';
+        } else {
+            // On mobile show always full version player controls
+            playerOverlay.style.opacity = '1';
         }
 
         // Mark this audio element as initialized
@@ -177,10 +181,6 @@ function isTouchDevice() {
 	return false;
 }
 
-function isMobileUserAgent() {
-	return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-};
-
 function isDesktop() {
-	return !isMobileUserAgent() && !isTouchDevice();
+	return !isTouchDevice();
 };
diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -4027,6 +4027,10 @@ html:has(.drawer-toggle:checked) {
   right: 0px;
 }
 
+.right-1 {
+  right: 0.25rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -4039,6 +4043,10 @@ html:has(.drawer-toggle:checked) {
   top: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
 .top-2 {
   top: 0.5rem;
 }
@@ -4071,11 +4079,6 @@ html:has(.drawer-toggle:checked) {
   grid-column: 1 / -1;
 }
 
-.mx-14 {
-  margin-left: 3.5rem;
-  margin-right: 3.5rem;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -4111,10 +4114,6 @@ html:has(.drawer-toggle:checked) {
   margin-bottom: 2rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -4337,6 +4336,11 @@ html:has(.drawer-toggle:checked) {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4491,10 +4495,19 @@ html:has(.drawer-toggle:checked) {
   border-bottom-left-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
 
+.border-base-100 {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity)));
+}
+
 .border-base-200 {
   --tw-border-opacity: 1;
   border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -4585,8 +4598,8 @@ html:has(.drawer-toggle:checked) {
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
 }
 
 .fill-current {
@@ -4635,11 +4648,6 @@ html:has(.drawer-toggle:checked) {
   padding-right: 0.25rem;
 }
 
-.px-16 {
-  padding-left: 4rem;
-  padding-right: 4rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -4660,9 +4668,9 @@ html:has(.drawer-toggle:checked) {
   padding-right: 1.5rem;
 }
 
-.px-\[4\.5rem\] {
-  padding-left: 4.5rem;
-  padding-right: 4.5rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
 .py-0 {
@@ -4818,6 +4826,11 @@ html:has(.drawer-toggle:checked) {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -4919,6 +4932,35 @@ html:has(.drawer-toggle:checked) {
   transition-duration: 300ms;
 }
 
+/* Remove when fixed in DaisyUI: https://github.com/saadeghi/daisyui/issues/3040 */
+
+html {
+  scrollbar-gutter: auto !important;
+}
+
+@media (min-width: 400px) {
+  .xs\:loading {
+    pointer-events: none;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    width: 1.5rem;
+    background-color: currentColor;
+    -webkit-mask-size: 100%;
+            mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  }
+
+  .xs\:loading-spinner {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  }
+}
+
 @media (min-width: 640px) {
   @media (hover:hover) {
     .sm\:table tr.hover:hover,.sm\:table tr.hover:nth-child(even):hover {
@@ -5119,9 +5161,41 @@ html:has(.drawer-toggle:checked) {
 }
 
 @media (min-width: 400px) {
+  .xs\:mx-14 {
+    margin-left: 3.5rem;
+    margin-right: 3.5rem;
+  }
+
+  .xs\:ml-0 {
+    margin-left: 0px;
+  }
+
   .xs\:block {
     display: block;
   }
+
+  .xs\:flex {
+    display: flex;
+  }
+
+  .xs\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .xs\:px-\[4\.5rem\] {
+    padding-left: 4.5rem;
+    padding-right: 4.5rem;
+  }
+
+  .xs\:pr-10 {
+    padding-right: 2.5rem;
+  }
+
+  .xs\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }
 
 @media (min-width: 640px) {
@@ -5214,19 +5288,37 @@ html:has(.drawer-toggle:checked) {
     padding: 1.5rem;
   }
 
+  .sm\:px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
   }
 
+  .sm\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+
   .sm\:pb-10 {
     padding-bottom: 2.5rem;
   }
 
+  .sm\:pl-1 {
+    padding-left: 0.25rem;
+  }
+
   .sm\:pl-4 {
     padding-left: 1rem;
   }
 
+  .sm\:pr-1 {
+    padding-right: 0.25rem;
+  }
+
   .sm\:pr-12 {
     padding-right: 3rem;
   }
@@ -5381,4 +5473,9 @@ html:has(.drawer-toggle:checked) {
   .dark\:stroke-gray-200 {
     stroke: #e5e7eb;
   }
+
+  .dark\:text-base-300 {
+    --tw-text-opacity: 1;
+    color: var(--fallback-b3,oklch(var(--b3)/var(--tw-text-opacity)));
+  }
 }
diff --git a/input.css b/input.css
diff --git a/internal/conf/defaults.go b/internal/conf/defaults.go
@@ -171,24 +171,24 @@ func setDefaultConfig() {
 	viper.SetDefault("security.allowcloudflarebypass.audience", "")
 
 	// Basic authentication configuration
-	viper.SetDefault("security.basic.enabled", false)
-	viper.SetDefault("security.basic.password", "")
-	viper.SetDefault("security.basic.clientid", "birdnet-client")
-	viper.SetDefault("security.basic.redirecturi", "/settings")
-	viper.SetDefault("security.basic.authcodeexp", "10m")
-	viper.SetDefault("security.basic.accesstokenexp", "1h")
+	viper.SetDefault("security.basicauth.enabled", false)
+	viper.SetDefault("security.basicauth.password", "")
+	viper.SetDefault("security.basicauth.clientid", "birdnet-client")
+	viper.SetDefault("security.basicauth.redirecturi", "/settings")
+	viper.SetDefault("security.basicauth.authcodeexp", "10m")
+	viper.SetDefault("security.basicauth.accesstokenexp", "1h")
 
 	// Google OAuth2 configuration
-	viper.SetDefault("security.google.enabled", false)
-	viper.SetDefault("security.google.clientid", "")
-	viper.SetDefault("security.google.clientsecret", "")
-	viper.SetDefault("security.google.redirecturi", "/settings")
-	viper.SetDefault("security.google.userid", "")
+	viper.SetDefault("security.googleauth.enabled", false)
+	viper.SetDefault("security.googleauth.clientid", "")
+	viper.SetDefault("security.googleauth.clientsecret", "")
+	viper.SetDefault("security.googleauth.redirecturi", "/settings")
+	viper.SetDefault("security.googleauth.userid", "")
 
 	// GitHub OAuth2 configuration
-	viper.SetDefault("security.github.enabled", false)
-	viper.SetDefault("security.github.clientid", "")
-	viper.SetDefault("security.github.clientsecret", "")
-	viper.SetDefault("security.github.redirecturi", "/settings")
-	viper.SetDefault("security.github.userid", "")
+	viper.SetDefault("security.githubauth.enabled", false)
+	viper.SetDefault("security.githubauth.clientid", "")
+	viper.SetDefault("security.githubauth.clientsecret", "")
+	viper.SetDefault("security.githubauth.redirecturi", "/settings")
+	viper.SetDefault("security.githubauth.userid", "")
 }
diff --git a/internal/httpcontroller/handlers/dashboard.go b/internal/httpcontroller/handlers/dashboard.go
@@ -23,7 +23,7 @@ type NoteWithSpectrogram struct {
 
 // topBirdsHandler handles requests for the top bird sightings.
 // It retrieves data based on the specified date and minimum confidence,
-// then renders it using the 'birdsTableHTML' template.
+// then renders it using the 'birdsTable' template.
 func (h *Handlers) TopBirds(c echo.Context) error {
 	// Retrieving query parameters
 	selectedDate := c.QueryParam("date")
@@ -96,8 +96,8 @@ func (h *Handlers) TopBirds(c echo.Context) error {
 		Sunset:            sunsetHour,
 	}
 
-	// Render the birdsTableHTML template with the data
-	return c.Render(http.StatusOK, "birdsTableHTML", data)
+	// Render the birdsTable template with the data
+	return c.Render(http.StatusOK, "birdsTable", data)
 }
 
 func closestHour(t time.Time) int {