LNVPS/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: build

Browse Source
This commit is contained in:
kieran 2024-12-29 19:25:14 +00:00
parent f4227fa121
commit e9d88279cf
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
7 changed files with 41 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ssh-keys.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useMemo, useState } from "react"; import { useEffect, useState } from "react";
import { LNVpsApi, UserSshKey } from "../api"; import { UserSshKey } from "../api";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { ApiUrl } from "../const";
import { AsyncButton } from "./button"; import { AsyncButton } from "./button";
export default function SSHKeySelector({ export default function SSHKeySelector({
@ -18,23 +17,17 @@ export default function SSHKeySelector({
const [showAddKey, setShowAddKey] = useState(false); const [showAddKey, setShowAddKey] = useState(false);
const [sshKeys, setSshKeys] = useState<Array<UserSshKey>>([]); const [sshKeys, setSshKeys] = useState<Array<UserSshKey>>([]);
const api = useMemo(() => {
if (!login?.builder) return;
const api = new LNVpsApi(ApiUrl, login.builder);
return api;
}, [login]);
async function addNewKey() { async function addNewKey() {
if (!api) return; if (!login?.api) return;
setNewKeyError(""); setNewKeyError("");
try { try {
const nk = await api.addSshKey(newKeyName, newKey); const nk = await login?.api.addSshKey(newKeyName, newKey);
setNewKey(""); setNewKey("");
setNewKeyName(""); setNewKeyName("");
setSelectedKey(nk.id); setSelectedKey(nk.id);
setShowAddKey(false); setShowAddKey(false);
api.listSshKeys().then((a) => setSshKeys(a)); login?.api.listSshKeys().then((a) => setSshKeys(a));
} catch (e) { } catch (e) {
if (e instanceof Error) { if (e instanceof Error) {
setNewKeyError(e.message); setNewKeyError(e.message);
@ -43,8 +36,8 @@ export default function SSHKeySelector({
} }
useEffect(() => { useEffect(() => {
if (!api) return; if (!login?.api) return;
api.listSshKeys().then((a) => { login?.api.listSshKeys().then((a) => {
setSshKeys(a); setSshKeys(a);
if (a.length > 0) { if (a.length > 0) {
setSelectedKey(a[0].id); setSelectedKey(a[0].id);

14
src/components/vps-actions.tsx
View File

@ -1,6 +1,4 @@
import { EventPublisher } from "@snort/system"; import { VmInstance } from "../api";
import { LNVpsApi, VmInstance } from "../api";
import { ApiUrl } from "../const";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { Icon } from "./icon"; import { Icon } from "./icon";
import { AsyncButton } from "./button"; import { AsyncButton } from "./button";
@ -14,12 +12,8 @@ export default function VmActions({
}) { }) {
const login = useLogin(); const login = useLogin();
const state = vm.status?.state; const state = vm.status?.state;
if (!state) return; if (!login?.api) return;
const api = new LNVpsApi(
ApiUrl,
login?.signer ? new EventPublisher(login.signer, login.pubkey) : undefined,
);
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex gap-2"> <div className="flex gap-2">
@ -28,9 +22,9 @@ export default function VmActions({
e.stopPropagation(); e.stopPropagation();
if (state === "running") { if (state === "running") {
await api.stopVm(vm.id); await login?.api.stopVm(vm.id);
} else { } else {
await api.startVm(vm.id); await login?.api.startVm(vm.id);
} }
onReload?.(); onReload?.();
}} }}

11
src/components/vps-payment.tsx
View File

@ -2,8 +2,6 @@ import { useEffect } from "react";
import { LNVpsApi, VmPayment } from "../api"; import { LNVpsApi, VmPayment } from "../api";
import QrCode from "./qr"; import QrCode from "./qr";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { ApiUrl } from "../const";
import { EventPublisher } from "@snort/system";
export default function VpsPayment({ export default function VpsPayment({
payment, payment,
@ -29,13 +27,10 @@ export default function VpsPayment({
} }
useEffect(() => { useEffect(() => {
if (!login?.signer) return; if (!login?.api) return;
const api = new LNVpsApi(
ApiUrl,
new EventPublisher(login.signer, login.pubkey),
);
const tx = setInterval(async () => { const tx = setInterval(async () => {
if (await checkPayment(api)) { if (await checkPayment(login.api)) {
clearInterval(tx); clearInterval(tx);
} }
}, 2_000); }, 2_000);

5
src/hooks/login.tsx
View File

@ -1,6 +1,8 @@
import { useContext, useSyncExternalStore } from "react"; import { useContext, useSyncExternalStore } from "react";
import { LoginState } from "../login"; import { LoginState } from "../login";
import { SnortContext } from "@snort/system-react"; import { SnortContext } from "@snort/system-react";
import { LNVpsApi } from "../api";
import { ApiUrl } from "../const";
export default function useLogin() { export default function useLogin() {
const session = useSyncExternalStore( const session = useSyncExternalStore(
@ -8,12 +10,13 @@ export default function useLogin() {
() => LoginState.snapshot(), () => LoginState.snapshot(),
); );
const system = useContext(SnortContext); const system = useContext(SnortContext);
const signer = LoginState.getSigner();
return session return session
? { ? {
type: session.type, type: session.type,
publicKey: session.publicKey, publicKey: session.publicKey,
builder: LoginState.getSigner(),
system, system,
api: new LNVpsApi(ApiUrl, signer),
} }
: undefined; : undefined;
} }

8
src/pages/account.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { LNVpsApi, VmInstance } from "../api"; import { VmInstance } from "../api";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { ApiUrl } from "../const";
import VpsInstanceRow from "../components/vps-instance"; import VpsInstanceRow from "../components/vps-instance";
export default function AccountPage() { export default function AccountPage() {
@ -9,9 +8,8 @@ export default function AccountPage() {
const [vms, setVms] = useState<Array<VmInstance>>([]); const [vms, setVms] = useState<Array<VmInstance>>([]);
async function loadVms() { async function loadVms() {
if (!login?.builder) return; if (!login?.api) return;
const api = new LNVpsApi(ApiUrl, login.builder); const vms = await login?.api.listVms();
const vms = await api.listVms();
setVms(vms); setVms(vms);
} }

13
src/pages/order.tsx
View File

@ -1,8 +1,7 @@
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
import { LNVpsApi, VmOsImage, VmTemplate } from "../api"; import { VmOsImage, VmTemplate } from "../api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import CostLabel from "../components/cost"; import CostLabel from "../components/cost";
import { ApiUrl } from "../const";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { AsyncButton } from "../components/button"; import { AsyncButton } from "../components/button";
import classNames from "classnames"; import classNames from "classnames";
@ -21,18 +20,16 @@ export default function OrderPage() {
const [orderError, setOrderError] = useState(""); const [orderError, setOrderError] = useState("");
useEffect(() => { useEffect(() => {
if (!login?.builder) return; if (!login?.api) return;
const api = new LNVpsApi(ApiUrl, login.builder); login.api.listOsImages().then((a) => setImages(a));
api.listOsImages().then((a) => setImages(a));
}, [login]); }, [login]);
async function createOrder() { async function createOrder() {
if (!login?.builder || !template) return; if (!login?.api || !template) return;
const api = new LNVpsApi(ApiUrl, login.builder);
setOrderError(""); setOrderError("");
try { try {
const newVm = await api.orderVm(template.id, useImage, useSshKey); const newVm = await login.api.orderVm(template.id, useImage, useSshKey);
navigate("/vm/renew", { navigate("/vm/renew", {
state: newVm, state: newVm,
}); });

40
src/pages/vm.tsx
View File

@ -1,18 +1,15 @@
import "@xterm/xterm/css/xterm.css"; import "@xterm/xterm/css/xterm.css";
import { useLocation, useNavigate, useParams } from "react-router-dom"; import { useLocation, useNavigate, useParams } from "react-router-dom";
import { LNVpsApi, VmInstance, VmPayment } from "../api"; import { VmInstance, VmPayment } from "../api";
import VpsInstanceRow from "../components/vps-instance"; import VpsInstanceRow from "../components/vps-instance";
import useLogin from "../hooks/login"; import useLogin from "../hooks/login";
import { ApiUrl } from "../const"; import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import VpsPayment from "../components/vps-payment"; import VpsPayment from "../components/vps-payment";
import CostLabel from "../components/cost"; import CostLabel from "../components/cost";
import { AsyncButton } from "../components/button"; import { AsyncButton } from "../components/button";
import { AttachAddon } from "@xterm/addon-attach";
import { Terminal } from "@xterm/xterm"; import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit"; import { FitAddon } from "@xterm/addon-fit";
import { WebglAddon } from "@xterm/addon-webgl";
import { toEui64 } from "../utils"; import { toEui64 } from "../utils";
import { Icon } from "../components/icon"; import { Icon } from "../components/icon";
import Modal from "../components/modal"; import Modal from "../components/modal";
@ -26,29 +23,23 @@ export default function VmPage() {
const login = useLogin(); const login = useLogin();
const navigate = useNavigate(); const navigate = useNavigate();
const [payment, setPayment] = useState<VmPayment>(); const [payment, setPayment] = useState<VmPayment>();
const [term, setTerm] = useState<Terminal>(); const [term] = useState<Terminal>();
const termRef = useRef<HTMLDivElement | null>(null); const termRef = useRef<HTMLDivElement | null>(null);
const [editKey, setEditKey] = useState(false); const [editKey, setEditKey] = useState(false);
const [key, setKey] = useState(state?.ssh_key_id ?? -1); const [key, setKey] = useState(state?.ssh_key_id ?? -1);
const api = useMemo(() => {
if (!login?.builder) return;
return new LNVpsApi(ApiUrl, login.builder);
}, [login]);
const renew = useCallback( const renew = useCallback(
async function () { async function () {
if (!api || !state) return; if (!login?.api || !state) return;
const p = await api.renewVm(state.id); const p = await login?.api.renewVm(state.id);
setPayment(p); setPayment(p);
}, },
[api, state], [login?.api, state],
); );
async function openTerminal() { /*async function openTerminal() {
if (!login?.builder || !state) return; if (!login?.api || !state) return;
const api = new LNVpsApi(ApiUrl, login.builder); const ws = await login.api.connect_terminal(state.id);
const ws = await api.connect_terminal(state.id);
const te = new Terminal(); const te = new Terminal();
const webgl = new WebglAddon(); const webgl = new WebglAddon();
webgl.onContextLoss(() => { webgl.onContextLoss(() => {
@ -62,7 +53,7 @@ export default function VmPage() {
const attach = new AttachAddon(ws); const attach = new AttachAddon(ws);
te.loadAddon(attach); te.loadAddon(attach);
setTerm(te); setTerm(te);
} }*/
useEffect(() => { useEffect(() => {
if (term && termRef.current) { if (term && termRef.current) {
@ -136,9 +127,8 @@ export default function VmPage() {
<VpsPayment <VpsPayment
payment={payment} payment={payment}
onPaid={async () => { onPaid={async () => {
if (!login?.builder || !state) return; if (!login?.api || !state) return;
const api = new LNVpsApi(ApiUrl, login.builder); const newState = await login?.api.getVm(state.id);
const newState = await api.getVm(state.id);
navigate("/vm", { navigate("/vm", {
state: newState, state: newState,
}); });
@ -155,11 +145,11 @@ export default function VmPage() {
<small>After selecting a new key, please restart the VM.</small> <small>After selecting a new key, please restart the VM.</small>
<AsyncButton <AsyncButton
onClick={async () => { onClick={async () => {
if (!state) return; if (!login?.api) return;
await api?.patchVm(state.id, { await login.api.patchVm(state.id, {
ssh_key_id: key, ssh_key_id: key,
}); });
const ns = await api?.getVm(state?.id); const ns = await login.api.getVm(state?.id);
navigate(".", { navigate(".", {
state: ns, state: ns,
replace: true, replace: true,