@carlonicora/nextjs-jsonapi 1.0.4 → 1.0.6

package/src/features/auth/components/forms/ResetPassword.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { errorToast, FormPassword } from "../../../../components";
+import { Button, CardContent, CardDescription, CardHeader, CardTitle, Form } from "../../../../shadcnui";
+import { useAuthContext } from "../../contexts";
+import { AuthService } from "../../data";
+import { AuthComponent } from "../../enums";
+
+export function ResetPassword() {
+  const { setComponentType, params, setParams } = useAuthContext();
+  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const t = useTranslations();
+
+  useEffect(() => {
+    async function validateResetPasswordCode(code: string) {
+      try {
+        const payload: any = {
+          code: code,
+        };
+
+        await AuthService.validateCode(payload);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+        errorToast({ title: t(`generic.errors.error`), error: e });
+      }
+    }
+
+    if (params && params.code) {
+      validateResetPasswordCode(params.code);
+    } else {
+      setError(t(`foundations.auth.errors.invalid_password_reset_code`));
+    }
+  }, []);
+
+  const formSchema = z
+    .object({
+      password: z.string().min(1, {
+        message: t(`foundations.user.fields.password.error`),
+      }),
+      passwordRetype: z.string().min(1, {
+        message: t(`foundations.auth.fields.retype_password.error`),
+      }),
+    })
+    .refine((data) => data.password === data.passwordRetype, {
+      message: t(`foundations.auth.fields.retype_password.error_not_match`),
+      path: ["passwordRetype"],
+    });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: "",
+      passwordRetype: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    try {
+      if (!params?.code) return;
+
+      const payload = {
+        code: params?.code,
+        password: values.password,
+      };
+
+      await AuthService.resetPassword(payload);
+      setShowConfirmation(true);
+
+      toast.success(t(`foundations.auth.reset_success`), {
+        description: t(`foundations.auth.reset_success_description`),
+      });
+
+      setTimeout(() => {
+        setComponentType(AuthComponent.Login);
+        setParams(undefined);
+      }, 2000);
+    } catch (e) {
+      errorToast({ title: t(`generic.errors.error`), error });
+    }
+  };
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-primary flex flex-col items-center pb-10 text-4xl">
+          <Image src="/phlow-logo.webp" alt="Phlow" width={100} height={100} priority />
+          {t(`foundations.auth.password_reset`)}
+        </CardTitle>
+        <CardDescription className="text-center text-sm">
+          {error ? (
+            <>{t(`foundations.auth.errors.password_reset_error`)}</>
+          ) : (
+            <>{t(`foundations.auth.reset_password`)}</>
+          )}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {showConfirmation ? (
+          <CardDescription className="text-center text-xl">
+            {t(`foundations.auth.reset_success_description`)}
+          </CardDescription>
+        ) : error ? (
+          <CardDescription className="text-center text-xl">{error}</CardDescription>
+        ) : (
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)}>
+              <FormPassword form={form} id="password" name={"Password"} />
+              <FormPassword form={form} id="passwordRetype" name={"Retype Password"} />
+              <Button className="mt-4 w-full" type={"submit"}>
+                {t(`foundations.auth.buttons.reset_password`)}
+              </Button>
+            </form>
+          </Form>
+        )}
+      </CardContent>
+    </>
+  );
+}

package/src/features/auth/components/forms/index.ts

@@ -0,0 +1,9 @@
+export * from "./AcceptInvitation";
+export * from "./ActivateAccount";
+export * from "./Cookies";
+export * from "./ForgotPassword";
+export * from "./Login";
+export * from "./Logout";
+export * from "./RefreshUser";
+export * from "./Register";
+export * from "./ResetPassword";

package/src/features/auth/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./containers";
+export * from "./details";
+export * from "./forms";

