feat(submodules and login redirect): submodules added and login redirect
This commit is contained in:
@@ -3,7 +3,7 @@ import { LstCard } from "../extendedUI/LstCard";
|
||||
import { CardHeader } from "../ui/card";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { useRouter } from "@tanstack/react-router";
|
||||
import { useRouter, useSearch } from "@tanstack/react-router";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "../ui/label";
|
||||
@@ -12,153 +12,160 @@ import { Checkbox } from "../ui/checkbox";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const FormSchema = z.object({
|
||||
username: z.string().min(1, "You must enter a valid username"),
|
||||
password: z.string().min(4, "You must enter a valid password"),
|
||||
rememberMe: z.boolean(),
|
||||
username: z.string().min(1, "You must enter a valid username"),
|
||||
password: z.string().min(4, "You must enter a valid password"),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const LoginForm = () => {
|
||||
const { setSession } = useSessionStore();
|
||||
const rememeberMe = localStorage.getItem("rememberMe") === "true";
|
||||
const username = localStorage.getItem("username") || "";
|
||||
const router = useRouter();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
username: username || "",
|
||||
password: "",
|
||||
rememberMe: rememeberMe,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
|
||||
// Do something with form data
|
||||
|
||||
// first update the rememberMe incase it was selected
|
||||
if (value.rememberMe) {
|
||||
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
||||
localStorage.setItem("username", value.username);
|
||||
} else {
|
||||
localStorage.removeItem("rememberMe");
|
||||
localStorage.removeItem("username");
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
const { setSession } = useSessionStore();
|
||||
const rememeberMe = localStorage.getItem("rememberMe") === "true";
|
||||
const username = localStorage.getItem("username") || "";
|
||||
const router = useRouter();
|
||||
const search = useSearch({ from: "/login" });
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
username: username || "",
|
||||
password: "",
|
||||
rememberMe: rememeberMe,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: value.username,
|
||||
password: value.password,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const onSubmitLogin = async (value: z.infer<typeof FormSchema>) => {
|
||||
// Do something with form data
|
||||
|
||||
// Store token in localStorage
|
||||
// localStorage.setItem("auth_token", data.data.token);
|
||||
if (data.success) {
|
||||
const prod = btoa(`${value.username.toLowerCase()}:${value.password}`);
|
||||
const prodUser = { ...data.user, prod: prod };
|
||||
// first update the rememberMe incase it was selected
|
||||
if (value.rememberMe) {
|
||||
localStorage.setItem("rememberMe", value.rememberMe.toString());
|
||||
localStorage.setItem("username", value.username);
|
||||
} else {
|
||||
localStorage.removeItem("rememberMe");
|
||||
localStorage.removeItem("username");
|
||||
}
|
||||
|
||||
setSession(prodUser, data.token);
|
||||
toast.success(`You are logged in as ${data.user.username}`);
|
||||
router.navigate({ to: "/" });
|
||||
}
|
||||
try {
|
||||
const response = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: value.username,
|
||||
password: value.password,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!data.success) {
|
||||
toast.error(`${data.message}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
//console.log(data);
|
||||
} catch (err) {
|
||||
toast.error("Invalid credentials");
|
||||
}
|
||||
};
|
||||
// Store token in localStorage
|
||||
// localStorage.setItem("auth_token", data.data.token);
|
||||
if (data.success) {
|
||||
const prod = btoa(
|
||||
`${value.username.toLowerCase()}:${value.password}`
|
||||
);
|
||||
const prodUser = { ...data.user, prod: prod };
|
||||
|
||||
return (
|
||||
<div className="ml-[25%]">
|
||||
<LstCard className="p-3 w-96">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<p className="text-2xl">Login to LST</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<hr className="rounded"></hr>
|
||||
<form onSubmit={handleSubmit(onSubmitLogin)}>
|
||||
<div>
|
||||
<Label htmlFor="username" className="m-1">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="smith001"
|
||||
{...register("username")}
|
||||
className={errors.username ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.username}
|
||||
/>
|
||||
{errors.username && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.username.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<>
|
||||
<Label htmlFor={"password"} className="m-1">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
type="password"
|
||||
{...register("password")}
|
||||
className={errors.password ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.password}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<div className="flex">
|
||||
<Controller
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<Checkbox
|
||||
id="remember"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="pl-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
remember me
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
control={control}
|
||||
name="rememberMe"
|
||||
defaultValue={rememeberMe}
|
||||
/>
|
||||
</div>
|
||||
setSession(prodUser, data.token);
|
||||
toast.success(`You are logged in as ${data.user.username}`);
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
console.log(search.redirect ? search.redirect : "oops");
|
||||
router.history.push(search.redirect ? search.redirect : "/");
|
||||
}
|
||||
|
||||
if (!data.success) {
|
||||
toast.error(`${data.message}`);
|
||||
}
|
||||
|
||||
//console.log(data);
|
||||
} catch (err) {
|
||||
toast.error("Invalid credentials");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ml-[25%]">
|
||||
<LstCard className="p-3 w-96">
|
||||
<CardHeader>
|
||||
<div>
|
||||
<p className="text-2xl">Login to LST</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<hr className="rounded"></hr>
|
||||
<form onSubmit={handleSubmit(onSubmitLogin)}>
|
||||
<div>
|
||||
<Label htmlFor="username" className="m-1">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="smith001"
|
||||
{...register("username")}
|
||||
className={errors.username ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.username}
|
||||
/>
|
||||
{errors.username && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.username.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<>
|
||||
<Label htmlFor={"password"} className="m-1">
|
||||
Password
|
||||
</Label>
|
||||
<Input
|
||||
type="password"
|
||||
{...register("password")}
|
||||
className={
|
||||
errors.password ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.password}
|
||||
/>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 text-sm mt-1">
|
||||
{errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
<div className="flex justify-between pt-2">
|
||||
<div className="flex">
|
||||
<Controller
|
||||
render={({ field }) => (
|
||||
<>
|
||||
<Checkbox
|
||||
id="remember"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
<label
|
||||
htmlFor="remember"
|
||||
className="pl-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
remember me
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
control={control}
|
||||
name="rememberMe"
|
||||
defaultValue={rememeberMe}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Submit</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LstCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Cylinder, Package, Truck } from "lucide-react";
|
||||
//import { Cylinder, Package, Truck } from "lucide-react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
@@ -9,67 +9,68 @@ import {
|
||||
} from "../../ui/sidebar";
|
||||
import { hasPageAccess } from "@/utils/userAccess";
|
||||
import { User } from "@/types/users";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
// this will need to be moved to a links section the db to make it more easy to remove and add
|
||||
const items = [
|
||||
{
|
||||
title: "Silo Adjustments",
|
||||
url: "#",
|
||||
icon: Cylinder,
|
||||
role: ["admin", "systemAdmin"],
|
||||
module: "logistics",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
name: "Bulk orders",
|
||||
moduleName: "logistics",
|
||||
description: "",
|
||||
link: "#",
|
||||
icon: Truck,
|
||||
role: ["systemAdmin"],
|
||||
active: true,
|
||||
subSubModule: [],
|
||||
},
|
||||
{
|
||||
name: "Forecast",
|
||||
moduleName: "logistics",
|
||||
description: "",
|
||||
link: "#",
|
||||
icon: Truck,
|
||||
role: ["systemAdmin"],
|
||||
active: true,
|
||||
subSubModule: [],
|
||||
},
|
||||
{
|
||||
name: "Ocme cycle counts",
|
||||
moduleName: "logistics",
|
||||
description: "",
|
||||
link: "#",
|
||||
icon: Package,
|
||||
role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
active: false,
|
||||
subSubModule: [],
|
||||
},
|
||||
{
|
||||
name: "Material Helper",
|
||||
moduleName: "logistics",
|
||||
description: "",
|
||||
link: "/materialHelper/consumption",
|
||||
icon: Package,
|
||||
role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
active: true,
|
||||
subSubModule: [],
|
||||
},
|
||||
{
|
||||
name: "Ocme Cyclecount",
|
||||
moduleName: "logistics",
|
||||
description: "",
|
||||
link: "/cyclecount",
|
||||
icon: Package,
|
||||
role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
active: true,
|
||||
subSubModule: [],
|
||||
},
|
||||
];
|
||||
// const items = [
|
||||
// {
|
||||
// title: "Silo Adjustments",
|
||||
// url: "#",
|
||||
// icon: Cylinder,
|
||||
// role: ["admin", "systemAdmin"],
|
||||
// module: "logistics",
|
||||
// active: true,
|
||||
// },
|
||||
// {
|
||||
// name: "Bulk orders",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Truck,
|
||||
// role: ["systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Forecast",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Truck,
|
||||
// role: ["systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Ocme cycle counts",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "#",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: false,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Material Helper",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "/materialHelper/consumption",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// {
|
||||
// name: "Ocme Cyclecount",
|
||||
// moduleName: "logistics",
|
||||
// description: "",
|
||||
// link: "/cyclecount",
|
||||
// icon: Package,
|
||||
// role: ["technician", "supervisor", "manager", "admin", "systemAdmin"],
|
||||
// active: true,
|
||||
// subSubModule: [],
|
||||
// },
|
||||
// ];
|
||||
|
||||
export function LogisticsSideBar({
|
||||
user,
|
||||
@@ -78,26 +79,35 @@ export function LogisticsSideBar({
|
||||
user: User | null;
|
||||
moduleID: string;
|
||||
}) {
|
||||
const { subModules } = useSubModuleStore();
|
||||
|
||||
const items = subModules.filter((m) => m.moduleName === "logistics");
|
||||
console.log(items);
|
||||
return (
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Logistics</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<>
|
||||
{hasPageAccess(user, item.role, moduleID) &&
|
||||
item.active && (
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
{items.map((item) => {
|
||||
return (
|
||||
<SidebarMenuItem key={item.submodule_id}>
|
||||
<>
|
||||
{hasPageAccess(
|
||||
user,
|
||||
item.roles,
|
||||
moduleID
|
||||
) &&
|
||||
item.active && (
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.link}>
|
||||
<span>{item.name}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
)}
|
||||
</>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useModuleStore } from "../../lib/store/useModuleStore";
|
||||
import { useEffect } from "react";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useSubModuleStore } from "@/lib/store/useSubModuleStore";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
@@ -14,11 +15,13 @@ export const SessionProvider = ({
|
||||
const { fetchModules } = useModuleStore();
|
||||
const { fetchSettings } = useSettingStore();
|
||||
const { fetchUserRoles } = useGetUserRoles();
|
||||
const { fetchSubModules } = useSubModuleStore();
|
||||
|
||||
useEffect(() => {
|
||||
fetchModules();
|
||||
fetchSettings();
|
||||
fetchUserRoles();
|
||||
fetchSubModules();
|
||||
}, []);
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
|
||||
Reference in New Issue
Block a user