Compare commits

..

54 Commits

Author SHA1 Message Date
Juan Di Toro c9de506c56 fix: small fixes 2024-03-22 18:53:39 +01:00
Juan Di Toro e1ca45f1f1 Merge branch 'develop' into riobuenoDevelops/pinning-network 2024-03-22 17:13:10 +01:00
Juan Di Toro c9851d8dee fix: closes #10 2024-03-22 14:27:40 +01:00
Juan Di Toro 2ccf55f75f fix: closes #9 2024-03-22 14:14:45 +01:00
Juan Di Toro a61fe195ee fix: closes #8 2024-03-22 14:04:22 +01:00
Juan Di Toro e401889b04 fix: UX changes regarding showing dates on table and actions pannel 2024-03-22 13:47:50 +01:00
Juan Di Toro 9d9aa4e9c9 feat: add pinning modal 2024-03-22 12:31:31 +01:00
Juan Di Toro db91cb9590 Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into develop 2024-03-22 11:43:16 +01:00
Derrick Hammer 364f2b048b
fix: wrong accessorKey 2024-03-21 17:00:30 -04:00
Derrick Hammer 4619f9709c
fix: size is missing 2024-03-21 16:49:14 -04:00
Derrick Hammer 6252979d28
refactor: update columns 2024-03-21 16:46:02 -04:00
Derrick Hammer 23cc02b26e
dep: add date-fns 2024-03-21 16:45:20 -04:00
Derrick Hammer ea395df494
refactor: add pinned property for date 2024-03-21 16:45:06 -04:00
Derrick Hammer 7ea4af1346
dep: update portal-sdk 2024-03-21 16:37:25 -04:00
Derrick Hammer 20d8905a67
dep: update portal-sdk 2024-03-21 16:32:23 -04:00
Derrick Hammer 0c304b20db
refactor: use new CID with the multihash 2024-03-21 16:20:37 -04:00
Derrick Hammer f7a760051f
refactor: use our own abort controller 2024-03-21 16:15:04 -04:00
Derrick Hammer 6cdf8e40b9
dep: update portal-sdk 2024-03-21 16:13:35 -04:00
Derrick Hammer 3a5cd0ae32
refactor: split app to App and Root and store the sdk context in the root for app to use 2024-03-21 15:32:39 -04:00
Derrick Hammer b42a04ebc3
dep: update portal-sdk 2024-03-21 15:17:45 -04:00
Derrick Hammer 61b70ffa2e
fix: use Authenticated component 2024-03-21 15:04:19 -04:00
Derrick Hammer a7ef0b4773
fix: update resource name 2024-03-21 14:34:55 -04:00
Derrick Hammer 3162d4dcd6
fix: pass all providers 2024-03-21 14:30:11 -04:00
Derrick Hammer d724359622
feat: initial very basic file listing 2024-03-21 13:24:13 -04:00
Derrick Hammer 39ac3467fc
dep: update portal-sdk 2024-03-21 13:22:19 -04:00
Derrick Hammer b9652ab261
dep: update portal-sdk 2024-03-21 13:16:42 -04:00
Derrick Hammer 184b3d9a0e
dep: update portal-sdk 2024-03-21 13:10:36 -04:00
Derrick Hammer 335e982ab0
dep: update portal-sdk 2024-03-21 12:56:25 -04:00
Derrick Hammer be31f0db04
dep: update portal-sdk 2024-03-21 12:41:05 -04:00
Derrick Hammer 7bd2ecdc82
dep: update portal-sdk 2024-03-21 12:21:52 -04:00
Derrick Hammer d326881f9b
dep: update portal-sdk 2024-03-21 12:15:55 -04:00
Derrick Hammer d4ad64bf88
dep: update portal-sdk 2024-03-21 12:13:02 -04:00
Derrick Hammer 51e8cfef76
dep: update portal-sdk 2024-03-21 11:42:26 -04:00
Derrick Hammer 583a95e68a
dep: update portal-sdk 2024-03-21 11:39:40 -04:00
Derrick Hammer adf306b074
dep: update portal-sdk 2024-03-21 11:03:55 -04:00
Derrick Hammer 02b712793e
dep: update portal-sdk 2024-03-21 10:58:18 -04:00
Derrick Hammer 8fecd31e43
dep: update portal-sdk 2024-03-21 10:50:44 -04:00
Derrick Hammer 214eb14583
dep: update portal-sdk 2024-03-21 10:28:38 -04:00
Derrick Hammer 82b4f9f4fc
fix: need to pass currentPassword 2024-03-21 08:49:29 -04:00
Derrick Hammer 2d0609c95c
dep: update portal-sdk 2024-03-21 08:49:05 -04:00
Derrick Hammer bba7ce59d3
refactor: nop on onError 2024-03-20 16:22:06 -04:00
Derrick Hammer 9332598627
refactor: pass ret as a HttpError 2024-03-20 16:21:56 -04:00
Derrick Hammer 6ce3b02dc6
dep: update portal-sdk 2024-03-20 16:21:37 -04:00
Derrick Hammer 81d52d2524
refactor: ret should now satisfy HttpError 2024-03-20 16:08:40 -04:00
Derrick Hammer 64e2216a36
dep: update portal-sdk 2024-03-20 15:44:12 -04:00
Derrick Hammer bec75e63ee
refactor: fix handling of check by creating a handleCheckResponse wrapper to translate success to authenticated 2024-03-20 15:26:24 -04:00
Juan Di Toro 43a0ab0b29 Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into develop 2024-03-20 20:05:13 +01:00
Derrick Hammer b3f0044723
refactor: use handleResponse on login 2024-03-20 13:43:51 -04:00
Derrick Hammer 729414c45a
refactor: add success notification on register, remove success from route form and auto login call 2024-03-20 13:42:21 -04:00
Derrick Hammer 6fbbe4975c
refactor: switch to using Authenticated and Navigate components 2024-03-20 13:26:41 -04:00
Derrick Hammer 33decc2e2d
Revert "fix: route redirection issue"
This reverts commit 9a8a7ee978.
2024-03-20 13:19:53 -04:00
Derrick Hammer 081df029e0
refactor: de-duplicate code into handleResponse helper and add support for success notifications 2024-03-20 13:10:57 -04:00
Derrick Hammer 6bffca0524
dep: update portal-sdk 2024-03-20 13:10:21 -04:00
Juan Di Toro c291434881 fix: wrong login schema 2024-03-19 15:40:12 +01:00
23 changed files with 975 additions and 722 deletions

