add support form

add 'data-' prefix for all async attributes

Dockerfile

@@ -28,7 +28,7 @@ ENV CGO_ENABLED=0
 ENV GOOS=linux
 
 # build the binary with debug information removed
-RUN go build -ldflags '-w -s' -a -installsuffix cgo -o server
+RUN go build -ldflags '-w -s -X google.golang.org/protobuf/reflect/protoregistry.conflictPolicy=warn' -a -installsuffix cgo -o server
 
 FROM alpine:latest
 

Makefile

@@ -6,4 +6,4 @@ run:
 	./web-ui-v2 s
 
 forward-ports:
-	kubefwd svc -n webtor -l "app.kubernetes.io/name in (claims-provider, supertokens, rest-api)"
+	kubefwd svc -n webtor -l "app.kubernetes.io/name in (claims-provider, supertokens, rest-api, abuse-store)"

README.md

@@ -32,7 +32,7 @@ Some features to mention:
   - [ ] Magnet => DDL
   - [ ] Magnet => Torrent
 - [ ] Misc
-  - [ ] Feedback form
+  - [x] Feedback form
   - [ ] Allow magnet-url as query string
   - [x] Add dark/light theme switch
 - [x] Chrome extension integration

assets/src/js/app/support.js

@@ -0,0 +1,43 @@
+const target = document.currentScript.parentElement;
+const av = (await import('../lib/asyncView')).initAsyncView;
+
+function setRequied(input) {
+    if (input.getAttribute('data-required') !== null)  {
+        input.setAttribute('required', 'required');
+    }
+}
+
+function updateForm(select, inputs, submit) {
+    if (select.value === '-1') {
+        for (const i of inputs) i.classList.add('hidden');
+        submit.classList.add('hidden');
+    } else {
+        for (const i of inputs) {
+            const ds = i.getAttribute('data-select');
+            if (!ds) {
+                i.classList.remove('hidden');
+                setRequied(i);
+            } else if (ds.split(',').includes(select.value)) {
+                i.classList.remove('hidden');
+                setRequied(i);
+            } else {
+                i.classList.add('hidden');
+                i.removeAttribute('required');
+            }
+        }
+        submit.classList.remove('hidden');
+    }
+}
+
+av(target, 'support/form', async function() {
+    const form = target.querySelector('form');
+    const select = form.querySelector('select');
+    const inputs = form.querySelectorAll('input, textarea');
+    const submit = form.querySelector('button');
+    updateForm(select, inputs, submit);
+    select.addEventListener('change', () => {
+        updateForm(select, inputs, submit);
+    });
+});
+
+export {}

assets/src/js/app/tests/progress_log.js

@@ -49,3 +49,5 @@ initProgressLog(document.querySelector('.test-done-with-extra'))
     .done()
     .close();
 
+initProgressLog(document.querySelector('.test-oneline'));
+

assets/src/js/lib/async.js

@@ -8,11 +8,11 @@ async function asyncFetch(url, targetSelector, fetchParams, params) {
     } else {
         throw `Wrong type of target ${targetSelector}`;
     }
+    let layout = target.getAttribute('data-async-layout');
     if (!target) {
         target = document.querySelector(params.fallback.selector);
         layout = params.fallback.layout;
     }
