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

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

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

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

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

5
src/hooks/login.tsx
View File

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

8
src/pages/account.tsx
View File

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

13
src/pages/order.tsx
View File

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

40
src/pages/vm.tsx
View File

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