package/src/features/auth/contexts/AuthContext.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { createContext, ReactElement, useContext, useMemo, useState } from "react";
+import {
+  AcceptInvitation,
+  ActivateAccount,
+  ForgotPassword,
+  LandingComponent,
+  Login,
+  ResetPassword,
+} from "../components";
+import Register from "../components/forms/Register";
+import { AuthComponent } from "../enums";
+
+interface AuthContextType {
+  activeComponent: ReactElement<any> | null;
+  setComponentType: (componentType: AuthComponent) => void;
+  setParams: (params?: { code?: string }) => void;
+  params?: { code?: string };
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthContextProvider = ({
+  children,
+  initialComponentType,
+  initialParams,
+}: {
+  children: React.ReactNode;
+  initialComponentType?: AuthComponent;
+  initialParams?: { code?: string };
+}) => {
+  const [componentType, setComponentType] = useState<AuthComponent | undefined>(initialComponentType);
+  const [params, setParams] = useState<{ code?: string } | undefined>(initialParams);
+
+  const activeComponent = useMemo(() => {
+    if (componentType === undefined) return null;
+
+    switch (componentType) {
+      case AuthComponent.Login:
+        return <Login />;
+      case AuthComponent.Register:
+        return <Register />;
+      case AuthComponent.ForgotPassword:
+        return <ForgotPassword />;
+      case AuthComponent.ActivateAccount:
+        return <ActivateAccount />;
+      case AuthComponent.ResetPassword:
+        return <ResetPassword />;
+      case AuthComponent.AcceptInvitation:
+        return <AcceptInvitation />;
+      default:
+        return <LandingComponent />;
+    }
+  }, [componentType]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        activeComponent,
+        setComponentType,
+        setParams,
+        params,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuthContext = (): AuthContextType => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuthContext must be used within a AuthComponentProvider");
+  }
+  return context;
+};

package/src/features/auth/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./AuthContext";

package/src/features/auth/enums/AuthComponent.ts

@@ -0,0 +1,9 @@
+export enum AuthComponent {
+  Login,
+  ForgotPassword,
+  ResetPassword,
+  ActivateAccount,
+  AcceptInvitation,
+  Register,
+  Landing,
+}

package/src/features/auth/enums/index.ts

@@ -0,0 +1 @@
+export * from "./AuthComponent";

package/src/features/auth/index.ts

@@ -1,3 +1,4 @@
 export * from "./auth.module";
-export * from "./data";
 export { configureAuth, type TokenHandler, type TokenParams } from "./config";
+export * from "./data";
+export * from "./enums";

package/src/features/auth/utils/AuthCookies.ts

@@ -0,0 +1,134 @@
+"use server";
+
+import { cookies } from "next/headers";
+import zlib from "zlib";
+
+export async function updateToken(params: {
+  token?: string;
+  refreshToken?: string;
+  userId?: string;
+  companyId?: string;
+  licenseExpirationDate?: Date;
+  roles?: string[];
+  features?: string[];
+  modules?: {
+    id: string;
+    permissions: {
+      create: boolean | string;
+      read: boolean | string;
+      update: boolean | string;
+      delete: boolean | string;
+    };
+  }[];
+}): Promise<void> {
+  const isProduction = process.env.NODE_ENV === "production";
+
+  if (params.token)
+    (await cookies()).set({
+      name: "token",
+      value: params.token,
+      httpOnly: false,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24),
+    });
+  if (params.refreshToken)
+    (await cookies()).set({
+      name: "refreshToken",
+      value: params.refreshToken,
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.userId)
+    (await cookies()).set({
+      name: "userId",
+      value: params.userId,
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.companyId)
+    (await cookies()).set({
+      name: "companyId",
+      value: params.companyId,
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.licenseExpirationDate)
+    (await cookies()).set({
+      name: "licenseExpirationDate",
+      value: params.licenseExpirationDate.toISOString(),
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.roles)
+    (await cookies()).set({
+      name: "roles",
+      value: JSON.stringify(params.roles),
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.features)
+    (await cookies()).set({
+      name: "features",
+      value: JSON.stringify(params.features),
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+
+  if (params.modules) {
+    const compressedValue = zlib.gzipSync(JSON.stringify(params.modules)).toString("base64");
+
+    (await cookies()).set({
+      name: "modules",
+      value: JSON.stringify(compressedValue),
+      httpOnly: true,
+      path: "/",
+      secure: isProduction,
+      expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365),
+    });
+  }
+}
+
+export async function removeToken(): Promise<void> {
+  (await cookies()).delete({
+    name: "token",
+  });
+  (await cookies()).delete({
+    name: "refreshToken",
+  });
+  (await cookies()).delete({
+    name: "userId",
+  });
+  (await cookies()).delete({
+    name: "companyId",
+  });
+  (await cookies()).delete({
+    name: "licenseExpirationDate",
+  });
+  (await cookies()).delete({
+    name: "roles",
+  });
+  (await cookies()).delete({
+    name: "features",
+  });
+  (await cookies()).delete({
+    name: "modules",
+  });
+}

package/src/features/auth/utils/index.ts

@@ -0,0 +1 @@
+export * from "./AuthCookies";

package/src/features/company/components/containers/AdminCompanyContainer.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { getRoleId } from "../../../../roles";
+import { UserInterface } from "../../../user";
+import { AdminUsersList } from "../../../user/components";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { useCompanyContext } from "../../contexts/CompanyContext";
+import { CompanyDetails } from "../details/CompanyDetails";
+
+function AdminCompanyContainerInternal() {
+  const { company } = useCompanyContext();
+  const { hasRole } = useCurrentUserContext<UserInterface>();
+
+  if (!company || !hasRole(getRoleId().Administrator)) return null;
+
+  return (
+    <>
+      <CompanyDetails />
+      <AdminUsersList />
+    </>
+  );
+}
+
+export function AdminCompanyContainer() {
+  return <AdminCompanyContainerInternal />;
+}

package/src/features/company/components/containers/CompanyContainer.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { CompanyProvider } from "../../contexts/CompanyContext";
+import { CompanyDetails } from "../details/CompanyDetails";
+
+export function CompanyContainer() {
+  const { currentUser } = useCurrentUserContext<UserInterface>();
+  if (!currentUser) return null;
+
+  return (
+    <CompanyProvider dehydratedCompany={currentUser.company}>
+      <CompanyDetails />
+    </CompanyProvider>
+  );
+}

package/src/features/company/components/containers/index.ts

@@ -0,0 +1,2 @@
+export * from "./AdminCompanyContainer";
+export * from "./CompanyContainer";

package/src/features/company/components/details/CompanyDetails.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { ContentTitle } from "../../../../components";
+import { useSharedContext } from "../../../../contexts";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { useCompanyContext } from "../../contexts/CompanyContext";
+
+export function CompanyDetails() {
+  const t = useTranslations();
+  const { title } = useSharedContext();
+  const generateUrl = usePageUrlGenerator();
+
+  const { company } = useCompanyContext();
+  if (!company) return null;
+
+  return (
+    <div className="flex w-full flex-col gap-y-2">
+      <ContentTitle type={title.type} element={title.element} functions={title.functions} />
+      {company.logo && (
+        <Image src={company.logo} alt={company.name} width={150} height={150} className="mb-4 rounded-md" />
+      )}
+    </div>
+  );
+}

package/src/features/company/components/details/index.ts

@@ -0,0 +1 @@
+export * from "./CompanyDetails";

package/src/features/company/components/forms/CompanyConfigurationEditor.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useMemo, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+import { CommonEditorButtons, errorToast } from "../../../../components";
+import { getRoleId } from "../../../../roles";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Form,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../../shadcnui";
+import { UserInterface, UserService } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { CompanyInput, CompanyInterface, CompanyService } from "../../data";
+import { CompanyConfigurationSecurityForm } from "./CompanyConfigurationSecurityForm";
+
+type CompanyConfigurationEditorProps = {
+  company: CompanyInterface;
+};
+
+function CompanyConfigurationEditorInternal({ company }: CompanyConfigurationEditorProps) {
+  const [open, setOpen] = useState<boolean>(false);
+  const t = useTranslations();
+  const { setUser } = useCurrentUserContext<UserInterface>();
+
+  const defaultValues = useMemo(() => {
+    return {
+      isManagedKnowledge: company.configurations?.isManagedKnowledge ?? false,
+      allowPublicBot: company.configurations?.allowPublicBot ?? false,
+    };
+  }, [company.configurations]);
+
+  const close = () => {
+    setOpen(false);
+    form.reset();
+  };
+
+  const formSchema = z.object({
+    isManagedKnowledge: z.boolean().optional(),
+    allowPublicBot: z.boolean().optional(),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: defaultValues,
+    shouldUnregister: false,
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        isManagedKnowledge: company.configurations?.isManagedKnowledge ?? false,
+        allowPublicBot: company.configurations?.allowPublicBot ?? false,
+      });
+    }
+  }, [company, open]);
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
+    const payload: CompanyInput = {
+      id: company.id,
+      configurations: {
+        isManagedKnowledge: values.isManagedKnowledge ?? false,
+        allowPublicBot: values.allowPublicBot ?? false,
+      },
+    };
+
+    try {
+      await CompanyService.updateConfigurations(payload);
+
+      // Refresh user data to update localStorage with new company configurations
+      const fullUser = await UserService.findFullUser();
+      if (fullUser) {
+        setUser(fullUser);
+      }
+
+      toast.message("Configurations Updated", {
+        description: `The system configurations have been updated successfully.`,
+      });
+      close();
+    } catch (error) {
+      errorToast({
+        title: t(`generic.errors.update`),
+        error,
+      });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant={`ghost`} className="cursor-pointer">
+          <Settings2Icon className="h-3.5 w-3.5" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className={`flex max-h-[70vh] max-w-4xl flex-col overflow-y-auto`}>
+        <DialogHeader>
+          <DialogTitle>{t(`types.configurations`, { count: 2 })}</DialogTitle>
+          <DialogDescription className="text-destructive">
+            {t(`features.configuration.warning_description`)}
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className={`flex w-full flex-col gap-y-4`}>
+            <div className={`flex flex-row gap-x-4`}>
+              <div className={`flex w-full flex-col justify-start gap-y-4`}>
+                <Tabs defaultValue={process.env.NEXT_PUBLIC_PRIVATE_INSTALLATION ? "security" : "ai"}>
+                  <TabsList>
+                    <TabsTrigger value="security">Privacy & Security</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="features">
+                    <div className="space-y-4">
+                      <p className="text-muted-foreground text-sm">
+                        Feature configuration will be implemented in future updates.
+                      </p>
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="security">
+                    <CompanyConfigurationSecurityForm form={form} />
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </div>
+            <CommonEditorButtons form={form} setOpen={setOpen} isEdit={true} />
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function CompanyConfigurationEditor(props: CompanyConfigurationEditorProps) {
+  const { hasRole } = useCurrentUserContext<UserInterface>();
+
+  if (hasRole(getRoleId().Administrator)) return <CompanyConfigurationEditorInternal {...props} />;
+
+  return <CompanyConfigurationEditorInternal {...props} />;
+}