-    const layout = target.getAttribute('async-layout');
     if (!fetchParams) fetchParams = {};
     if (!fetchParams.headers) fetchParams.headers = {};
     fetchParams.headers = Object.assign(fetchParams.headers, {
@@ -36,7 +36,7 @@ async function async(selector, params = {}, scope = null) {
     if (!scope) {
         scope = document;
         window.addEventListener('popstate', async function(e) {
-            if (e.state && e.state.targetSelector && e.state.url && e.state.layout && e.state.context && params.history && e.state.context == params.history.context) {
+            if (e.state && e.state.targetSelector && e.state.url && e.state.layout && e.state.context && params.history && e.state.context === params.history.context) {
                 await asyncFetch(
                     e.state.url,
                     e.state.targetSelector,
@@ -60,17 +60,17 @@ async function async(selector, params = {}, scope = null) {
             const res = await el.reload();
             el.reloadResolve(res);
         }
-        if (!el.getAttribute('async-target')) continue;
+        if (!el.getAttribute('data-async-target')) continue;
         el.addEventListener(params.event, async function(e) {
             e.preventDefault();
             e.stopPropagation();
             let history = true;
-            if (el.getAttribute('async-push-state') && el.getAttribute('async-push-state') == 'false') {
+            if (el.getAttribute('data-async-push-state') && el.getAttribute('data-async-push-state') === 'false') {
                 history = false;
             }
-            const targetSelector = this.getAttribute('async-target');
+            const targetSelector = this.getAttribute('data-async-target');
             const target = document.querySelector(targetSelector);
-            const layout = target.getAttribute('async-layout');
+            const layout = target.getAttribute('data-async-layout');
             let {url, fetchParams} = params.fetchParams.call(this);
             const push = function(url, fetchParams) {
                 if (!history) return;
@@ -99,7 +99,7 @@ function asyncForms(p = {}) {
             context: 'forms',
             async wrap(fetch, push, url, fetchParams) {
                 const res = await fetch();
-                if (res.status == 200) {
+                if (res.status === 200) {
                     const u = new URL(res.url);
                     push(u.pathname + u.search, {
                         headers: fetchParams.headers,
@@ -157,11 +157,11 @@ function asyncLinks(p = {}) {
 function asyncGet(p = {}) {
     const params = Object.assign({
         fetchParams() {
-            const url = this.getAttribute('async-get');
+            const url = this.getAttribute('data-async-get');
             return {url};
         },
     }, p)
-    async('*[async-get]', params);
+    async('*[data-async-get]', params);
 }
 
 

assets/src/js/lib/asyncView.js

@@ -2,7 +2,7 @@ import MD5 from "crypto-js/md5";
 import {makeDebug} from './debug';
 const debug = await makeDebug('webtor:embed:message');
 export function initAsyncView(target, name, init, destroy) {
-    const layout = target.getAttribute('async-layout');
+    const layout = target.getAttribute('data-async-layout');
     if (layout) {
         name = name + '_' + MD5(layout).toString();
     }

assets/src/js/lib/loadAsyncView.js

@@ -9,9 +9,9 @@ function loadAsyncView(target, body, template) {
     for (const el of els) {
         const t = el.getAttribute('async-template');
         if (!t) continue;
-        const listener = (e) => {
+        const listener = () => {
             counter++;
-            if (counter == els.length) {
+            if (counter === els.length) {
                 renderBody(target, body, template);
             }
         }
@@ -22,7 +22,7 @@ function loadAsyncView(target, body, template) {
         const event = new CustomEvent(`async:${t}_destroy`, { detail });
         window.dispatchEvent(event);
     }
-    if (els.length == 0) {
+    if (els.length === 0) {
         renderBody(target, body, template);
     }
 }

assets/src/styles/style.css

@@ -2,34 +2,36 @@
 @tailwind components;
 @tailwind utilities;
 
-.loading-elipsis::after {
-  overflow: hidden;
-  animation: ellipsis steps(4, end) 1500ms infinite;
-  content: "...";
-  width: 0;
-  display: inline-block;
-  vertical-align: bottom;
-}
-
-@keyframes ellipsis {
-  to {
-    width: 2.25em;
+@layer utilities {
+  .loading-elipsis::after {
+    overflow: hidden;
+    animation: ellipsis steps(4, end) 1500ms infinite;
+    content: "...";
+    width: 0;
+    display: inline-block;
+    vertical-align: bottom;
   }
-}
 
-.popin {
-  animation: popin 200ms;
-}
+  @keyframes ellipsis {
+    to {
+      width: 2.25em;
+    }
+  }
 
-@keyframes popin {
-  from {
-    transform: scaleX(0.95);
-    opacity: 0;
+  .popin {
+    animation: popin 200ms;
   }
 
-  to {
-    transform: scaleX(1);
-    opacity: 1;
+  @keyframes popin {
+    from {
+      transform: scaleX(0.95);
+      opacity: 0;
+    }
+
+    to {
+      transform: scaleX(1);
+      opacity: 1;
+    }
   }
 }
 

go.mod

@@ -25,6 +25,10 @@ require (
 	google.golang.org/grpc v1.64.0
 )
 
+require (
+	github.com/webtor-io/abuse-store v0.0.0-20230514145349-23cc55871d7e // indirect
+)
+
 require (
 	code.cloudfoundry.org/bytefmt v0.0.0-20240528171252-bec775193611 // indirect
 	github.com/KyleBanks/depth v1.2.1 // indirect