added form to the home page.
This commit is contained in:
parent
3611ac3977
commit
36ce81db56
44
package-lock.json
generated
44
package-lock.json
generated
@ -9,7 +9,8 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
@ -1018,6 +1019,15 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
|
||||
"integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.0.tgz",
|
||||
@ -3799,6 +3809,38 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.30.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz",
|
||||
"integrity": "sha512-D3X8FyH9nBcTSHGdEKurK7r8OYE1kKFn3d/CF+CoxbSHkxU7o37+Uh7eAHRXr6k2tSExXYO++07PeXJtA/dEhQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.23.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.30.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.0.tgz",
|
||||
"integrity": "sha512-x30B78HV5tFk8ex0ITwzC9TTZMua4jGyA9IUlH1JLQYQTFyxr/ZxwOJq7evg1JX1qGVUcvhsmQSKdPncQrjTgA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.23.0",
|
||||
"react-router": "6.30.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
|
@ -11,7 +11,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
@ -24,5 +25,6 @@
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.14.0",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
@ -18,6 +18,14 @@
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
26
src/App.jsx
26
src/App.jsx
@ -1,12 +1,28 @@
|
||||
import { useState } from 'react'
|
||||
import { Routes, Route, Link } from 'react-router-dom';
|
||||
import Home from '../src/pages/Home';
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
// const [count, setCount] = useState(0)
|
||||
function About() {
|
||||
return <h2>About</h2>;
|
||||
}
|
||||
|
||||
function Proxied_Apps() {
|
||||
return <h2>Proxied apps</h2>;
|
||||
}
|
||||
function App() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<p>yatta, yatta, yatta</p>
|
||||
<div>
|
||||
<nav>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/about">About</Link>
|
||||
<Link to="/Proxied_Apps">Proxied Apps</Link>
|
||||
</nav>
|
||||
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/Proxied_Apps" element={<Proxied_Apps />} />
|
||||
</Routes>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
75
src/pages/Home.jsx
Normal file
75
src/pages/Home.jsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
function MyForm() {
|
||||
const [inputs, setInputs] = useState({});
|
||||
|
||||
const handleChange = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setInputs(values => ({ ...values, [name]: value }))
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<h4>DNS</h4>
|
||||
|
||||
<form>
|
||||
|
||||
<label>FQDN
|
||||
<input type="text" name="fqdn" value={inputs.fqdn || ""} onChange={handleChange}/>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label>CNAME target
|
||||
<input type="text" name="cname_target" value={inputs.cname_target || "cygnus.int.jonb.io"} onChange={handleChange}/>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>Reverse Proxy</h4>
|
||||
|
||||
<label>FQDN
|
||||
<input type="text" value={inputs.fqdn} onChange={handleChange} disabled/>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label>Target Host
|
||||
<input type="text" name="target_host" value={inputs.target_host || ""} onChange={handleChange}/>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label>Upstream Port
|
||||
<input type="number" name="upstream_port" value={inputs.upstream_port || ""} onChange={handleChange}/>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<label>Protocol
|
||||
<select name="protocol" value={inputs.protocol || ""} onChange={handleChange}>
|
||||
<option value="http" selected>http</option>
|
||||
<option value="https">https</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<br />
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
|
||||
</form>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function Home() {
|
||||
return (<><h2>Home Page</h2>
|
||||
<MyForm />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home;
|
Loading…
x
Reference in New Issue
Block a user