View File

@ -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>
))}

View File

@ -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()

View File

@ -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"}

View File

@ -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,
};
}

View File

@ -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}

View File

@ -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}>

View File

@ -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 }

View File

@ -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

View File

@ -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();

View File

@ -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> {

View File

@ -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;

View File

@ -1,51 +1,62 @@
import { useMutation } from "@tanstack/react-query";
import { useContext } from "react";
import { useNotification } from "@refinedev/core";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useCallback, useContext } from "react";
import { PinningProcess } from "~/data/pinning";
import { PinningContext } from "~/providers/PinningProvider";
// TODO: Adapt to real API
export const usePinning = () => {
const queryClient = useQueryClient();
const context = useContext(PinningContext);
const { open } = useNotification();
const { mutate } = useMutation({
mutationKey: ["pin-progress"],
mutationFn: async (variables: { cid: string, type: "pin" | "unpin" }) => {
const { cid, type } = variables;
switch (type) {
case "pin": {
const response = await PinningProcess.pin(cid);
const { mutate: pinMutation } = useMutation({
mutationKey: ["pin-mutation"],
mutationFn: async (variables: { cid: string }) => {
const { cid } = variables;
const response = await PinningProcess.pin(cid);
if (!response.success) {
open?.({
type: "destructive",
message: "Erorr pinning " + cid,
description: response.message,
});
}
break;
}
case "unpin": {
const response = await PinningProcess.unpin(cid);
if (!response.success) {
open?.({
type: "destructive",
message: "Erorr removing " + cid,
description: response.message,
});
}
break;
}
if (!response.success) {
open?.({
type: "error",
message: `Error pinning ${cid}`,
description: response.message,
});
}
context.queryClient.invalidateQueries({ queryKey: ["pin-progress"] })
}
queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
},
});
const { mutate: unpinMutation } = useMutation({
mutationKey: ["unpin-mutation"],
mutationFn: async (variables: { cid: string }) => {
const { cid } = variables;
const response = await PinningProcess.unpin(cid);
if (!response.success) {
open?.({
type: "error",
message: `Error removing ${cid}`,
description: response.message,
});
}
queryClient.invalidateQueries({ queryKey: ["pin-progress"] });
},
});
const bulkPin = useCallback(
(cids: string[]) => {
for (const cid of cids) {
pinMutation({ cid });
}
},
[pinMutation],
);
return {
...context.query,
mutate
pin: pinMutation,
unpin: unpinMutation,
bulkPin,
};
};

View File

@ -1,11 +1,11 @@
import {
QueryClient,
UseQueryResult,
type QueryClient,
type UseQueryResult,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { createContext, useContext } from "react";
import { PinningProcess, PinningStatus } from "~/data/pinning";
import { PinningProcess, type PinningStatus } from "~/data/pinning";
export interface IPinningData {
cid: string;

View File

@ -1,19 +1,26 @@
import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import stylesheet from "./tailwind.css?url";
import type {LinksFunction} from "@remix-run/node";
import type { LinksFunction } from "@remix-run/node";
// Supports weights 200-800
import '@fontsource-variable/manrope';
import {Refine} from "@refinedev/core";
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 { 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 { 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 },
@ -21,50 +28,55 @@ export const links: LinksFunction = () => [
const queryClient = new QueryClient();
export function Layout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<Meta/>
<Links/>
</head>
<body>
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body className="overflow-hidden">
{children}
<Toaster />
<ScrollRestoration/>
<Scripts/>
</body>
</html>
);
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
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);
return (
<QueryClientProvider client={queryClient}>
<Refine
authProvider={providers.auth}
routerProvider={routerProvider}
notificationProvider={notificationProvider}
dataProvider={{
default: providers.default,
files: providers.files
}}
resources={resources}
options={{disableTelemetry: true}}
>
<SdkContextProvider sdk={sdk}>
<Outlet/>
</SdkContextProvider>
</Refine>
</QueryClientProvider>
);
function App() {
const sdk = useSdk();
const providers = useMemo(() => getProviders(sdk as Sdk), [sdk]);
return (
<QueryClientProvider client={queryClient}>
<Refine
authProvider={providers.auth}
routerProvider={routerProvider}
notificationProvider={notificationProvider}
dataProvider={{
default: providers.default,
files: providers.files,
}}
resources={resources}
options={{ disableTelemetry: true }}>
<Outlet />
</Refine>
</QueryClientProvider>
);
}
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>;
return <p>Loading...</p>;
}

View File

@ -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>
)
}

View File

@ -3,11 +3,11 @@ import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { DialogClose } from "@radix-ui/react-dialog";
import { Cross2Icon } from "@radix-ui/react-icons";
import {
Authenticated,
BaseKey,
useGetIdentity,
useUpdate,
useUpdatePassword,
Authenticated,
type BaseKey,
useGetIdentity,
useUpdate,
useUpdatePassword,
} from "@refinedev/core";
import { useMemo, useState } from "react";
import { z } from "zod";
@ -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 }>();
@ -54,167 +54,175 @@ export default function MyAccount() {
});
return (
<Authenticated key="account" v3LegacyAuthProviderCompatible>
<GeneralLayout>
<h1 className="text-lg font-bold mb-4">My Account</h1>
<Dialog
onOpenChange={(open) => {
if (!open) {
setModal({
changeEmail: false,
changePassword: false,
setupTwoFactor: false,
changeAvatar: false,
});
}
}}>
<UsageCard
label="Usage"
currentUsage={2}
monthlyUsage={10}
icon={<CloudIcon className="text-ring" />}
button={
<Button variant="accent" className="gap-x-2 h-12">
<AddIcon />
Upgrade to Premium
</Button>
}
/>
<h2 className="font-bold my-8">Account Management</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardAvatar
button={
<DialogTrigger className="absolute bottom-0 right-0 z-50">
<Button
onClick={() => setModal({ ...openModal, changeAvatar: true })}
variant="outline"
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
<EditIcon />
</Button>
</DialogTrigger>
}
/>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Email Address</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold">
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() => setModal({ ...openModal, changeEmail: true })}>
<AddIcon />
Change Email Address
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Account Type</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold flex gap-x-2">
Lite Premium Account
<CrownIcon />
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<Authenticated key="account" v3LegacyAuthProviderCompatible>
<GeneralLayout>
<h1 className="text-lg font-bold mb-4">My Account</h1>
<Dialog
onOpenChange={(open) => {
if (!open) {
setModal({
changeEmail: false,
changePassword: false,
setupTwoFactor: false,
changeAvatar: false,
});
}
}}>
<UsageCard
label="Usage"
currentUsage={2}
monthlyUsage={10}
icon={<CloudIcon className="text-ring" />}
button={
<Button variant="accent" className="gap-x-2 h-12">
<AddIcon />
Upgrade to Premium
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">Security</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardTitle>Password</ManagementCardTitle>
<ManagementCardContent>
<PasswordDots className="mt-6" />
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, changePassword: true })
}>
}
/>
<h2 className="font-bold my-8">Account Management</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardAvatar
button={
<DialogTrigger
asChild
className="absolute bottom-0 right-0 z-50">
<Button
onClick={() =>
setModal({ ...openModal, changeAvatar: true })
}
variant="outline"
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
<EditIcon />
</Button>
</DialogTrigger>
}
/>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Email Address</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold">
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, changeEmail: true })
}>
<AddIcon />
Change Email Address
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Account Type</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold flex gap-x-2">
Lite Premium Account
<CrownIcon />
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Change Password
Upgrade to Premium
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
<ManagementCardContent>
Improve security by enabling 2FA.
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, setupTwoFactor: true })
}>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">Security</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardTitle>Password</ManagementCardTitle>
<ManagementCardContent>
<PasswordDots className="mt-6" />
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, changePassword: true })
}>
<AddIcon />
Change Password
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>
Two-Factor Authentication
</ManagementCardTitle>
<ManagementCardContent>
Improve security by enabling 2FA.
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger asChild>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, setupTwoFactor: true })
}>
<AddIcon />
Enable Two-Factor Authorization
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">More</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard variant="accent">
<ManagementCardTitle>Invite a Friend</ManagementCardTitle>
<ManagementCardContent>
Get 1 GB per friend invited for free (max 5 GB).
</ManagementCardContent>
<ManagementCardFooter>
<Button variant="accent" className="h-12 gap-x-2">
<AddIcon />
Enable Two-Factor Authorization
Send Invitation
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">More</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard variant="accent">
<ManagementCardTitle>Invite a Friend</ManagementCardTitle>
<ManagementCardContent>
Get 1 GB per friend invited for free (max 5 GB).
</ManagementCardContent>
<ManagementCardFooter>
<Button variant="accent" className="h-12 gap-x-2">
<AddIcon />
Send Invitation
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Read our Resources</ManagementCardTitle>
<ManagementCardContent>
Navigate helpful articles or get assistance.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Open Support Centre
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Delete Account</ManagementCardTitle>
<ManagementCardContent>
Once initiated, this action cannot be undone.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2" variant="destructive">
<AddIcon />
Delete my Account
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<DialogContent>
{openModal.changeAvatar && <ChangeAvatarForm />}
{openModal.changeEmail && (
<ChangeEmailForm currentValue={identity?.email || ""} />
)}
{openModal.changePassword && <ChangePasswordForm />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
</DialogContent>
</Dialog>
</GeneralLayout>
</Authenticated>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Read our Resources</ManagementCardTitle>
<ManagementCardContent>
Navigate helpful articles or get assistance.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Open Support Centre
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Delete Account</ManagementCardTitle>
<ManagementCardContent>
Once initiated, this action cannot be undone.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2" variant="destructive">
<AddIcon />
Delete my Account
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<DialogContent>
{openModal.changeAvatar && <ChangeAvatarForm />}
{openModal.changeEmail && (
<ChangeEmailForm currentValue={identity?.email || ""} />
)}
{openModal.changePassword && <ChangePasswordForm />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
</DialogContent>
</Dialog>
</GeneralLayout>
</Authenticated>
);
}
@ -252,7 +260,7 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
console.log(identity);
updateEmail({
resource: "account",
id: "",
id: "",
values: {
email: data.email.toString(),
password: data.password.toString(),
@ -313,7 +321,8 @@ 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,7 +336,8 @@ const ChangePasswordForm = () => {
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
updatePassword({
password: data.newPassword.toString(),
currentPassword: data.currentPassword.toString(),
password: data.newPassword.toString(),
});
},
});
@ -469,7 +479,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}

