From 0848a3b9385e754a7bbc0146de2c937cade8b130 Mon Sep 17 00:00:00 2001 From: Jonathan Branan Date: Sun, 29 Jun 2025 23:05:07 -0500 Subject: [PATCH] Addresses #2, more work is needed to finalize management of existing records --- .gitignore | 4 +- package.json | 10 +- src/App.css | 5 +- src/assets/nginxClient.js | 1 - .../{piholeClient.js => nginxClient.jsx} | 0 src/assets/orchestration.js | 10 -- src/assets/orchestration.jsx | 8 ++ src/assets/piholeClient.jsx | 71 ++++++++++++ src/pages/Home.jsx | 104 ++++++++++++------ yarn.lock | 55 ++++----- 10 files changed, 186 insertions(+), 82 deletions(-) delete mode 100644 src/assets/nginxClient.js rename src/assets/{piholeClient.js => nginxClient.jsx} (100%) delete mode 100644 src/assets/orchestration.js create mode 100644 src/assets/orchestration.jsx create mode 100644 src/assets/piholeClient.jsx diff --git a/.gitignore b/.gitignore index 1cac559..7a6e7a1 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? -.env \ No newline at end of file +.env + +*api*/ \ No newline at end of file diff --git a/package.json b/package.json index 172879b..b5b9440 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "my-vue-app", + "name": "kingdom", "private": true, "version": "0.0.0", "type": "module", @@ -11,14 +11,14 @@ }, "dependencies": { "envy": "^2.0.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "19", + "react-dom": "19", "react-router-dom": "6" }, "devDependencies": { "@eslint/js": "^9.17.0", - "@types/react": "^18.3.18", - "@types/react-dom": "^18.3.5", + "@types/react": "19", + "@types/react-dom": "19", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.2", diff --git a/src/App.css b/src/App.css index fd9e39a..ef06b1f 100644 --- a/src/App.css +++ b/src/App.css @@ -35,7 +35,10 @@ input { margin: 8px 0; box-sizing: border-box; } - +input[type="radio"] { + margin-top: -1px; + vertical-align: middle; +} select { width: 100%; } diff --git a/src/assets/nginxClient.js b/src/assets/nginxClient.js deleted file mode 100644 index 9f1b007..0000000 --- a/src/assets/nginxClient.js +++ /dev/null @@ -1 +0,0 @@ -console.log(4) \ No newline at end of file diff --git a/src/assets/piholeClient.js b/src/assets/nginxClient.jsx similarity index 100% rename from src/assets/piholeClient.js rename to src/assets/nginxClient.jsx diff --git a/src/assets/orchestration.js b/src/assets/orchestration.js deleted file mode 100644 index 57503f0..0000000 --- a/src/assets/orchestration.js +++ /dev/null @@ -1,10 +0,0 @@ -import './piholeClient' -import './nginxClient' - - -function registerApp(props){ - alert(JSON.stringify(props)) - const formData = props -} - -export default registerApp; \ No newline at end of file diff --git a/src/assets/orchestration.jsx b/src/assets/orchestration.jsx new file mode 100644 index 0000000..89c952c --- /dev/null +++ b/src/assets/orchestration.jsx @@ -0,0 +1,8 @@ +import pihole from './piholeClient.jsx' +// import './nginxClient' + +const registerApp = (fqdn, cnameTarget, targetHost, upstreamPort, protocol) => { + console.log('Register App data: ',fqdn, cnameTarget, targetHost, upstreamPort, protocol) + pihole(fqdn, cnameTarget) +} +export default registerApp; \ No newline at end of file diff --git a/src/assets/piholeClient.jsx b/src/assets/piholeClient.jsx new file mode 100644 index 0000000..503f256 --- /dev/null +++ b/src/assets/piholeClient.jsx @@ -0,0 +1,71 @@ +const piholeURL = `${import.meta.env.VITE_PIHOLE_URL}/api` + +const piholeAuth = async () => { + const session = await fetch(`${piholeURL}/auth`, { + method: "POST", + body: JSON.stringify({ "password": import.meta.env.VITE_PIHOLE_PASSWORD }) + }) + .then(response => { + if (response.ok) { + return response.json() + } + else console.log(response.status) && console.log(response.statusText) + }) + .then(data => data.session) + .catch(error => console.log(error)) + return session +} + +const getRecords = async (session) => { + const configDNS = await fetch(`${piholeURL}/config/dns/cnameRecords`, { + method: "GET", + headers: {"sid": session.sid} + }) + .then(response => { + if (response.ok) { + return response.json() + } + else console.log(response.status) && console.log(response.statusText) + }) + .then(data => { + // console.log('getRecords: return data',data) + return data + + }) + .catch(error => console.log(error)) + return {configDNS, session} +} + +const makeRecord = async (data, session, fqdn, cnameTarget) => { + const putRecord = await fetch(`${piholeURL}/config/dns/cnameRecords/${fqdn},${cnameTarget}`, { + method: "PUT", + headers: {"sid": session.sid} + }) + .then(response => { + if (response.status === 201){ + // console.log(`Response: ${response.status}`) + return response.json() + } + if (!response.ok){ + // console.log(`Response: ${response.status} ${response.statusText}`) + return response.json() + } + else console.log(response.status) && console.log(response.statusText) + }) + .then(data => { + if (data.error){console.log(data.error.message, data.error.hint)} + return data + }) + .catch(console.error) + return putRecord +} + +const pihole = (fqdn, cnameTarget) => { + const pi = piholeAuth() + pi.then(s => getRecords(s)) + .then((a) => { + // console.log('pihole after getRecords', a.configDNS, a.session) + makeRecord(a.configDNS, a.session, fqdn, cnameTarget) + }) +} +export default pihole \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index f229898..19e9b68 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,72 +1,114 @@ import { useState } from 'react'; -import registerApp from '../assets/orchestration' +import registerApp from '../assets/orchestration.jsx' -function MyForm() { - const [inputs, setInputs] = useState({}); +function Form() { + const envCnameTarget = import.meta.env.VITE_CNAME_TARGET_DEFAULT || '' + const [fqdn, setFQDN] = useState(''); + const [cnameTarget, setCnameTarget] = useState(envCnameTarget); + const [targetHost, setTargetHost] = useState(''); + const [upstreamPort, setUpstreamPort] = useState(''); + const [protocol, setProtocol] = useState('http'); - const handleChange = (event) => { - const name = event.target.name; - const value = event.target.value; - setInputs(values => ({ ...values, [name]: value })) - } return ( <> -
+ registerApp(fqdn, cnameTarget, targetHost, upstreamPort, protocol)}> +

DNS

-