Loading...
,
+ HydrateFallback: () => {m.loading()}
,
loader: DeviceRoute.loader,
children: [
{
@@ -391,14 +391,12 @@ document.addEventListener("DOMContentLoaded", () => {
// eslint-disable-next-line react-refresh/only-export-components
function ErrorBoundary() {
const error = useRouteError();
-
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-expect-error
- const errorMessage = error?.data?.error?.message || error?.message;
if (isRouteErrorResponse(error)) {
if (error.status === 404) return
diff --git a/ui/src/notifications.tsx b/ui/src/notifications.tsx
index 257cff14..c635e3df 100644
--- a/ui/src/notifications.tsx
+++ b/ui/src/notifications.tsx
@@ -1,8 +1,8 @@
-import toast, { Toast, Toaster, useToasterStore } from "react-hot-toast";
import React, { useEffect } from "react";
+import toast, { Toast, Toaster, useToasterStore } from "react-hot-toast";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
-import Card from "@/components/Card";
+import Card from "@components/Card";
interface NotificationOptions {
duration?: number;
diff --git a/ui/src/routes/devices.$id.deregister.tsx b/ui/src/routes/devices.$id.deregister.tsx
index e5dd2a35..2ae40783 100644
--- a/ui/src/routes/devices.$id.deregister.tsx
+++ b/ui/src/routes/devices.$id.deregister.tsx
@@ -2,14 +2,15 @@ import { Form, redirect, useActionData, useLoaderData } from "react-router";
import type { ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs } from "react-router";
import { ChevronLeftIcon } from "@heroicons/react/16/solid";
+import { User } from "@hooks/stores";
import { Button, LinkButton } from "@components/Button";
import Card from "@components/Card";
import { CardHeader } from "@components/CardHeader";
import DashboardNavbar from "@components/Header";
-import { User } from "@/hooks/stores";
-import { checkAuth } from "@/main";
import Fieldset from "@components/Fieldset";
+import { checkAuth } from "@/main";
import { CLOUD_API } from "@/ui.config";
+import { m } from "@localizations/messages.js";
interface LoaderData {
device: { id: string; name: string; user: { googleId: string } };
@@ -28,11 +29,12 @@ const action: ActionFunction = async ({ request }: ActionFunctionArgs) => {
});
if (!res.ok) {
- return { message: "There was an error deregistering your device. Please try again." };
+ return { message: m.deregister_error({ status: res.statusText }) };
}
} catch (e) {
console.error(e);
- return { message: "There was an error deregistering your device. Please try again." };
+ const message = e instanceof Error ? e.message : String(e);
+ return { message: m.deregister_error({ status: message }) };
}
return redirect("/devices");
@@ -68,7 +70,7 @@ export default function DevicesIdDeregister() {
- This will remove the device from your cloud account and revoke
- remote access to it.
-
- Please note that local access will still be possible - - } + headline={m.deregister_headline({ device: device.name || device.id })} + description={m.deregister_description()} />
{error?.message && (
{modalView === "mode" && (
@@ -238,26 +239,26 @@ function ModeSelectionView({
@@ -410,8 +411,8 @@ function UrlView({
return (
)}
@@ -1205,7 +1203,7 @@ function UploadFileView({
className="mt-2 animate-fadeIn truncate text-sm text-red-600 dark:text-red-400 opacity-0"
style={{ animationDuration: "0.7s" }}
>
- Error: {uploadError}
+ {m.mount_upload_error({ error: String(uploadError) })}
)}
@@ -1221,7 +1219,7 @@ function UploadFileView({
- Please note that local access will still be possible - - } + headline={m.deregister_headline({ device: device.name || device.id })} + description={m.deregister_description()} />
- {error?.message} + {m.deregister_error({ status: error.message })}
)} diff --git a/ui/src/routes/devices.$id.mount.tsx b/ui/src/routes/devices.$id.mount.tsx index 4672ef99..5c6afa46 100644 --- a/ui/src/routes/devices.$id.mount.tsx +++ b/ui/src/routes/devices.$id.mount.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useNavigate } from "react-router"; import { LuLink, LuRadioReceiver, @@ -7,28 +8,28 @@ import { } from "react-icons/lu"; import { PlusCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/20/solid"; import { TrashIcon } from "@heroicons/react/16/solid"; -import { useNavigate } from "react-router"; +import DebianIcon from "@assets/debian-icon.png"; +import UbuntuIcon from "@assets/ubuntu-icon.png"; +import FedoraIcon from "@assets/fedora-icon.png"; +import OpenSUSEIcon from "@assets/opensuse-icon.png"; +import ArchIcon from "@assets/arch-icon.png"; +import NetBootIcon from "@assets/netboot-icon.svg"; +import LogoBlueIcon from "@assets/logo-blue.svg"; +import LogoWhiteIcon from "@assets/logo-white.svg"; +import { cx } from "@/cva.config"; -import Card, { GridCard } from "@/components/Card"; -import { Button } from "@components/Button"; -import LogoBlueIcon from "@/assets/logo-blue.svg"; -import LogoWhiteIcon from "@/assets/logo-white.svg"; -import { formatters } from "@/utils"; +import { JsonRpcResponse, useJsonRpc } from "@hooks/useJsonRpc"; import AutoHeight from "@components/AutoHeight"; +import { Button } from "@components/Button"; +import Card, { GridCard } from "@components/Card"; +import Fieldset from "@components/Fieldset"; import { InputFieldWithLabel } from "@/components/InputField"; -import DebianIcon from "@/assets/debian-icon.png"; -import UbuntuIcon from "@/assets/ubuntu-icon.png"; -import FedoraIcon from "@/assets/fedora-icon.png"; -import OpenSUSEIcon from "@/assets/opensuse-icon.png"; -import ArchIcon from "@/assets/arch-icon.png"; -import NetBootIcon from "@/assets/netboot-icon.svg"; -import Fieldset from "@/components/Fieldset"; +import { formatters } from "@/utils"; import { DEVICE_API } from "@/ui.config"; +import { isOnDevice } from "@/main"; +import notifications from "@/notifications"; +import { m } from "@localizations/messages.js"; -import { JsonRpcResponse, useJsonRpc } from "../hooks/useJsonRpc"; -import notifications from "../notifications"; -import { isOnDevice } from "../main"; -import { cx } from "../cva.config"; import { MountMediaState, RemoteVirtualMediaState, @@ -145,12 +146,12 @@ export function Dialog({ onClose }: { onClose: () => void }) {- Virtual Media Source + {m.mount_virtual_media_source()}
- Choose how you want to mount your virtual media
+ {m.mount_virtual_media_source_description()}
{[
{
- label: "URL Mount",
+ label: m.mount_url_mount(),
value: "url",
- description: "Mount files from any public web address",
+ description: m.mount_url_description(),
icon: LuLink,
- tag: "Experimental",
+ tag: m.experimental(),
disabled: false,
},
{
- label: "JetKVM Storage Mount",
+ label: m.mount_jetkvm_storage(),
value: "device",
- description: "Mount previously uploaded files from the JetKVM storage",
+ description: m.mount_jetkvm_storage_description(),
icon: LuRadioReceiver,
tag: null,
disabled: false,
@@ -332,7 +333,7 @@ function ModeSelectionView({
onClick={() => {
setModalView(selectedMode);
}}
- text="Continue"
+ text={m.continue()}
/>
handleUrlChange(e.target.value)}
@@ -440,12 +441,12 @@ function UrlView({
-
+
@@ -553,7 +554,7 @@ function DeviceFileView({
const syncStorage = useCallback(() => {
send("listStorageFiles", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) {
- notifications.error(`Error listing storage files: ${resp.error}`);
+ notifications.error(m.mount_error_list_storage({ error: resp.error }));
return;
}
const { files } = resp.result as StorageFiles;
@@ -568,7 +569,7 @@ function DeviceFileView({
send("getStorageSpace", {}, (resp: JsonRpcResponse) => {
if ("error" in resp) {
- notifications.error(`Error getting storage space: ${resp.error}`);
+ notifications.error(m.mount_error_get_storage_space({ error: resp.error }));
return;
}
@@ -597,7 +598,7 @@ function DeviceFileView({
console.log("Deleting file:", file);
send("deleteStorageFile", { filename: file.name }, (resp: JsonRpcResponse) => {
if ("error" in resp) {
- notifications.error(`Error deleting file: ${resp.error}`);
+ notifications.error(m.mount_error_delete_file({ error: resp.error }));
return;
}
@@ -630,8 +631,8 @@ function DeviceFileView({
return (
- No images available + {m.mount_no_images_title()}
- Upload an image to start virtual media mounting. + {m.mount_no_images_description()}
- Showing {indexOfFirstFile + 1} to{" "} - - {Math.min(indexOfLastFile, onStorageFiles.length)} - {" "} - of {onStorageFiles.length} results + {m.mount_button_showing_results({ + from: indexOfFirstFile + 1, + to: Math.min(indexOfLastFile, onStorageFiles.length), + total: onStorageFiles.length + })}
@@ -738,7 +737,7 @@ function DeviceFileView({
size="MD"
disabled={selected === null || mountInProgress}
theme="primary"
- text="Mount File"
+ text={m.mount_button_mount_file()}
loading={mountInProgress}
onClick={() =>
onMountStorageFile(
@@ -772,10 +771,10 @@ function DeviceFileView({
>
@@ -806,7 +805,7 @@ function DeviceFileView({
size="MD"
theme="light"
fullWidth
- text="Upload a new image"
+ text={m.mount_button_upload_new_image()}
onClick={() => onNewImageClick()}
/>
- Available Storage
+ {m.mount_available_storage()}
- {percentageUsed}% used
+ {m.mount_percentage_used({ percentageUsed })}
@@ -786,10 +785,10 @@ function DeviceFileView({
- {formatters.bytes(bytesUsed)} used
+ {m.mount_bytes_used({ bytesUsed: formatters.bytes(bytesUsed) })}
- {formatters.bytes(bytesFree)} free
+ {m.mount_bytes_free({ bytesFree: formatters.bytes(bytesFree) })}
{incompleteFileName - ? `Click to select "${incompleteFileName.replace(".incomplete", "")}"` - : "Click to select a file"} + ? m.mount_click_to_select_incomplete({ name: incompleteFileName.replace(".incomplete", "") }) + : m.mount_click_to_select_file()}
- Supported formats: ISO, IMG + {m.mount_supported_formats()}
- Uploading {formatters.truncateMiddle(uploadedFileName, 30)} + {m.mount_uploading_with_name({ name: formatters.truncateMiddle(uploadedFileName, 30) })}
{formatters.bytes(uploadedFileSize || 0)} @@ -1153,11 +1152,11 @@ function UploadFileView({ >
- Uploading...
+ {m.mount_uploading()}
{uploadSpeed !== null
? `${formatters.bytes(uploadSpeed)}/s`
- : "Calculating..."}
+ : m.mount_calculating()}
- Upload successful + {m.mount_upload_successful()}
- {formatters.truncateMiddle(uploadedFileName, 40)} has been - uploaded + {m.mount_uploaded_has_been_uploaded({ name: formatters.truncateMiddle(uploadedFileName, 40) })}