Merge branch 'develop' into riobuenoDevelops/pinning-network
This commit is contained in:
Juan Di Toro
commit
e1ca45f1f1
|
|
@ -1,8 +1,8 @@
|
|||
import { useMemo} from "react";
|
||||
import { BaseRecord } from "@refinedev/core";
|
||||
import type { BaseRecord } from "@refinedev/core";
|
||||
import { useTable } from "@refinedev/react-table";
|
||||
import {
|
||||
ColumnDef,
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
} from "@tanstack/react-table";
|
||||
|
||||
|
|
@ -56,9 +56,9 @@ export function DataTable<TData extends BaseRecord, TValue>({
|
|||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
{headerGroup.headers.map((header, index) => {
|
||||
return (
|
||||
<TableHead key={header.id} style={{ width: header.getSize() }}>
|
||||
<TableHead key={`FileDataTableHeader_${index}`} style={{ width: header.getSize() }}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
|
|
@ -73,14 +73,14 @@ export function DataTable<TData extends BaseRecord, TValue>({
|
|||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.length ? (
|
||||
rows.map((row) => (
|
||||
rows.map((row, index) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
key={`FileDataTableRow_${index}`}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="group"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{row.getVisibleCells().map((cell, index) => (
|
||||
<TableCell key={`FileDataTableCell_${index}`}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Label } from "@radix-ui/react-label"
|
||||
import { Input } from "./ui/input"
|
||||
import { FieldName, useInputControl } from "@conform-to/react"
|
||||
import { type FieldName, useInputControl } from "@conform-to/react"
|
||||
import { useId } from "react"
|
||||
import { cn } from "~/utils"
|
||||
import { Checkbox } from "~/components/ui/checkbox"
|
||||
|
|
@ -58,7 +58,7 @@ export const FieldCheckbox = ({
|
|||
const input = useInputControl({
|
||||
key,
|
||||
name: inputProps.name,
|
||||
formId: inputProps.form,
|
||||
formId: inputProps.form,
|
||||
initialValue: defaultChecked ? checkedValue : undefined
|
||||
})
|
||||
const fallbackId = useId()
|
||||
|
|
|
|||
|
|
@ -25,20 +25,30 @@ import {
|
|||
PageIcon,
|
||||
ThemeIcon,
|
||||
} from "./icons";
|
||||
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem } from "./ui/dropdown-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
} from "./ui/dropdown-menu";
|
||||
import { Avatar } from "@radix-ui/react-avatar";
|
||||
import { cn } from "~/utils";
|
||||
import { useGetIdentity, useLogout } from "@refinedev/core";
|
||||
import { Identity } from "~/data/auth-provider";
|
||||
import { PinningNetworkBanner } from "./pinning-network-banner";
|
||||
import { PinningProvider } from "~/providers/PinningProvider";
|
||||
import type { Identity } from "~/data/auth-provider";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
TooltipProvider,
|
||||
} from "./ui/tooltip";
|
||||
|
||||
|
||||
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
|
||||
export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
|
||||
const location = useLocation();
|
||||
const { data: identity } = useGetIdentity<Identity>();
|
||||
const{ mutate: logout } = useLogout()
|
||||
|
||||
const { mutate: logout } = useLogout();
|
||||
return (
|
||||
<PinningProvider>
|
||||
<div className="h-full flex flex-row">
|
||||
|
|
@ -93,7 +103,6 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
|
|||
</DialogContent>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-10">
|
||||
<div className="flex items-center gap-x-4 justify-end">
|
||||
<Button variant="ghost" className="rounded-full w-fit">
|
||||
|
|
@ -142,7 +151,11 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
|
|||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
<img
|
||||
className="h-5"
|
||||
src={lumeColorLogoPng}
|
||||
alt="Lume Logo"
|
||||
/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
|
|
@ -252,6 +265,7 @@ const UploadFileItem = ({
|
|||
file: UppyFile;
|
||||
onRemove: (id: string) => void;
|
||||
}) => {
|
||||
const sizeInMb = bytestoMegabytes(file.size).toFixed(2);
|
||||
return (
|
||||
<div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
|
||||
<div className="flex text-primary-1 items-center justify-between">
|
||||
|
|
@ -263,12 +277,23 @@ const UploadFileItem = ({
|
|||
<PageIcon className="w-4 h-4" />
|
||||
)}
|
||||
</div>
|
||||
<p className="w-full flex justify-between items-center">
|
||||
<span className="truncate text-ellipsis max-w-[30ch]">
|
||||
{file.name}
|
||||
</span>{" "}
|
||||
<span>({bytestoMegabytes(file.size).toFixed(2)} MB)</span>
|
||||
</p>
|
||||
<TooltipProvider>
|
||||
<Tooltip delayDuration={500}>
|
||||
<TooltipTrigger>
|
||||
<p className="w-full flex justify-between items-center">
|
||||
<span className="truncate text-ellipsis max-w-[20ch]">
|
||||
{file.name}
|
||||
</span>{" "}
|
||||
<span>({sizeInMb}MB)</span>
|
||||
</p>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>
|
||||
{file.name} ({sizeInMb}MB)
|
||||
</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Button
|
||||
size={"icon"}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
import Uppy, {debugLogger, type State, UppyFile} from "@uppy/core"
|
||||
import Uppy, { debugLogger, type State, type UppyFile } from "@uppy/core";
|
||||
|
||||
import Tus from "@uppy/tus"
|
||||
import toArray from "@uppy/utils/lib/toArray"
|
||||
import Tus from "@uppy/tus";
|
||||
import toArray from "@uppy/utils/lib/toArray";
|
||||
|
||||
import {type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState} from "react"
|
||||
import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
|
||||
import {useSdk} from "~/components/lib/sdk-context.js";
|
||||
import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
|
||||
import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
|
||||
import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
|
||||
import {
|
||||
type ChangeEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import DropTarget, { type DropTargetOptions } from "./uppy-dropzone";
|
||||
import { useSdk } from "~/components/lib/sdk-context";
|
||||
import UppyFileUpload from "~/components/lib/uppy-file-upload";
|
||||
import { PROTOCOL_S5, type Sdk } from "@lumeweb/portal-sdk";
|
||||
import type { S5Client, HashProgressEvent } from "@lumeweb/s5-js";
|
||||
|
||||
const LISTENING_EVENTS = [
|
||||
"upload",
|
||||
|
|
@ -16,46 +23,46 @@ const LISTENING_EVENTS = [
|
|||
"upload-error",
|
||||
"file-added",
|
||||
"file-removed",
|
||||
"files-added"
|
||||
] as const
|
||||
"files-added",
|
||||
] as const;
|
||||
|
||||
export function useUppy() {
|
||||
const sdk = useSdk()
|
||||
const sdk = useSdk();
|
||||
|
||||
const [uploadLimit, setUploadLimit] = useState<number>(0)
|
||||
const [uploadLimit, setUploadLimit] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
async function getUploadLimit() {
|
||||
try {
|
||||
const limit = await sdk.account!().uploadLimit();
|
||||
setUploadLimit(limit);
|
||||
} catch (err) {
|
||||
console.log('Error occured while fetching upload limit', err);
|
||||
}
|
||||
}
|
||||
getUploadLimit();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
async function getUploadLimit() {
|
||||
try {
|
||||
const limit = await sdk.account!().uploadLimit();
|
||||
setUploadLimit(limit);
|
||||
} catch (err) {
|
||||
console.log("Error occured while fetching upload limit", err);
|
||||
}
|
||||
}
|
||||
getUploadLimit();
|
||||
}, [sdk.account]);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null)
|
||||
const uppyInstance = useRef<Uppy>()
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [targetRef, _setTargetRef] = useState<HTMLElement | null>(null);
|
||||
const uppyInstance = useRef<Uppy>();
|
||||
const setRef = useCallback(
|
||||
(element: HTMLElement | null) => _setTargetRef(element),
|
||||
[]
|
||||
)
|
||||
const [, setUppyState] = useState<State>()
|
||||
[],
|
||||
);
|
||||
const [, setUppyState] = useState<State>();
|
||||
const [state, setState] = useState<
|
||||
"completed" | "idle" | "initializing" | "error" | "uploading"
|
||||
>("initializing")
|
||||
>("initializing");
|
||||
|
||||
const [inputProps, setInputProps] = useState<
|
||||
| {
|
||||
ref: typeof inputRef
|
||||
type: "file"
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
ref: typeof inputRef;
|
||||
type: "file";
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
}
|
||||
| object
|
||||
>({})
|
||||
>({});
|
||||
const getRootProps = useMemo(
|
||||
() => () => {
|
||||
return {
|
||||
|
|
@ -63,103 +70,110 @@ export function useUppy() {
|
|||
onClick: () => {
|
||||
if (inputRef.current) {
|
||||
//@ts-expect-error -- dumb html
|
||||
inputRef.current.value = null
|
||||
inputRef.current.click()
|
||||
console.log("clicked", { input: inputRef.current })
|
||||
inputRef.current.value = null;
|
||||
inputRef.current.click();
|
||||
console.log("clicked", { input: inputRef.current });
|
||||
}
|
||||
},
|
||||
role: "presentation"
|
||||
}
|
||||
role: "presentation",
|
||||
};
|
||||
},
|
||||
[setRef]
|
||||
)
|
||||
[setRef],
|
||||
);
|
||||
const removeFile = useCallback(
|
||||
(id: string) => {
|
||||
uppyInstance.current?.removeFile(id)
|
||||
uppyInstance.current?.removeFile(id);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[targetRef, uppyInstance]
|
||||
)
|
||||
[targetRef, uppyInstance],
|
||||
);
|
||||
const cancelAll = useCallback(
|
||||
() => uppyInstance.current?.cancelAll({ reason: "user" }),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[targetRef, uppyInstance]
|
||||
)
|
||||
[targetRef, uppyInstance],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!targetRef) return
|
||||
if (!targetRef) return;
|
||||
|
||||
const tusPreprocessor = async (fileIDs: string[]) => {
|
||||
for(const fileID of fileIDs) {
|
||||
const file = uppyInstance.current?.getFile(fileID) as UppyFile
|
||||
// @ts-ignore
|
||||
if (file.uploader === "tus") {
|
||||
const hashProgressCb = (event: HashProgressEvent) => {
|
||||
uppyInstance.current?.emit("preprocess-progress", file, {
|
||||
uploadStarted: false,
|
||||
bytesUploaded: 0,
|
||||
preprocess: {
|
||||
mode: "determinate",
|
||||
message: "Hashing file...",
|
||||
value: Math.round((event.total / event.total) * 100)
|
||||
}
|
||||
})
|
||||
}
|
||||
const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File, {}, {onHashProgress: hashProgressCb})
|
||||
uppyInstance.current?.setFileState(fileID, {
|
||||
tus: options,
|
||||
meta: {
|
||||
...options.metadata,
|
||||
...file.meta,
|
||||
}
|
||||
})
|
||||
}
|
||||
const tusPreprocessor = async (fileIDs: string[]) => {
|
||||
for (const fileID of fileIDs) {
|
||||
const file = uppyInstance.current?.getFile(fileID) as UppyFile;
|
||||
// @ts-ignore
|
||||
if (file.uploader === "tus") {
|
||||
const hashProgressCb = (event: HashProgressEvent) => {
|
||||
uppyInstance.current?.emit("preprocess-progress", file, {
|
||||
uploadStarted: false,
|
||||
bytesUploaded: 0,
|
||||
preprocess: {
|
||||
mode: "determinate",
|
||||
message: "Hashing file...",
|
||||
value: Math.round((event.total / event.total) * 100),
|
||||
},
|
||||
});
|
||||
};
|
||||
const options = await sdk.protocols!()
|
||||
.get<S5Client>(PROTOCOL_S5)
|
||||
.getSdk()
|
||||
.getTusOptions(
|
||||
file.data as File,
|
||||
{},
|
||||
{ onHashProgress: hashProgressCb },
|
||||
);
|
||||
uppyInstance.current?.setFileState(fileID, {
|
||||
tus: options,
|
||||
meta: {
|
||||
...options.metadata,
|
||||
...file.meta,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const uppy = new Uppy({
|
||||
logger: debugLogger,
|
||||
onBeforeUpload: (files) => {
|
||||
for (const file of Object.entries(files)) {
|
||||
// @ts-ignore
|
||||
file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
|
||||
}
|
||||
logger: debugLogger,
|
||||
onBeforeUpload: (files) => {
|
||||
for (const file of Object.entries(files)) {
|
||||
// @ts-ignore
|
||||
file[1].uploader = file[1].size > uploadLimit ? "tus" : "file";
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
return true;
|
||||
},
|
||||
}).use(DropTarget, {
|
||||
target: targetRef
|
||||
} as DropTargetOptions)
|
||||
target: targetRef,
|
||||
} as DropTargetOptions);
|
||||
|
||||
uppyInstance.current = uppy
|
||||
uppyInstance.current = uppy;
|
||||
setInputProps({
|
||||
ref: inputRef,
|
||||
type: "file",
|
||||
onChange: (event) => {
|
||||
const files = toArray(event.target.files)
|
||||
const files = toArray(event.target.files);
|
||||
if (files.length > 0) {
|
||||
uppyInstance.current?.log("[DragDrop] Files selected through input")
|
||||
uppyInstance.current?.addFiles(files)
|
||||
uppyInstance.current?.log("[DragDrop] Files selected through input");
|
||||
uppyInstance.current?.addFiles(files);
|
||||
}
|
||||
|
||||
uppy.iteratePlugins((plugin) => {
|
||||
uppy.removePlugin(plugin);
|
||||
uppy.removePlugin(plugin);
|
||||
});
|
||||
|
||||
uppy.use(UppyFileUpload, { sdk: sdk as Sdk })
|
||||
uppy.use(UppyFileUpload, { sdk: sdk as Sdk });
|
||||
|
||||
let useTus = false;
|
||||
let useTus = false;
|
||||
|
||||
uppyInstance.current?.getFiles().forEach((file) => {
|
||||
if (file.size > uploadLimit) {
|
||||
useTus = true;
|
||||
}
|
||||
})
|
||||
|
||||
if (useTus) {
|
||||
uppy.use(Tus, { limit: 6, parallelUploads: 10 })
|
||||
uppy.addPreProcessor(tusPreprocessor)
|
||||
uppyInstance.current?.getFiles().forEach((file) => {
|
||||
if (file.size > uploadLimit) {
|
||||
useTus = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (useTus) {
|
||||
uppy.use(Tus, { limit: 6, parallelUploads: 10 });
|
||||
uppy.addPreProcessor(tusPreprocessor);
|
||||
}
|
||||
|
||||
// We clear the input after a file is selected, because otherwise
|
||||
// change event is not fired in Chrome and Safari when a file
|
||||
|
|
@ -169,54 +183,52 @@ export function useUppy() {
|
|||
// Chrome will not trigger change if we drop the same file twice (Issue #768).
|
||||
// @ts-expect-error TS freaks out, but this is fine
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
event.target.value = null
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
event.target.value = null;
|
||||
},
|
||||
});
|
||||
|
||||
uppy.on("complete", (result) => {
|
||||
if (result.failed.length === 0) {
|
||||
console.log("Upload successful üòÄ")
|
||||
setState("completed")
|
||||
console.log("Upload successful üòÄ");
|
||||
setState("completed");
|
||||
} else {
|
||||
console.warn("Upload failed üòû")
|
||||
setState("error")
|
||||
console.warn("Upload failed üòû");
|
||||
setState("error");
|
||||
}
|
||||
console.log("successful files:", result.successful)
|
||||
console.log("failed files:", result.failed)
|
||||
})
|
||||
console.log("successful files:", result.successful);
|
||||
console.log("failed files:", result.failed);
|
||||
});
|
||||
|
||||
const setStateCb = (event: (typeof LISTENING_EVENTS)[number]) => {
|
||||
switch (event) {
|
||||
case "upload":
|
||||
setState("uploading")
|
||||
break
|
||||
setState("uploading");
|
||||
break;
|
||||
case "upload-error":
|
||||
setState("error")
|
||||
break
|
||||
setState("error");
|
||||
break;
|
||||
default:
|
||||
break
|
||||
break;
|
||||
}
|
||||
setUppyState(uppy.getState())
|
||||
}
|
||||
setUppyState(uppy.getState());
|
||||
};
|
||||
|
||||
for (const event of LISTENING_EVENTS) {
|
||||
uppy.on(event, function cb() {
|
||||
setStateCb(event)
|
||||
})
|
||||
setStateCb(event);
|
||||
});
|
||||
}
|
||||
setState("idle")
|
||||
}, [targetRef, uploadLimit])
|
||||
setState("idle");
|
||||
}, [targetRef, uploadLimit]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
uppyInstance.current?.cancelAll({ reason: "unmount" })
|
||||
uppyInstance.current?.logout()
|
||||
uppyInstance.current?.close()
|
||||
uppyInstance.current = undefined
|
||||
}
|
||||
}, [])
|
||||
uppyInstance.current?.cancelAll({ reason: "unmount" });
|
||||
uppyInstance.current?.logout();
|
||||
uppyInstance.current?.close();
|
||||
uppyInstance.current = undefined;
|
||||
};
|
||||
}, []);
|
||||
return {
|
||||
getFiles: () => uppyInstance.current?.getFiles() ?? [],
|
||||
error: uppyInstance.current?.getState,
|
||||
|
|
@ -227,6 +239,6 @@ export function useUppy() {
|
|||
getInputProps: () => inputProps,
|
||||
getRootProps,
|
||||
removeFile,
|
||||
cancelAll
|
||||
}
|
||||
cancelAll,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
|
|||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function Toaster() {
|
|||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
|
||||
{toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
|
||||
const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
|
||||
return (
|
||||
<Toast key={id} {...props}>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
|
||||
import { cn } from "~/utils"
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
|
|
@ -50,7 +50,7 @@ export const UsageChart = ({ label, dataset }: UsageChartProps) => {
|
|||
<AnimatedAxis
|
||||
orientation="bottom"
|
||||
hideTicks
|
||||
tickTransform="translateX(50%)"
|
||||
tickTransform="translate(50 0)"
|
||||
tickLabelProps={{ className: "text-sm" }}
|
||||
/>
|
||||
<AnimatedAxis
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const accountProvider: SdkProvider = {
|
|||
|
||||
if (ret) {
|
||||
if (ret instanceof Error) {
|
||||
return Promise.reject(ret)
|
||||
return Promise.reject(ret satisfies HttpError)
|
||||
}
|
||||
} else {
|
||||
return Promise.reject();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import type {AuthProvider, UpdatePasswordFormTypes} from "@refinedev/core"
|
||||
import type {AuthProvider, HttpError, UpdatePasswordFormTypes} from "@refinedev/core"
|
||||
|
||||
import type {
|
||||
AuthActionResponse,
|
||||
CheckResponse,
|
||||
IdentityResponse,
|
||||
OnErrorResponse
|
||||
OnErrorResponse,
|
||||
SuccessNotificationResponse
|
||||
// @ts-ignore
|
||||
} from "@refinedev/core/dist/interfaces/bindings/auth"
|
||||
import {Sdk} from "@lumeweb/portal-sdk";
|
||||
import {Sdk, AccountError} from "@lumeweb/portal-sdk";
|
||||
import type {AccountInfoResponse} from "@lumeweb/portal-sdk";
|
||||
|
||||
|
||||
export type AuthFormRequest = {
|
||||
email: string;
|
||||
password: string;
|
||||
|
|
@ -31,7 +33,7 @@ export type Identity = {
|
|||
email: string;
|
||||
}
|
||||
|
||||
export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes{
|
||||
export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes {
|
||||
currentPassword: string;
|
||||
}
|
||||
|
||||
|
|
@ -43,6 +45,54 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
|
|||
}
|
||||
};
|
||||
|
||||
type ResponseResult = {
|
||||
ret: boolean | Error;
|
||||
successNotification?: SuccessNotificationResponse;
|
||||
redirectToSuccess?: string;
|
||||
redirectToError?: string;
|
||||
successCb?: () => void;
|
||||
}
|
||||
|
||||
interface CheckResponseResult extends ResponseResult {
|
||||
authenticated?: boolean;
|
||||
}
|
||||
|
||||
const handleResponse = (result: ResponseResult): AuthActionResponse => {
|
||||
if (result.ret) {
|
||||
if (result.ret instanceof AccountError) {
|
||||
return {
|
||||
success: false,
|
||||
error: result.ret satisfies HttpError,
|
||||
redirectTo: result.redirectToError
|
||||
}
|
||||
}
|
||||
|
||||
result.successCb?.();
|
||||
|
||||
return {
|
||||
success: true,
|
||||
successNotification: result.successNotification,
|
||||
redirectTo: result.redirectToSuccess,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: false,
|
||||
redirectTo: result.redirectToError
|
||||
}
|
||||
}
|
||||
|
||||
const handleCheckResponse = (result: CheckResponseResult): CheckResponse => {
|
||||
const response = handleResponse(result);
|
||||
const success = response.success;
|
||||
delete response.success;
|
||||
|
||||
return {
|
||||
...response,
|
||||
authenticated: success
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
async login(params: AuthFormRequest): Promise<AuthActionResponse> {
|
||||
const ret = await sdk.account().login({
|
||||
|
|
@ -50,39 +100,30 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
|
|||
password: params.password,
|
||||
});
|
||||
|
||||
let redirectTo: string | undefined;
|
||||
return handleResponse({
|
||||
ret, redirectToSuccess: "/dashboard", redirectToError: "/login", successCb: () => {
|
||||
sdk.setAuthToken(sdk.account().jwtToken);
|
||||
}, successNotification: {
|
||||
message: "Login Successful",
|
||||
description: "You have successfully logged in."
|
||||
|
||||
if (ret) {
|
||||
redirectTo = params.redirectTo;
|
||||
if (!redirectTo) {
|
||||
redirectTo = ret ? "/dashboard" : "/login";
|
||||
}
|
||||
sdk.setAuthToken(sdk.account().jwtToken);
|
||||
}
|
||||
|
||||
return {
|
||||
success: ret,
|
||||
redirectTo,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
async logout(params: any): Promise<AuthActionResponse> {
|
||||
let ret = await sdk.account().logout();
|
||||
return {success: ret, redirectTo: "/login"};
|
||||
return handleResponse({ret, redirectToSuccess: "/login"});
|
||||
},
|
||||
|
||||
async check(params?: any): Promise<CheckResponse> {
|
||||
const ret = await sdk.account().ping();
|
||||
|
||||
if (ret) {
|
||||
maybeSetupAuth();
|
||||
}
|
||||
|
||||
return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
|
||||
return handleCheckResponse({ret, redirectToError: "/login", successCb: maybeSetupAuth});
|
||||
},
|
||||
|
||||
async onError(error: any): Promise<OnErrorResponse> {
|
||||
return {logout: true};
|
||||
return {};
|
||||
},
|
||||
|
||||
async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
|
||||
|
|
@ -92,7 +133,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
|
|||
first_name: params.firstName,
|
||||
last_name: params.lastName,
|
||||
});
|
||||
return {success: ret, redirectTo: ret ? "/dashboard" : undefined};
|
||||
return handleResponse({
|
||||
ret, redirectToSuccess: "/login", successNotification: {
|
||||
message: "Registration Successful",
|
||||
description: "You have successfully registered. Please check your email to verify your account.",
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async forgotPassword(params: any): Promise<AuthActionResponse> {
|
||||
|
|
@ -103,22 +149,12 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
|
|||
maybeSetupAuth();
|
||||
const ret = await sdk.account().updatePassword(params.currentPassword, params.password as string);
|
||||
|
||||
if (ret) {
|
||||
if (ret instanceof Error) {
|
||||
return {
|
||||
success: false,
|
||||
error: ret
|
||||
}
|
||||
return handleResponse({
|
||||
ret, successNotification: {
|
||||
message: "Password Updated",
|
||||
description: "Your password has been updated successfully.",
|
||||
}
|
||||
|
||||
return {
|
||||
success: true
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
success: false
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {
|
||||
|
|
|
|||
|
|
@ -1,52 +1,134 @@
|
|||
import type { DataProvider } from "@refinedev/core";
|
||||
import { SdkProvider } from "~/data/sdk-provider.js";
|
||||
import type {SdkProvider} from "~/data/sdk-provider.js";
|
||||
import type {S5Client} from "@lumeweb/s5-js";
|
||||
import {PROTOCOL_S5} from "@lumeweb/portal-sdk";
|
||||
import {Multihash} from "@lumeweb/libs5/lib/multihash.js";
|
||||
import type {AxiosProgressEvent} from "axios";
|
||||
import {CID, CID_TYPES, METADATA_TYPES, metadataMagicByte, Unpacker} from "@lumeweb/libs5";
|
||||
|
||||
export const fileProvider = {
|
||||
getList: () => {
|
||||
console.log("Not implemented");
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
name: "whirly-final-draft.psd",
|
||||
cid: "0xB45165ED3CD437B",
|
||||
size: "1.89 MB",
|
||||
createdOn: " 03/02/2024 at 13:29 PM",
|
||||
},
|
||||
{
|
||||
name: "whirly-final-draft.psd",
|
||||
cid: "0xB45165ED3CD437B",
|
||||
size: "1.89 MB",
|
||||
createdOn: " 03/02/2024 at 13:29 PM",
|
||||
},
|
||||
],
|
||||
total: 2
|
||||
async function getIsManifest(s5: S5Client, hash: string): Promise<boolean | number> {
|
||||
let type: number | null;
|
||||
try {
|
||||
const abort = new AbortController();
|
||||
const resp = s5.downloadData(hash, {
|
||||
onDownloadProgress: (progressEvent: AxiosProgressEvent) => {
|
||||
if (progressEvent.loaded >= 10) {
|
||||
abort.abort();
|
||||
}
|
||||
},
|
||||
httpConfig: {
|
||||
signal: abort.signal,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await resp;
|
||||
const unpacker = Unpacker.fromPacked(Buffer.from(data));
|
||||
try {
|
||||
const magic = unpacker.unpackInt();
|
||||
|
||||
if (magic !== metadataMagicByte) {
|
||||
return false;
|
||||
}
|
||||
|
||||
type = unpacker.unpackInt();
|
||||
|
||||
if (!type || !Object.values(METADATA_TYPES).includes(type)) {
|
||||
return false;
|
||||
}
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getOne: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
id: 1
|
||||
},
|
||||
});
|
||||
},
|
||||
update: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
create: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
deleteOne: () => {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
getApiUrl: () => "",
|
||||
|
||||
switch (type) {
|
||||
case METADATA_TYPES.DIRECTORY:
|
||||
return CID_TYPES.DIRECTORY;
|
||||
case METADATA_TYPES.WEBAPP:
|
||||
return CID_TYPES.METADATA_WEBAPP;
|
||||
case METADATA_TYPES.MEDIA:
|
||||
return CID_TYPES.METADATA_MEDIA;
|
||||
case METADATA_TYPES.USER_IDENTITY:
|
||||
return CID_TYPES.USER_IDENTITY;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
export interface FileItem {
|
||||
cid: string;
|
||||
type: string;
|
||||
size: number;
|
||||
mimeType: string;
|
||||
pinned: string;
|
||||
}
|
||||
|
||||
export const fileProvider: SdkProvider = {
|
||||
sdk: undefined,
|
||||
async getList() {
|
||||
const items: FileItem[] = [];
|
||||
try {
|
||||
const s5 = fileProvider.sdk?.protocols().get<S5Client>(PROTOCOL_S5)!.getSdk()!;
|
||||
const pinList = await s5.accountPins();
|
||||
for (const pin of pinList!.pins) {
|
||||
const manifest = await getIsManifest(s5, pin.hash) as number;
|
||||
|
||||
if (manifest) {
|
||||
const mHash = Multihash.fromBase64Url(pin.hash);
|
||||
items.push({
|
||||
cid: new CID(manifest, mHash, pin.size).toString(),
|
||||
type: "manifest",
|
||||
mimeType: "application/octet-stream",
|
||||
size: pin.size,
|
||||
pinned: pin.pinned_at,
|
||||
});
|
||||
} else {
|
||||
items.push({
|
||||
cid: new CID(CID_TYPES.RAW, Multihash.fromBase64Url(pin.hash), pin.size).toString(),
|
||||
type: "raw",
|
||||
mimeType: pin.mime_type,
|
||||
size: pin.size,
|
||||
pinned: pin.pinned_at,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return Promise.reject(e);
|
||||
}
|
||||
|
||||
return {
|
||||
data: items,
|
||||
total: items.length,
|
||||
};
|
||||
},
|
||||
getOne() {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {
|
||||
id: 1
|
||||
},
|
||||
});
|
||||
},
|
||||
update() {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
create() {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
deleteOne() {
|
||||
console.log("Not implemented");
|
||||
return Promise.resolve({
|
||||
data: {},
|
||||
});
|
||||
},
|
||||
getApiUrl() {
|
||||
return "";
|
||||
},
|
||||
} satisfies SdkProvider;
|
||||
|
|
|
|||
29
app/root.tsx
29
app/root.tsx
|
|
@ -7,16 +7,17 @@ import type {LinksFunction} from "@remix-run/node";
|
|||
import '@fontsource-variable/manrope';
|
||||
import {Refine} from "@refinedev/core";
|
||||
import routerProvider from "@refinedev/remix-router";
|
||||
import { notificationProvider } from "~/data/notification-provider";
|
||||
import {SdkContextProvider} from "~/components/lib/sdk-context";
|
||||
import { Toaster } from "~/components/ui/toaster";
|
||||
import {notificationProvider} from "~/data/notification-provider";
|
||||
import {SdkContextProvider, useSdk} from "~/components/lib/sdk-context";
|
||||
import {Toaster} from "~/components/ui/toaster";
|
||||
import {getProviders} from "~/data/providers.js";
|
||||
import {Sdk} from "@lumeweb/portal-sdk";
|
||||
import resources from "~/data/resources.js";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import {useMemo} from "react";
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: "stylesheet", href: stylesheet },
|
||||
{rel: "stylesheet", href: stylesheet},
|
||||
];
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
|
@ -30,9 +31,9 @@ export function Layout({children}: { children: React.ReactNode }) {
|
|||
<Meta/>
|
||||
<Links/>
|
||||
</head>
|
||||
<body>
|
||||
<body className="overflow-hidden">
|
||||
{children}
|
||||
<Toaster />
|
||||
<Toaster/>
|
||||
<ScrollRestoration/>
|
||||
<Scripts/>
|
||||
</body>
|
||||
|
|
@ -40,10 +41,9 @@ export function Layout({children}: { children: React.ReactNode }) {
|
|||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
console.log(import.meta.env.VITE_PORTAL_URL);
|
||||
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
|
||||
const providers = getProviders(sdk);
|
||||
function App() {
|
||||
const sdk = useSdk();
|
||||
const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Refine
|
||||
|
|
@ -65,6 +65,15 @@ export default function App() {
|
|||
);
|
||||
}
|
||||
|
||||
export default function Root() {
|
||||
const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
|
||||
return (
|
||||
<SdkContextProvider sdk={sdk}>
|
||||
<App/>
|
||||
</SdkContextProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function HydrateFallback() {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,12 @@
|
|||
import { useGo, useIsAuthenticated } from "@refinedev/core";
|
||||
import {Authenticated} from "@refinedev/core";
|
||||
import {Navigate} from "@remix-run/react";
|
||||
|
||||
export default function Index() {
|
||||
const { isLoading, data } = useIsAuthenticated();
|
||||
|
||||
const go = useGo();
|
||||
|
||||
if (isLoading) {
|
||||
return <>Checking Login Status</>;
|
||||
}
|
||||
|
||||
if (data?.authenticated) {
|
||||
go({ to: "/dashboard", type: "replace" });
|
||||
} else {
|
||||
go({ to: "/login", type: "replace" });
|
||||
}
|
||||
|
||||
return <>Redirecting</>;
|
||||
return (
|
||||
<Authenticated v3LegacyAuthProviderCompatible key={"index"} loading={
|
||||
<>Checking Login Status</>
|
||||
}>
|
||||
<Navigate to="/dashboard" replace/>
|
||||
</Authenticated>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
|
|||
import { Cross2Icon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
Authenticated,
|
||||
BaseKey,
|
||||
type BaseKey,
|
||||
useGetIdentity,
|
||||
useUpdate,
|
||||
useUpdatePassword,
|
||||
|
|
@ -41,7 +41,7 @@ import { Input } from "~/components/ui/input";
|
|||
import { UsageCard } from "~/components/usage-card";
|
||||
|
||||
import QRImg from "~/images/QR.png";
|
||||
import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
|
||||
import type {UpdatePasswordFormRequest} from "~/data/auth-provider";
|
||||
|
||||
export default function MyAccount() {
|
||||
const { data: identity } = useGetIdentity<{ email: string }>();
|
||||
|
|
@ -85,7 +85,7 @@ export default function MyAccount() {
|
|||
<ManagementCard>
|
||||
<ManagementCardAvatar
|
||||
button={
|
||||
<DialogTrigger className="absolute bottom-0 right-0 z-50">
|
||||
<DialogTrigger asChild className="absolute bottom-0 right-0 z-50">
|
||||
<Button
|
||||
onClick={() => setModal({ ...openModal, changeAvatar: true })}
|
||||
variant="outline"
|
||||
|
|
@ -102,7 +102,7 @@ export default function MyAccount() {
|
|||
{identity?.email}
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, changeEmail: true })}>
|
||||
|
|
@ -134,7 +134,7 @@ export default function MyAccount() {
|
|||
<PasswordDots className="mt-6" />
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() =>
|
||||
|
|
@ -152,7 +152,7 @@ export default function MyAccount() {
|
|||
Improve security by enabling 2FA.
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() =>
|
||||
|
|
@ -313,7 +313,7 @@ const ChangePasswordSchema = z
|
|||
});
|
||||
|
||||
const ChangePasswordForm = () => {
|
||||
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
|
||||
const { mutate: updatePassword } = useUpdatePassword<UpdatePasswordFormRequest>();
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(ChangePasswordSchema),
|
||||
|
|
@ -327,6 +327,7 @@ const ChangePasswordForm = () => {
|
|||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
|
||||
updatePassword({
|
||||
currentPassword: data.currentPassword.toString(),
|
||||
password: data.newPassword.toString(),
|
||||
});
|
||||
},
|
||||
|
|
@ -469,7 +470,7 @@ const ChangeAvatarForm = () => {
|
|||
{hasStarted ? (
|
||||
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
|
||||
<CloudCheckIcon className="w-32 h-32" />
|
||||
{isCompleted ? "Upload completed" : `0% completed`}
|
||||
{isCompleted ? "Upload completed" : "0% completed"}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
|
||||
import type { ColumnDef, Row } from "@tanstack/react-table";
|
||||
import { TrashIcon } from "@radix-ui/react-icons";
|
||||
import type { ColumnDef } from "@tanstack/react-table";
|
||||
import { FileIcon, MoreIcon } from "~/components/icons";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
import {
|
||||
|
|
@ -7,12 +7,11 @@ import {
|
|||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
|
||||
import { usePinning } from "~/hooks/usePinning";
|
||||
import { cn } from "~/utils";
|
||||
import type { FileItem } from "~/data/file-provider";
|
||||
|
||||
// This type is used to define the shape of our data.
|
||||
// You can use a Zod schema here if you want.
|
||||
|
|
@ -23,47 +22,7 @@ export type File = {
|
|||
createdOn: string;
|
||||
};
|
||||
|
||||
const CreatedOnCell = ({ row }: { row: Row<File> }) => {
|
||||
// const { open } = useNotification();
|
||||
const { mutate } = usePinning();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
{row.getValue("createdOn")}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className={cn(
|
||||
"hidden group-hover:block data-[state=open]:block",
|
||||
row.getIsSelected() && "block",
|
||||
)}>
|
||||
<MoreIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
console.log(`Adding ${row.getValue("cid")} for pinning...`);
|
||||
mutate({
|
||||
cid: row.getValue("cid"),
|
||||
type: "pin"
|
||||
});
|
||||
}}>
|
||||
<DrawingPinIcon className="mr-2" />
|
||||
Pin CID
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive">
|
||||
<TrashIcon className="mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<File>[] = [
|
||||
export const columns: ColumnDef<FileItem>[] = [
|
||||
{
|
||||
id: "select",
|
||||
size: 20,
|
||||
|
|
@ -106,9 +65,34 @@ export const columns: ColumnDef<File>[] = [
|
|||
header: "Size",
|
||||
},
|
||||
{
|
||||
accessorKey: "createdOn",
|
||||
size: 200,
|
||||
header: "Created On",
|
||||
cell: ({ row }) => <CreatedOnCell row={row} />,
|
||||
accessorKey: "pinned",
|
||||
header: "Pinned On",
|
||||
cell: ({ row }) => new Date(row.getValue("pinned")).toLocaleString(),
|
||||
},
|
||||
{
|
||||
accessorKey: "actions",
|
||||
header: () => null,
|
||||
size: 20,
|
||||
cell: ({ row }) => (
|
||||
<div className="flex w-5 items-center justify-between">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className={cn(
|
||||
"hidden group-hover:block data-[state=open]:block",
|
||||
row.getIsSelected() && "block",
|
||||
)}>
|
||||
<MoreIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem variant="destructive">
|
||||
<TrashIcon className="mr-2" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -5,59 +5,92 @@ import { columns } from "./columns";
|
|||
import { Input } from "~/components/ui/input";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { AddIcon } from "~/components/icons";
|
||||
import { Authenticated } from "@refinedev/core";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Field } from "~/components/forms";
|
||||
|
||||
export default function FileManager() {
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
|
||||
<FileCardList>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
</FileCardList>
|
||||
<h2 className="font-bold text-l mt-8">Files</h2>
|
||||
<div className="flex items-center space-x-4 my-6 w-full">
|
||||
<Input
|
||||
fullWidth
|
||||
leftIcon={<AddIcon />}
|
||||
placeholder="Search files by name or CID"
|
||||
className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
|
||||
/>
|
||||
<Button className="h-12 gap-x-2">
|
||||
<AddIcon />
|
||||
Select All
|
||||
</Button>
|
||||
<Button className="h-12 gap-x-2">
|
||||
<AddIcon />
|
||||
New Folder
|
||||
</Button>
|
||||
</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
resource="file"
|
||||
dataProviderName="files"
|
||||
/>
|
||||
</GeneralLayout>
|
||||
<Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
|
||||
<GeneralLayout>
|
||||
<Dialog>
|
||||
<h1 className="font-bold mb-4 text-lg">File Manager</h1>
|
||||
<FileCardList>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
<FileCard
|
||||
fileName="Backups"
|
||||
size="33 files"
|
||||
type={FileTypes.Folder}
|
||||
createdAt="2 days ago"
|
||||
/>
|
||||
</FileCardList>
|
||||
<h2 className="font-bold text-l mt-8">Files</h2>
|
||||
<div className="flex items-center space-x-4 my-6 w-full">
|
||||
<Input
|
||||
fullWidth
|
||||
leftIcon={<AddIcon />}
|
||||
placeholder="Search files by name or CID"
|
||||
className="border-ring font-medium w-full grow h-12 flex-1 bg-primary-2/10"
|
||||
/>
|
||||
<Button className="h-12 gap-x-2">
|
||||
<AddIcon />
|
||||
Select All
|
||||
</Button>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="h-12 gap-x-2">
|
||||
<AddIcon />
|
||||
Pin Content
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</div>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
resource="file"
|
||||
dataProviderName="files"
|
||||
/>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Pin Content</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form action="" className="w-full flex flex-col gap-y-4">
|
||||
<Field
|
||||
inputProps={{
|
||||
name: "cids",
|
||||
placeholder: "Comma separated CIDs",
|
||||
}}
|
||||
labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
|
||||
/>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
Pin Content
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</GeneralLayout>
|
||||
</Authenticated>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
import { getFormProps, useForm } from "@conform-to/react";
|
||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
|
||||
import { useGo, useIsAuthenticated, useParsed } from "@refinedev/core";
|
||||
import { Link } from "@remix-run/react";
|
||||
import { useEffect } from "react";
|
||||
import { z } from "zod";
|
||||
import { Field } from "~/components/forms";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import type { LoginParams } from "./login";
|
||||
|
||||
const OtpSchema = z.object({
|
||||
otp: z.string().length(6, { message: "OTP must be 6 characters" }),
|
||||
});
|
||||
|
||||
export default function OtpForm() {
|
||||
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
|
||||
const go = useGo();
|
||||
const parsed = useParsed<LoginParams>();
|
||||
// TODO: Add support for resending the OTP
|
||||
const [form, fields] = useForm({
|
||||
id: "otp",
|
||||
constraint: getZodConstraint(OtpSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: OtpSchema });
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
});
|
||||
const valid = true;
|
||||
const to = parsed.params?.to ?? "/dashboard";
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading) {
|
||||
if (authData?.authenticated && valid) {
|
||||
go({ to, type: "push" });
|
||||
}
|
||||
}
|
||||
}, [isAuthLoading, authData, to, go]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md mt-12 bg-background"
|
||||
{...getFormProps(form)}>
|
||||
<span className="block !mb-8 space-y-2">
|
||||
<h2 className="text-3xl font-bold">Check your inbox</h2>
|
||||
<p className="text-input-placeholder">
|
||||
We will need the six digit confirmation code you received in your
|
||||
email in order to verify your account and get started. Didn’t receive
|
||||
a code?{" "}
|
||||
<Button type="button" variant={"link"} className="text-md h-0">
|
||||
Resend now →
|
||||
</Button>
|
||||
</p>
|
||||
</span>
|
||||
<Field
|
||||
inputProps={{ name: fields.otp.name }}
|
||||
labelProps={{ children: "Confirmation Code" }}
|
||||
errors={fields.otp.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Verify</Button>
|
||||
<p className="text-input-placeholder w-full text-left">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
|
||||
← Back to Login
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import type { MetaFunction } from "@remix-run/node";
|
||||
import { Link, useLocation } from "@remix-run/react";
|
||||
import { Link } from "@remix-run/react";
|
||||
import { z } from "zod";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import logoPng from "~/images/lume-logo.png?url";
|
||||
|
|
@ -11,7 +11,6 @@ import { getFormProps, useForm } from "@conform-to/react";
|
|||
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
|
||||
import {
|
||||
useGo,
|
||||
useIsAuthenticated,
|
||||
useLogin,
|
||||
useParsed,
|
||||
} from "@refinedev/core";
|
||||
|
|
@ -25,30 +24,11 @@ export const meta: MetaFunction = () => {
|
|||
];
|
||||
};
|
||||
|
||||
type LoginParams = {
|
||||
export type LoginParams = {
|
||||
to: string;
|
||||
};
|
||||
|
||||
export default function Login() {
|
||||
const location = useLocation();
|
||||
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
|
||||
const hash = location.hash;
|
||||
const go = useGo();
|
||||
const parsed = useParsed<LoginParams>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading) {
|
||||
if (authData?.authenticated) {
|
||||
let to = "/dashboard";
|
||||
if (parsed.params?.to) {
|
||||
to = parsed.params.to;
|
||||
}
|
||||
|
||||
go({ to, type: "push" });
|
||||
}
|
||||
}
|
||||
}, [isAuthLoading, authData]);
|
||||
|
||||
return (
|
||||
<div className="p-10 h-screen relative">
|
||||
<header>
|
||||
|
|
@ -62,8 +42,7 @@ export default function Login() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
{hash === "" && <LoginForm />}
|
||||
{hash === "#otp" && <OtpForm />}
|
||||
<LoginForm />
|
||||
|
||||
<footer className="my-5">
|
||||
<ul className="flex flex-row">
|
||||
|
|
@ -96,11 +75,12 @@ export default function Login() {
|
|||
const LoginSchema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string(),
|
||||
rememberMe: z.boolean(),
|
||||
rememberMe: z.boolean().optional(),
|
||||
});
|
||||
|
||||
const LoginForm = () => {
|
||||
const login = useLogin<AuthFormRequest>();
|
||||
const go = useGo();
|
||||
const parsed = useParsed<LoginParams>();
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
|
|
@ -109,19 +89,27 @@ const LoginForm = () => {
|
|||
return parseWithZod(formData, { schema: LoginSchema });
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
onSubmit(e) {
|
||||
onSubmit(e, { submission }) {
|
||||
e.preventDefault();
|
||||
|
||||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
rememberMe: data.rememberMe.toString() === "on",
|
||||
redirectTo: parsed.params?.to,
|
||||
});
|
||||
if (submission?.status === "success") {
|
||||
const data = submission.value;
|
||||
login.mutate({
|
||||
email: data.email,
|
||||
password: data.password,
|
||||
rememberMe: data.rememberMe ?? false,
|
||||
redirectTo: parsed.params?.to,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (form.status === "success") {
|
||||
go({ to: "/login/otp", type: "push" });
|
||||
}
|
||||
}, [form.status, go]);
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
|
||||
|
|
@ -159,56 +147,3 @@ const LoginForm = () => {
|
|||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const OtpSchema = z.object({
|
||||
otp: z.string().length(6, { message: "OTP must be 6 characters" }),
|
||||
});
|
||||
|
||||
const OtpForm = () => {
|
||||
// TODO: Add support for resending the OTP
|
||||
const [form, fields] = useForm({
|
||||
id: "otp",
|
||||
constraint: getZodConstraint(OtpSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: OtpSchema });
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
});
|
||||
const valid = false; // TODO: some sort of logic to verify user is on OTP state validly
|
||||
|
||||
if (!valid) {
|
||||
location.hash = "";
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md mt-12 bg-background"
|
||||
{...getFormProps(form)}>
|
||||
<span className="block !mb-8 space-y-2">
|
||||
<h2 className="text-3xl font-bold">Check your inbox</h2>
|
||||
<p className="text-input-placeholder">
|
||||
We will need the six digit confirmation code you received in your
|
||||
email in order to verify your account and get started. Didn’t receive
|
||||
a code?{" "}
|
||||
<Button type="button" variant={"link"} className="text-md h-0">
|
||||
Resend now →
|
||||
</Button>
|
||||
</p>
|
||||
</span>
|
||||
<Field
|
||||
inputProps={{ name: fields.otp.name }}
|
||||
labelProps={{ children: "Confirmation Code" }}
|
||||
errors={fields.otp.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Verify</Button>
|
||||
<p className="text-input-placeholder w-full text-left">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
|
||||
← Back to Login
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -47,11 +47,11 @@ export default function Register() {
|
|||
const login = useLogin<AuthFormRequest>();
|
||||
const { open } = useNotification();
|
||||
const [form, fields] = useForm({
|
||||
id: "register",
|
||||
constraint: getZodConstraint(RegisterSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: RegisterSchema });
|
||||
},
|
||||
id: "register",
|
||||
constraint: getZodConstraint(RegisterSchema),
|
||||
onValidate({formData}) {
|
||||
return parseWithZod(formData, {schema: RegisterSchema});
|
||||
},
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
|
@ -61,23 +61,9 @@ export default function Register() {
|
|||
password: data.password.toString(),
|
||||
firstName: data.firstName.toString(),
|
||||
lastName: data.lastName.toString(),
|
||||
}, {
|
||||
onSuccess: () => {
|
||||
open?.({
|
||||
type: "success",
|
||||
message: "Verify your Email",
|
||||
description: "An Email was sent to your email address. Please verify your email address to activate your account.",
|
||||
key: "register-success"
|
||||
})
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
rememberMe: false,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-10 h-screen relative">
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 240, 33%, 3%;
|
||||
--foreground: 0, 0%, 88%;
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 0 0% 0%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
|
|
|
|||
|
|
@ -16,19 +16,21 @@
|
|||
"@conform-to/react": "^1.0.2",
|
||||
"@conform-to/zod": "^1.0.2",
|
||||
"@fontsource-variable/manrope": "^5.0.19",
|
||||
"@lumeweb/portal-sdk": "0.0.0-20240319140708",
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@lumeweb/portal-sdk": "0.0.0-20240321203634",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.0.2",
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@radix-ui/react-progress": "^1.0.3",
|
||||
"@radix-ui/react-select": "^2.0.0",
|
||||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@radix-ui/react-tabs": "^1.0.4",
|
||||
"@radix-ui/react-toast": "^1.1.5",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@refinedev/cli": "^2.16.1",
|
||||
"@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
|
||||
"@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
"@visx/visx": "^3.10.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.0",
|
||||
"date-fns": "^3.6.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue