@carlonicora/nextjs-jsonapi 1.0.3 → 1.0.5

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

@@ -0,0 +1,75 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { errorToast } from "../../../../components";
+import { CardContent, CardDescription, CardHeader, CardTitle } from "../../../../shadcnui";
+import { useAuthContext } from "../../contexts";
+import { AuthService } from "../../data";
+import { AuthComponent } from "../../enums";
+
+export function ActivateAccount() {
+  const { setComponentType, params, setParams } = useAuthContext();
+  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const t = useTranslations();
+
+  useEffect(() => {
+    async function ActivateAccount(code: string) {
+      try {
+        const payload = {
+          activationCode: code,
+        };
+
+        await AuthService.activate(payload);
+        setShowConfirmation(true);
+
+        setParams(undefined);
+
+        toast.success(t("foundations.auth.account_activated"), {
+          description: t("foundations.auth.account_activated_description"),
+        });
+
+        setTimeout(() => {
+          setComponentType(AuthComponent.Login);
+        }, 2000);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+        errorToast({ title: t(`generic.errors.error`), error: e });
+      }
+    }
+
+    if (params && params.code) {
+      ActivateAccount(params.code);
+    } else {
+      setError(t(`foundations.auth.errors.invalid_invitation_code`));
+    }
+  }, []);
+
+  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.accept_invitation")}
+        </CardTitle>
+        <CardDescription className="text-center text-sm">
+          {error ? <>{t("foundations.auth.errors.activating_account")}</> : <> </>}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-center text-xl">
+          {showConfirmation ? (
+            <>{t("foundations.auth.activation_description")}</>
+          ) : error ? (
+            <>{error}</>
+          ) : (
+            <>{t("foundations.auth.activation_wait")}</>
+          )}
+        </CardDescription>
+      </CardContent>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { JsonApiHydratedDataInterface, Modules, rehydrate } from "../../../../core";
+import { useI18nRouter } from "../../../../i18n";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { AuthInterface, AuthService } from "../../data";
+
+export function Cookies({ dehydratedAuth, page }: { dehydratedAuth: JsonApiHydratedDataInterface; page?: string }) {
+  const { setUser } = useCurrentUserContext<UserInterface>();
+  const router = useI18nRouter();
+  const [hasSaved, setHasSaved] = useState(false);
+
+  useEffect(() => {
+    if (hasSaved) return;
+    async function saveTokenOnServer() {
+      await AuthService.saveToken({ dehydratedAuth });
+      const auth: AuthInterface = rehydrate(Modules.Auth, dehydratedAuth) as AuthInterface;
+      setUser(auth.user as UserInterface);
+      setHasSaved(true);
+
+      if (page) {
+        if (page.startsWith("/")) router.push(page ?? "/");
+        window.location.href = page;
+      }
+    }
+    saveTokenOnServer();
+  }, [dehydratedAuth, setUser, hasSaved, router]);
+
+  return null;
+}

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

@@ -0,0 +1,108 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { errorToast, FormInput } from "../../../../components";
+import {
+  Button,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  Link,
+} from "../../../../shadcnui";
+import { useAuthContext } from "../../contexts";
+import { AuthService } from "../../data";
+import { AuthComponent } from "../../enums";
+
+export function ForgotPassword() {
+  const t = useTranslations();
+  const { setComponentType } = useAuthContext();
+
+  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
+
+  const formSchema = z.object({
+    email: z.string().email({
+      message: t(`generic.errors.invalid_email`),
+    }),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const payload = {
+        email: values.email,
+      };
+
+      await AuthService.initialiseForgotPassword(payload);
+      setShowConfirmation(true);
+    } catch (e) {
+      errorToast({ error: e });
+    }
+  };
+
+  return (
+    <>
+      <CardHeader data-testid="page-forgot-password-container">
+        <CardTitle className="text-primary flex flex-col items-center pb-10 text-4xl">
+          <Image src="/phlow-logo.webp" alt="Phlows" width={100} height={100} priority />
+          {t("foundations.auth.forgot_password")}
+        </CardTitle>
+        <CardDescription className="text-sm">
+          {showConfirmation ? <> </> : <>{t(`foundations.auth.add_email_to_reset`)}</>}
+        </CardDescription>
+      </CardHeader>
+      {showConfirmation ? (
+        <CardContent>
+          <CardDescription className="text-center text-xl">{t(`foundations.auth.reset_confirmation`)}</CardDescription>
+        </CardContent>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <CardContent>
+              <FormInput
+                form={form}
+                id="email"
+                name={t(`generic.fields.email.label`)}
+                placeholder={t(`generic.fields.email.placeholder`)}
+                testId="form-forgot-password-input-email"
+              />
+              <Button className="mt-4 w-full" type={"submit"} data-testid="form-forgot-password-button-reset">
+                {t(`foundations.auth.buttons.reset_password`)}
+              </Button>
+            </CardContent>
+            <CardFooter className="flex w-full flex-row justify-between">
+              {/* <Link
+                href="#"
+                className="flex w-full justify-start"
+                onClick={() => setComponentType(AuthComponent.Register)}
+              >
+                {t("foundations.auth.buttons.register")}
+              </Link> */}
+              <Link
+                href="#"
+                className="flex w-full justify-end"
+                onClick={() => setComponentType(AuthComponent.Login)}
+                data-testid="form-forgot-password-link-login"
+              >
+                {t(`foundations.auth.buttons.login`)}
+              </Link>
+            </CardFooter>
+          </form>
+        </Form>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,118 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { errorToast, FormInput, FormPassword } from "../../../../components";
+import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
+import {
+  Button,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  Link,
+} from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { useAuthContext } from "../../contexts";
+import { AuthService } from "../../data";
+import { AuthComponent } from "../../enums";
+
+export function Login() {
+  const t = useTranslations();
+  const { setUser } = useCurrentUserContext<UserInterface>();
+  const { setComponentType } = useAuthContext();
+  const generateUrl = usePageUrlGenerator();
+  const router = useI18nRouter();
+
+  const formSchema = z.object({
+    email: z.string().email({
+      message: t(`generic.errors.invalid_email`),
+    }),
+    password: z.string().min(3, { message: t(`foundations.auth.errors.password_too_short`) }),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const user: UserInterface = (await AuthService.login({
+        email: values.email,
+        password: values.password,
+      })) as UserInterface;
+
+      setUser(user);
+      router.replace(generateUrl({ page: `/` }));
+    } catch (e) {
+      errorToast({
+        title: t(`generic.errors.error`),
+        error: e,
+      });
+    }
+  };
+
+  return (
+    <>
+      <CardHeader data-testid="page-login-container">
+        <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.login")}
+        </CardTitle>
+
+        <CardDescription className="text-sm">{t(`foundations.auth.login_description`)}</CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <CardContent>
+            <FormInput
+              autoFocus
+              form={form}
+              id="email"
+              name={t(`generic.fields.email.label`)}
+              placeholder={t(`generic.fields.email.placeholder`)}
+              testId="form-login-input-email"
+            />
+            <FormPassword
+              form={form}
+              id="password"
+              name={t(`foundations.user.fields.password.label`)}
+              placeholder={t(`foundations.user.fields.password.placeholder`)}
+              testId="form-login-input-password"
+            />
+            <Button className="mt-4 w-full" type={"submit"} data-testid="form-login-button-submit">
+              {t(`foundations.auth.login`)}
+            </Button>
+          </CardContent>
+          <CardFooter className="flex w-full flex-row justify-between">
+            <Link
+              href="#"
+              className="flex w-full justify-start"
+              onClick={() => setComponentType(AuthComponent.Register)}
+            >
+              {t(`foundations.auth.register`)}
+            </Link>
+            <Link
+              href="#"
+              className="flex w-full justify-end"
+              onClick={() => setComponentType(AuthComponent.ForgotPassword)}
+              data-testid="form-login-link-forgot-password"
+            >
+              {t(`foundations.auth.forgot_password`)}
+            </Link>
+          </CardFooter>
+        </form>
+      </Form>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { usePageUrlGenerator } from "../../../../hooks";
+import { AuthService } from "../../data";
+
+export function Logout() {
+  const generateUrl = usePageUrlGenerator();
+
+  useEffect(() => {
+    const logOut = async () => {
+      await AuthService.logout();
+      window.location.href = generateUrl({ page: `/` });
+    };
+    logOut();
+  }, []);
+
+  return <></>;
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { deleteCookie, getCookie } from "cookies-next";
+import { useEffect } from "react";
+import { UserInterface, UserService } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { getTokenHandler } from "../../config";
+
+export function RefreshUser() {
+  const { setUser } = useCurrentUserContext<UserInterface>();
+
+  const loadFullUser = async () => {
+    const fullUser = await UserService.findFullUser();
+
+    if (fullUser) {
+      setUser(fullUser);
+      const token = {
+        userId: fullUser.id,
+        companyId: fullUser.company?.id,
+        licenseExpirationDate: fullUser.company?.licenseExpirationDate,
+        roles: fullUser.roles.map((role) => role.id),
+        features: fullUser.company?.features?.map((feature) => feature.id) ?? [],
+        modules: fullUser.modules.map((module) => {
+          return { id: module.id, permissions: module.permissions };
+        }),
+      };
+
+      await getTokenHandler()?.updateToken(token);
+      deleteCookie("reloadData");
+    }
+  };
+
+  useEffect(() => {
+    const reloadData = getCookie("reloadData");
+    if (reloadData !== undefined) loadFullUser();
+  }, []);
+
+  return null;
+}

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

@@ -0,0 +1,150 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { v4 } from "uuid";
+import { z } from "zod";
+import { errorToast, FormInput, FormPassword } from "../../../../components";
+import {
+  Button,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  Link,
+} from "../../../../shadcnui";
+import { useAuthContext } from "../../contexts";
+import { AuthService } from "../../data";
+import { AuthComponent } from "../../enums";
+
+export default function Register() {
+  const t = useTranslations();
+  const { setComponentType } = useAuthContext();
+
+  const [showConfirmation, setShowConfirmation] = useState<boolean>(false);
+
+  const formSchema = z.object({
+    company: z.string().min(1, {
+      message: t(`generic.errors.missing_company_name`),
+    }),
+    name: z.string().min(1, {
+      message: t("generic.errors.missing_name"),
+    }),
+    email: z.string().email({
+      message: t(`generic.errors.invalid_email`),
+    }),
+    password: z
+      .string()
+      .min(8, t(`foundations.auth.errors.password_too_short`))
+      .regex(/^(?=.*[0-9])(?=.*[^a-zA-Z0-9]).*$/, {
+        message: t(`foundations.auth.errors.password_invalid_format`),
+      }),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      company: "",
+      name: "",
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
+    try {
+      const payload = {
+        id: v4(),
+        companyName: values.company,
+        name: values.name,
+        email: values.email,
+        password: values.password,
+      };
+
+      await AuthService.register(payload);
+      setShowConfirmation(true);
+    } catch (e) {
+      errorToast({ error: e });
+    }
+  };
+
+  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.register`)}
+        </CardTitle>
+        <CardDescription className="text-sm">
+          {showConfirmation ? <> </> : <>{t(`foundations.auth.register_description`)}</>}
+        </CardDescription>
+      </CardHeader>
+      {showConfirmation ? (
+        <CardContent>
+          <CardDescription className="text-center text-xl">
+            {t("foundations.auth.register_confirmation")}
+          </CardDescription>
+        </CardContent>
+      ) : (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <CardContent>
+              <FormInput
+                isRequired
+                form={form}
+                id="company"
+                name={t(`foundations.company.fields.name.label`)}
+                placeholder={t(`foundations.company.fields.name.placeholder`)}
+              />
+              <FormInput
+                isRequired
+                form={form}
+                id="name"
+                name={t(`foundations.user.fields.name.label`)}
+                placeholder={t(`foundations.user.fields.name.placeholder`)}
+              />
+              <FormInput
+                isRequired
+                form={form}
+                id="email"
+                name={t(`generic.fields.email.label`)}
+                placeholder={t(`generic.fields.email.placeholder`)}
+              />
+              <FormPassword
+                isRequired
+                form={form}
+                id="password"
+                name={t(`foundations.user.fields.password.label`)}
+                placeholder={t(`foundations.user.fields.password.placeholder`)}
+              />
+              <Button className="mt-4 w-full" type={"submit"}>
+                {t(`foundations.auth.buttons.register`)}
+              </Button>
+            </CardContent>
+            <CardFooter className="flex w-full flex-row justify-between">
+              <Link
+                href="#"
+                className="flex w-full justify-start"
+                onClick={() => setComponentType(AuthComponent.Login)}
+              >
+                {t(`foundations.auth.buttons.login`)}
+              </Link>
+              <Link
+                href="#"
+                className="flex w-full justify-end"
+                onClick={() => setComponentType(AuthComponent.ForgotPassword)}
+              >
+                {t(`foundations.auth.buttons.forgot_password`)}
+              </Link>
+            </CardFooter>
+          </form>
+        </Form>
+      )}
+    </>
+  );
+}

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