chore: initial project scaffold with admin web, backend, desktop client, and deployment setup
Add monorepo structure for NexaVPN WireGuard control plane including: - .gitignore for node_modules, build artifacts, and environment files - README with project overview, monorepo layout, and quick start guide - Admin web UI with React, Vite, TypeScript, and nginx reverse proxy - API client with type definitions for users, devices, policies, gateways, and audit logs - Admin pages for dashboard, users, devices, policies, g
This commit is contained in:
107
desktop-client/src/App.tsx
Normal file
107
desktop-client/src/App.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { FormEvent, useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
type EnrollmentState = {
|
||||
assignedIp: string;
|
||||
resources: string[];
|
||||
profileRevision: number;
|
||||
gatewayEndpoint: string;
|
||||
};
|
||||
|
||||
export function App() {
|
||||
const [serverUrl, setServerUrl] = useState("http://localhost");
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [connected, setConnected] = useState(false);
|
||||
const [state, setState] = useState<EnrollmentState | null>(null);
|
||||
|
||||
async function onSubmit(event: FormEvent) {
|
||||
event.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await invoke<EnrollmentState>("enroll_device", {
|
||||
payload: { serverUrl, username, password }
|
||||
});
|
||||
setState(result);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Enrollment failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleConnection() {
|
||||
const command = connected ? "disconnect_tunnel" : "connect_tunnel";
|
||||
await invoke(command);
|
||||
setConnected((value) => !value);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="client-shell">
|
||||
<div className="hero">
|
||||
<p className="eyebrow">NexaVPN</p>
|
||||
<h1>Private access without manual WireGuard setup.</h1>
|
||||
<p className="lede">
|
||||
Enter your VPN address, username, and password. NexaVPN provisions and stores the profile for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!state ? (
|
||||
<form className="panel" onSubmit={onSubmit}>
|
||||
<label>
|
||||
VPN server address
|
||||
<input value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Username
|
||||
<input value={username} onChange={(event) => setUsername(event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
|
||||
</label>
|
||||
{error ? <div className="error">{error}</div> : null}
|
||||
<button disabled={loading} type="submit">
|
||||
{loading ? "Provisioning..." : "Sign in"}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div className="panel status">
|
||||
<div className="status-row">
|
||||
<div>
|
||||
<p className="eyebrow">Connection</p>
|
||||
<h2>{connected ? "Connected" : "Disconnected"}</h2>
|
||||
</div>
|
||||
<button onClick={toggleConnection}>{connected ? "Disconnect" : "Connect"}</button>
|
||||
</div>
|
||||
<div className="details">
|
||||
<div>
|
||||
<span>Assigned VPN IP</span>
|
||||
<strong>{state.assignedIp}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Gateway</span>
|
||||
<strong>{state.gatewayEndpoint}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Profile revision</span>
|
||||
<strong>{state.profileRevision}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eyebrow">Allowed resources</p>
|
||||
<ul className="resource-list">
|
||||
{state.resources.map((resource) => (
|
||||
<li key={resource}>{resource}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
11
desktop-client/src/main.tsx
Normal file
11
desktop-client/src/main.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import { App } from "./App";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
111
desktop-client/src/styles.css
Normal file
111
desktop-client/src/styles.css
Normal file
@@ -0,0 +1,111 @@
|
||||
:root {
|
||||
font-family: "Segoe UI", "SF Pro Text", sans-serif;
|
||||
color: #f5f7fb;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(79, 208, 164, 0.18), transparent 25%),
|
||||
linear-gradient(180deg, #08111f 0%, #0d1727 100%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.client-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 24px;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.panel {
|
||||
width: min(560px, 100%);
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #74e0b8;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.lede {
|
||||
color: #a9b8d3;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 24px;
|
||||
border-radius: 24px;
|
||||
background: rgba(12, 22, 38, 0.84);
|
||||
border: 1px solid rgba(167, 185, 219, 0.14);
|
||||
box-shadow: 0 24px 60px rgba(2, 8, 18, 0.36);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: #c2cfe5;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid rgba(167, 185, 219, 0.16);
|
||||
background: rgba(7, 14, 27, 0.85);
|
||||
color: #f5f7fb;
|
||||
border-radius: 14px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 13px 18px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #74e0b8 0%, #1fb67a 100%);
|
||||
color: #04141a;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ffb7b7;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.status-row,
|
||||
.details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.details div {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.details span {
|
||||
color: #9db0cf;
|
||||
}
|
||||
|
||||
.resource-list {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
Reference in New Issue
Block a user