updated app

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "envy": "^2.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "6"

src/App.css

@@ -17,15 +17,29 @@
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
-
+.link-styles {
+  padding: 0 10px;
+}
 h4 {
   text-align: left;
 }
 
 form {
+  display: grid;
   text-align: left;
 }
 
+input {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  box-sizing: border-box;
+}
+
+select {
+  width: 100%;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

src/App.jsx

@@ -1,5 +1,7 @@
 import { Routes, Route, Link } from 'react-router-dom';
 import Home from '../src/pages/Home';
+// import Home from '../src/pages/Home';
+// import Home from '../src/pages/About';
 import './App.css'
 
 function About() {
@@ -13,14 +15,14 @@ function App() {
   return (
     <div>
       <nav>
-        <Link to="/">Home</Link>
-        <Link to="/about">About</Link>
-        <Link to="/Proxied_Apps">Proxied Apps</Link>
+        <Link className={"link-styles"} to="/">Home</Link>
+        <Link className={"link-styles"} to="/About">About</Link>
+        <Link className={"link-styles"} to="/Proxied_Apps">Proxied Apps</Link>
       </nav>
 
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/about" element={<About />} />
+        <Route path="/About" element={<About />} />
         <Route path="/Proxied_Apps" element={<Proxied_Apps />} />
       </Routes>
     </div>

src/assets/nginxClient.js

@@ -0,0 +1 @@
+console.log(4)

src/assets/orchestration.js

@@ -0,0 +1,10 @@
+import './piholeClient'
+import './nginxClient'
+
+
+function registerApp(props){
+    alert(JSON.stringify(props))
+    const formData = props
+}
+
+export default registerApp;

src/pages/Home.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import registerApp from '../assets/orchestration'
 
 function MyForm() {
   const [inputs, setInputs] = useState({});
@@ -11,53 +12,50 @@ function MyForm() {
 
   return (
     <>
-
-    <h4>DNS</h4>
-
-      <form>
-
+      <form className='card'>
+        <h4>DNS</h4>
         <label>FQDN
-          <input type="text" name="fqdn" value={inputs.fqdn || ""} onChange={handleChange}/>
+          <input type="text" name="fqdn" value={inputs.fqdn} onChange={handleChange} placeholder='Target DNS name.' required autoFocus/>
         </label>
 
         <br />
 
-        <label>CNAME target
-          <input type="text" name="cname_target" value={inputs.cname_target || "cygnus.int.jonb.io"} onChange={handleChange}/>
+        <label>CNAME Target
+          <input type="text" name="cname_target" value={inputs.cname_target} onChange={handleChange} placeholder='cygnus.int.jonb.io' required/>
         </label>
 
         <br />
 
-    <h4>Reverse Proxy</h4>
+       <h4>Reverse Proxy</h4>
 
         <label>FQDN
-          <input type="text" value={inputs.fqdn} onChange={handleChange} disabled/>
+          <input type="text" value={inputs.fqdn} onChange={handleChange} disabled placeholder='Automatically filled, Target DNS name'/>
         </label>
 
         <br />
 
         <label>Target Host
-          <input type="text" name="target_host" value={inputs.target_host || ""} onChange={handleChange}/>
+          <input type="text" name="target_host" value={inputs.target_host} onChange={handleChange} placeholder='Network host Domain or IP' required/>
         </label>
 
         <br />
 
         <label>Upstream Port
-          <input type="number" name="upstream_port" value={inputs.upstream_port || ""} onChange={handleChange}/>
+          <input type="number" name="upstream_port" value={inputs.upstream_port} onChange={handleChange} placeholder='Port the target service is listening on.' required/>
         </label>
 
         <br />
 
         <label>Protocol
-          <select name="protocol" value={inputs.protocol || ""} onChange={handleChange}>
-            <option value="http" selected>http</option>
-            <option value="https">https</option>
+          <select name="protocol" value={inputs.protocol || "http"} onChange={handleChange}>
+            <option value="http" selected>HTTP</option>
+            <option value="https">HTTPS</option>
           </select>
         </label>
 
         <br />
 
-        <button type="submit">Submit</button>
+        <button className="button" type="submit" onChange={handleChange} onClick={() => registerApp({inputs})}>Submit</button>
 
       </form>
     </>
@@ -66,7 +64,7 @@ function MyForm() {
 
 
 function Home() {
-  return (<><h2>Home Page</h2>
+  return (<><h2>Deploy New App</h2>
     <MyForm />
   </>
   )