View File

@ -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>
),
},
];

View File

@ -5,59 +5,126 @@ 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";
import { z } from "zod";
import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { usePinning } from "~/hooks/usePinning";
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>
<PinFilesForm />
</DialogContent>
</Dialog>
</GeneralLayout>
</Authenticated>
);
}
const PinFilesSchema = z.object({
cids: z.string().transform((value) => value.split(",")),
});
const PinFilesForm = () => {
const { bulkPin } = usePinning();
const [form, fields] = useForm({
id: "pin-files",
constraint: getZodConstraint(PinFilesSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: PinFilesSchema });
},
shouldValidate: "onSubmit",
onSubmit(e, { submission }) {
if (submission?.status === "success") {
const value = submission.value;
bulkPin(value.cids);
}
},
});
return (
<>
<DialogHeader>
<DialogTitle>Pin Content</DialogTitle>
</DialogHeader>
<form {...getFormProps(form)} className="w-full flex flex-col gap-y-4">
<Field
inputProps={{
name: fields.cids.name,
placeholder: "Comma separated CIDs",
}}
labelProps={{ htmlFor: "cids", children: "Content to Pin" }}
errors={fields.cids.errors}
/>
<Button type="submit" className="w-full">
Pin Content
</Button>
</form>
</>
);
};

69
app/routes/login.otp.tsx Normal file
View File

@ -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. Didnt 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>
);
}

View File

@ -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. Didnt 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>
);
};

View File

@ -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">

View File

@ -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%;

View File

@ -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",