sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-04-20 03:50:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: implement session checking utility, enhance device queries with session validation, and improve UI interactions for device management
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 6m36s
Details

Browse Source
This commit is contained in:
i701 2025-04-06 22:43:12 +05:00
parent 9e2a2f430e
commit daab793592
Signed by: i701
GPG Key ID: 54A0DA1E26D8E587
7 changed files with 256 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
actions/omada-actions.ts
View File

@ -123,11 +123,7 @@ export async function blockDevice({
if (!macAddress) { if (!macAddress) {
throw new Error("macAddress is a required parameter"); throw new Error("macAddress is a required parameter");
} }
// const device = await prisma.device.findFirst({
// where: {
// mac: macAddress,
// },
// });
try { try {
const baseUrl: string = process.env.OMADA_BASE_URL || ""; const baseUrl: string = process.env.OMADA_BASE_URL || "";
const url: string = `${baseUrl}/api/v2/sites/${process.env.OMADA_SITE_ID}/cmd/clients/${formatMacAddress(macAddress)}/${type}`; const url: string = `${baseUrl}/api/v2/sites/${process.env.OMADA_SITE_ID}/cmd/clients/${formatMacAddress(macAddress)}/${type}`;

43
app/(dashboard)/devices/[deviceId]/page.tsx
View File

@ -1,3 +1,8 @@
import BlockDeviceDialog from "@/components/block-device-dialog";
import Search from "@/components/search";
import { Badge } from "@/components/ui/badge";
import { getDevice } from "@/queries/devices";
import { tryCatch } from "@/utils/tryCatch";
import React from "react"; import React from "react";
export default async function DeviceDetails({ export default async function DeviceDetails({
@ -6,20 +11,46 @@ export default async function DeviceDetails({
params: Promise<{ deviceId: string }>; params: Promise<{ deviceId: string }>;
}) { }) {
const deviceId = (await params)?.deviceId; const deviceId = (await params)?.deviceId;
const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
if (error) return <div>{error.message}</div>;
if (!device) return null;
return null;
return ( return (
<div> <div>
<div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4"> <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
<h3 className="text-2xl font-bold">{device?.name}</h3> <div className="flex flex-col justify-between items-start">
<span>{device?.mac}</span> <h3 className="text-2xl text-sarLinkOrange font-bold">
{device?.name}
</h3>
<Badge variant={"secondary"}>{device?.mac}</Badge>
<p className="text-muted-foreground text-sm mt-2">
Device active until{" "}
{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
month: "short",
day: "2-digit",
year: "numeric",
})}
</p>
</div>
<div className="flex items-center gap-2 flex-col">
{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
ACTIVE
</p>
)}
<BlockDeviceDialog
device={device}
type={device.blocked ? "unblock" : "block"}
/>
<pre>{JSON.stringify(device.blocked, null, 2)}</pre>
</div>
</div> </div>
<div <div
id="user-filters" id="user-filters"
className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start" className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
> >
{/* <Search /> */} <Search />
{/* <Filter {/* <Filter
options={sortfilterOptions} options={sortfilterOptions}
defaultOption="asc" defaultOption="asc"

43
components/add-devices-to-cart-button.tsx
View File

@ -1,25 +1,28 @@
'use client' "use client";
import { deviceCartAtom } from '@/lib/atoms' import { deviceCartAtom } from "@/lib/atoms";
import type { Device } from '@prisma/client' import type { Device } from "@/lib/backend-types";
import { useAtomValue, useSetAtom } from 'jotai' import { useAtomValue, useSetAtom } from "jotai";
import React from 'react' import React from "react";
export default function AddDevicesToCartButton({ device }: { device: Device }) { export default function AddDevicesToCartButton({ device }: { device: Device }) {
const setDeviceCart = useSetAtom(deviceCartAtom) const setDeviceCart = useSetAtom(deviceCartAtom);
const devices = useAtomValue(deviceCartAtom) const devices = useAtomValue(deviceCartAtom);
const isChecked = devices.some((d) => d.id === device.id); const isChecked = devices.some((d) => d.id === device.id);
return ( return (
<input <input
type="checkbox" type="checkbox"
className='peer accent-[#f49d1b] size-4' disabled={device.blocked || device.is_active}
checked={isChecked} className="peer accent-[#f49d1b] size-4"
onChange={() => setDeviceCart((prev) => checked={isChecked}
isChecked onChange={() =>
? prev.filter((d) => d.id !== device.id) setDeviceCart((prev) =>
: [...prev, device] isChecked
)} ? prev.filter((d) => d.id !== device.id)
/> : [...prev, device],
) )
}
/>
);
} }

313
components/block-device-dialog.tsx
View File

@ -3,17 +3,17 @@
import { blockDevice } from "@/actions/omada-actions"; import { blockDevice } from "@/actions/omada-actions";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogFooter, DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import type { Device } from "@prisma/client";
import { OctagonX } from "lucide-react"; import { OctagonX } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { type SubmitHandler, useForm } from "react-hook-form"; import { type SubmitHandler, useForm } from "react-hook-form";
@ -23,160 +23,159 @@ import { TextShimmer } from "./ui/text-shimmer";
import { Textarea } from "./ui/textarea"; import { Textarea } from "./ui/textarea";
const validationSchema = z.object({ const validationSchema = z.object({
reasonForBlocking: z.string().min(5, { message: "Reason is required" }), reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
}); });
export default function BlockDeviceDialog({ export default function BlockDeviceDialog({
device, device,
type, type,
admin, admin,
}: { device: Device; type: "block" | "unblock"; admin?: boolean }) { }: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
const [disabled, setDisabled] = useState(false); const [disabled, setDisabled] = useState(false);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
} = useForm<z.infer<typeof validationSchema>>({ } = useForm<z.infer<typeof validationSchema>>({
resolver: zodResolver(validationSchema), resolver: zodResolver(validationSchema),
}); });
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => { const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
setDisabled(true); setDisabled(true);
console.log(data); console.log(data);
toast.promise( toast.promise(
blockDevice({ blockDevice({
macAddress: device.mac, macAddress: device.mac,
type: type, type: type,
reason: data.reasonForBlocking, reason: data.reasonForBlocking,
blockedBy: "ADMIN", blockedBy: "ADMIN",
// reason: data.reasonForBlocking, // reason: data.reasonForBlocking,
}), }),
{ {
loading: "Blocking...", loading: "Blocking...",
success: () => { success: () => {
setDisabled(false); setDisabled(false);
setOpen((prev) => !prev); setOpen((prev) => !prev);
return "Blocked!"; return "Blocked!";
}, },
error: (error) => { error: (error) => {
setDisabled(false); setDisabled(false);
return error || "Something went wrong"; return error || "Something went wrong";
}, },
}, },
); );
setDisabled(false); setDisabled(false);
}; };
return ( return (
<div> <div>
{device.blocked ? ( {device.blocked ? (
<Button <Button
onClick={() => { onClick={() => {
setDisabled(true); setDisabled(true);
toast.promise( toast.promise(
blockDevice({ blockDevice({
macAddress: device.mac, macAddress: device.mac,
type: "unblock", type: "unblock",
reason: "", reason: "",
}), }),
{ {
loading: "unblockinig...", loading: "unblockinig...",
success: () => { success: () => {
setDisabled(false); setDisabled(false);
return "Unblocked!"; return "Unblocked!";
}, },
error: () => { error: () => {
setDisabled(false); setDisabled(false);
return "Something went wrong"; return "Something went wrong";
}, },
}, },
); );
}} }}
> >
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"} </Button>
</Button> ) : (
) : ( <>
<> {!admin ? (
{!admin ? ( <Button
<Button variant={"destructive"}
variant={"destructive"} onClick={() => {
onClick={() => { setDisabled(true);
setDisabled(true); toast.promise(
toast.promise( blockDevice({
blockDevice({ macAddress: device.mac,
macAddress: device.mac, type: "block",
type: "block", reason: "",
reason: "", blockedBy: "PARENT",
blockedBy: "PARENT", }),
}), {
{ loading: "blocking...",
loading: "blocking...", success: () => {
success: () => { setDisabled(false);
setDisabled(false); return "blocked!";
return "blocked!"; },
}, error: () => {
error: () => { setDisabled(false);
setDisabled(false); return "Something went wrong";
return "Something went wrong"; },
}, },
}, );
); }}
}} >
> <OctagonX />
<OctagonX /> {disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"} </Button>
</Button> ) : (
) : ( <Dialog open={open} onOpenChange={setOpen}>
<Dialog open={open} onOpenChange={setOpen}> <DialogTrigger asChild>
<DialogTrigger asChild> <Button disabled={disabled} variant="destructive">
<Button disabled={disabled} variant="destructive"> <OctagonX />
<OctagonX /> Block
Block </Button>
</Button> </DialogTrigger>
</DialogTrigger> <DialogContent className="sm:max-w-[425px]">
<DialogContent className="sm:max-w-[425px]"> <DialogHeader>
<DialogHeader> <DialogTitle>
<DialogTitle> Please provide a reason for blocking this device.
Please provide a reason for blocking this device. </DialogTitle>
</DialogTitle> </DialogHeader>
</DialogHeader> <form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)}> <div className="grid gap-4 py-4">
<div className="grid gap-4 py-4"> <div className="flex flex-col items-start gap-1">
<div className="flex flex-col items-start gap-1"> <Label htmlFor="reason" className="text-right">
<Label htmlFor="reason" className="text-right"> Reason for blocking
Reason for blocking </Label>
</Label> <Textarea
<Textarea rows={10}
rows={10} {...register("reasonForBlocking")}
{...register("reasonForBlocking")} id="reasonForBlocking"
id="reasonForBlocking" className={cn(
className={cn( "col-span-5",
"col-span-5", errors.reasonForBlocking && "ring-2 ring-red-500",
errors.reasonForBlocking && "ring-2 ring-red-500", )}
)} />
/> <span className="text-sm text-red-500">
<span className="text-sm text-red-500"> {errors.reasonForBlocking?.message}
{errors.reasonForBlocking?.message} </span>
</span> </div>
</div> </div>
</div> <DialogFooter>
<DialogFooter> <Button
<Button variant={"destructive"}
variant={"destructive"} disabled={disabled}
disabled={disabled} type="submit"
type="submit" >
> Block
Block </Button>
</Button> </DialogFooter>
</DialogFooter> </form>
</form> </DialogContent>
</DialogContent> </Dialog>
</Dialog> )}
)} </>
</> )}
)} </div>
</div> );
);
} }

13
components/clickable-row.tsx
View File

@ -19,9 +19,13 @@ export default function ClickableRow({
<TableRow <TableRow
key={device.id} key={device.id}
className={cn( className={cn(
parentalControl === false && "cursor-pointer hover:bg-muted", (parentalControl === false && device.blocked) || device.is_active
? "cursor-not-allowed title-bg"
: "cursor-pointer hover:bg-muted",
)} )}
onClick={() => { onClick={() => {
if (device.blocked) return;
if (device.is_active === true) return;
if (parentalControl === true) return; if (parentalControl === true) return;
setDeviceCart((prev) => setDeviceCart((prev) =>
devices.some((d) => d.id === device.id) devices.some((d) => d.id === device.id)
@ -33,7 +37,10 @@ export default function ClickableRow({
<TableCell> <TableCell>
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
<Link <Link
className="font-medium hover:underline" className={cn(
"hover:underline font-semibold",
device.is_active ? "text-green-600" : "",
)}
href={`/devices/${device.id}`} href={`/devices/${device.id}`}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
@ -49,7 +56,7 @@ export default function ClickableRow({
})} })}
</span> </span>
) : ( ) : (
<p>Inactive</p> <p className="text-muted-foreground">Device Inactive</p>
)} )}
{device.blocked_by === "ADMIN" && device.blocked && ( {device.blocked_by === "ADMIN" && device.blocked && (

19
queries/devices.ts
View File

@ -2,6 +2,7 @@
import { authOptions } from "@/app/auth"; import { authOptions } from "@/app/auth";
import type { Api400Error, ApiResponse, Device } from "@/lib/backend-types"; import type { Api400Error, ApiResponse, Device } from "@/lib/backend-types";
import { checkSession } from "@/utils/session";
import { getServerSession } from "next-auth"; import { getServerSession } from "next-auth";
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
@ -12,7 +13,7 @@ type GetDevicesProps = {
status?: string; status?: string;
}; };
export async function getDevices({ query }: GetDevicesProps) { export async function getDevices({ query }: GetDevicesProps) {
const session = await getServerSession(authOptions); const session = await checkSession();
const respose = await fetch( const respose = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}`, `${process.env.SARLINK_API_BASE_URL}/api/devices/?name=${query}`,
{ {
@ -27,6 +28,22 @@ export async function getDevices({ query }: GetDevicesProps) {
return data; return data;
} }
export async function getDevice({ deviceId }: { deviceId: string }) {
const session = await checkSession();
const respose = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${session?.apiToken}`,
},
},
);
const device = (await respose.json()) as Device;
return device;
}
export async function addDevice({ export async function addDevice({
name, name,
mac, mac,

11
utils/session.ts Normal file
View File

@ -0,0 +1,11 @@
"use server";
import { authOptions } from "@/app/auth";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";
export async function checkSession() {
const session = await getServerSession(authOptions);
if (!session) return redirect("/auth/signin");
return session;
}