From 00991ad93cb20dd98efdd8ab8ad8e36771294f10 Mon Sep 17 00:00:00 2001 From: Alie Date: Wed, 12 Feb 2025 13:01:37 +0100 Subject: [PATCH] BREAKING CHANGE: deprecated use of auth and bot api to only use 2chi verifier be --- compose.yaml | 29 ++--- src/App.tsx | 20 +--- .../ImageModerator/GetBackendUrl.tsx | 64 ++++++++++ .../ImageModerator/ImageModerator.tsx | 36 ++---- src/components/Login/Login.tsx | 111 ------------------ 5 files changed, 97 insertions(+), 163 deletions(-) create mode 100644 src/components/ImageModerator/GetBackendUrl.tsx delete mode 100644 src/components/Login/Login.tsx diff --git a/compose.yaml b/compose.yaml index 825d095..ee4c2e8 100644 --- a/compose.yaml +++ b/compose.yaml @@ -1,7 +1,7 @@ services: mongodb: image: mongo:bionic - container_name: mongodb-fe + container_name: fe-mongodb ports: - "27017:27017" environment: @@ -10,32 +10,34 @@ services: MONGO_INITDB_DATABASE: bot volumes: - ./init-mongo.js:/docker-entrypoint-initdb.d/init-mongo.js:ro - - mongodb_data:/data/db bot-api: - image: git.fai.st/fedi-image-bot/bot-api:v1.0.2 - container_name: bot-api-fe + image: ghcr.io/siesta-cat/2chi-api:v1.0.1 + container_name: fe-2chi-api + restart: on-failure ports: - 8080:8080 depends_on: - mongodb environment: PORT: 8080 - MONGODB_URI: "mongodb://mongodb:27017/bot" - MONGODB_USER: "root" - MONGODB_PASS: "password" - JWTSECRET: "cooljwtsecret" + DB_HOST: "mongodb" + DB_NAME: "bot" + DB_USER: "root" + DB_PASS: "password" fe-middleware: - image: git.fai.st/fedi-image-bot/fe-middleware:v1.0.2 - container_name: fe-middleware-fe + image: ghcr.io/siesta-cat/2chi-verifier-be:v2.1.2 + container_name: fe-2chi-verifier-be + stop_signal: sigkill ports: - 8081:8081 depends_on: - bot-api environment: PORT: 8081 - BOT_API_URI: "http://bot-api:8080" + BOT_API_BASE_URL: "http://bot-api:8080" + TOKEN_SECRET: Y2hpY2FzZWNyZXQK GELBOORU_IMAGES_PER_REQUEST: 100 # Number of images per request, maximum 100 GELBOORU_TAGS: "2girls sleeping" # Tags of the images. The images will have all of these tags @@ -44,12 +46,11 @@ services: container_name: bot-image-moderation-fe ports: - 80:80 + environment: + VITE_BACKEND_URL: "http://localhost:8081" develop: watch: - action: rebuild path: . ignore: - node_modules/ - -volumes: - mongodb_data: diff --git a/src/App.tsx b/src/App.tsx index c13906a..b15ad7e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,24 +1,14 @@ import { useState } from "react"; +import GetBackendUrl from "./components/ImageModerator/GetBackendUrl"; import ImageModerator from "./components/ImageModerator/ImageModerator"; -import Login from "./components/Login/Login"; function App() { - const [{ apiUrl, middlewareUrl, token }, setRemote] = useState({ - apiUrl: "", - middlewareUrl: "", - token: "", - }); + const [backendUrl, setBackendUrl] = useState(""); - if (token) { - return ( - - ); + if (backendUrl) { + return ; } else { - return ; + return ; } } diff --git a/src/components/ImageModerator/GetBackendUrl.tsx b/src/components/ImageModerator/GetBackendUrl.tsx new file mode 100644 index 0000000..7630fd6 --- /dev/null +++ b/src/components/ImageModerator/GetBackendUrl.tsx @@ -0,0 +1,64 @@ +import { useEffect, useState } from "react"; + +export default function GetBackendUrl({ setRemote }: { setRemote: Function }) { + const sendLabel = "Input Backend URL"; + const [backendUrl, setBackendUrl] = useState(""); + + function sendAction() { + event?.preventDefault(); + try { + if (backendUrl) { + localStorage.setItem("backendUrl", backendUrl); + } + } catch (error) { + console.error(error); + } + setRemote(backendUrl); + } + + function handleChange( + e: { + target: { value: React.SetStateAction }; + }, + setter: React.Dispatch> + ): void { + setter(e.target.value); + } + + useEffect(() => { + const savedRemote = localStorage.getItem("backendUrl"); + + if (savedRemote) { + setBackendUrl(savedRemote); + } + }, []); + + return ( +
+
+ + handleChange(e, setBackendUrl)} + /> + +
+
+ ); +} diff --git a/src/components/ImageModerator/ImageModerator.tsx b/src/components/ImageModerator/ImageModerator.tsx index 0c86da7..0466561 100644 --- a/src/components/ImageModerator/ImageModerator.tsx +++ b/src/components/ImageModerator/ImageModerator.tsx @@ -2,50 +2,42 @@ import { useEffect, useState } from "react"; import Button from "../Button/Button"; interface ImageModeratorProps { - token: string; - apiUrl: string; - middlewareUrl: string; + backendUrl: string; } -export default function ImageModerator({ - token, - apiUrl, - middlewareUrl, -}: ImageModeratorProps) { +export default function ImageModerator({ backendUrl }: ImageModeratorProps) { const acceptLabel = "Accept"; const discardLabel = "Discard"; const [isLoading, setIsLoading] = useState(true); - const [imageData, setImageData] = useState({ url: "", tags: [] }); + const [imageData, setImageData] = useState({ url: "", token: "" }); const [imageAlt, setImageAlt] = useState("No image"); function acceptAction() { - fetch(`${apiUrl}/images`, { + fetch(`${backendUrl}/image/review`, { method: "POST", body: JSON.stringify({ url: imageData.url, - status: "available", - tags: imageData.tags, + token: imageData.token, + is_accepted: true, }), headers: { "Content-type": "application/json", - Authorization: `Bearer ${token}`, }, }); setIsLoading(true); } function discardAction() { - fetch(`${apiUrl}/images`, { + fetch(`${backendUrl}/image/review`, { method: "POST", body: JSON.stringify({ url: imageData.url, - status: "unavailable", - tags: imageData.tags, + token: imageData.token, + is_accepted: false, }), headers: { "Content-type": "application/json", - Authorization: `Bearer ${token}`, }, }); setIsLoading(true); @@ -53,8 +45,8 @@ export default function ImageModerator({ const getNewImage = () => { if (isLoading) { - setImageData({ url: "", tags: [] }); - fetch(`${middlewareUrl}/image`, { + setImageData({ url: "", token: "" }); + fetch(`${backendUrl}/image`, { method: "GET", }) .then((response) => { @@ -62,10 +54,8 @@ export default function ImageModerator({ return response.json(); }) .then((data) => { - const url = data.url; - const tags = data.tags; - setImageData({ url, tags }); - setImageAlt(url); + setImageData({ url: data.url, token: data.token }); + setImageAlt(data.url); }) .catch((error) => { setImageAlt("Error"); diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx deleted file mode 100644 index 547e52d..0000000 --- a/src/components/Login/Login.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; - -export default function Login({ setRemote }: { setRemote: Function }) { - const sendLabel = "Login"; - const [middlewareUrl, setMiddlewareUrl] = useState(""); - const [apiUrl, setApiUrl] = useState(""); - const [app, setApp] = useState(""); - const [secret, setSecret] = useState(""); - - function sendAction() { - event?.preventDefault(); - try { - if (apiUrl && middlewareUrl && app && secret) { - localStorage.setItem( - "credentials", - JSON.stringify({ apiUrl, middlewareUrl, app, secret }) - ); - } - } catch (error) { - console.error(error); - } - fetch(`${apiUrl}/login`, { - method: "POST", - body: JSON.stringify({ app, secret }), - headers: { "Content-type": "application/json" }, - }) - .then((response) => { - return response.json(); - }) - .then((body) => { - setRemote({ apiUrl, middlewareUrl, token: body.token }); - }); - } - - function handleChange( - e: { - target: { value: React.SetStateAction }; - }, - setter: React.Dispatch> - ): void { - setter(e.target.value); - } - useEffect(() => { - const savedRemote = localStorage.getItem("credentials"); - - if (savedRemote) { - const savedData = JSON.parse(savedRemote); - setApiUrl(savedData.apiUrl); - setMiddlewareUrl(savedData.middlewareUrl); - setApp(savedData.app); - setSecret(savedData.secret); - } - }, []); - - useEffect(() => { - if (secret) { - sendAction(); - } - }, [secret]); - - return ( -
-
- - handleChange(e, setApiUrl)} - /> - - handleChange(e, setMiddlewareUrl)} - /> - - handleChange(e, setApp)} - /> - - handleChange(e, setSecret)} - /> - -
-
- ); -}