Merge pull request #66 from prowler-cloud/PRWLR-4883-Integrate-authentication-endpoint-OSS-bg-2

Styling signIn and signUp pages

actions/providers/providers.ts

@@ -48,7 +48,7 @@ export const getProviders = async ({
 };
 
 export const getProvider = async (formData: FormData) => {
-  // const session = await auth();
+  const session = await auth();
   const providerId = formData.get("id");
 
   const keyServer = process.env.API_BASE_URL;
@@ -58,6 +58,7 @@ export const getProvider = async (formData: FormData) => {
     const providers = await fetch(url.toString(), {
       headers: {
         Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
       },
     });
     const data = await providers.json();
@@ -71,7 +72,7 @@ export const getProvider = async (formData: FormData) => {
 };
 
 export const updateProvider = async (formData: FormData) => {
-  // const session = await auth();
+  const session = await auth();
   const keyServer = process.env.API_BASE_URL;
 
   const providerId = formData.get("providerId");
@@ -85,6 +86,7 @@ export const updateProvider = async (formData: FormData) => {
       headers: {
         "Content-Type": "application/vnd.api+json",
         Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
       },
       body: JSON.stringify({
         data: {
@@ -173,7 +175,7 @@ export const checkConnectionProvider = async (formData: FormData) => {
 };
 
 export const deleteProvider = async (formData: FormData) => {
-  // const session = await auth();
+  const session = await auth();
   const keyServer = process.env.API_BASE_URL;
 
   const providerId = formData.get("id");
@@ -184,6 +186,7 @@ export const deleteProvider = async (formData: FormData) => {
       method: "DELETE",
       headers: {
         Accept: "application/vnd.api+json",
+        Authorization: `Bearer ${session?.accessToken}`,
       },
     });
     const data = await response.json();
@@ -196,7 +199,7 @@ export const deleteProvider = async (formData: FormData) => {
   }
 };
 
-export const getErrorMessage = (error: unknown): string => {
+export const getErrorMessage = async (error: unknown): Promise<string> => {
   let message: string;
 
   if (error instanceof Error) {

app/(auth)/sign-in/page.tsx

@@ -1,4 +1,4 @@
-import { AuthForm } from "@/components/auth";
+import { AuthForm } from "@/components/auth/oss";
 
 const SignIn = () => {
   return <AuthForm type="sign-in" />;

app/(auth)/sign-up/page.tsx

@@ -1,4 +1,4 @@
-import { AuthForm } from "@/components/auth";
+import { AuthForm } from "@/components/auth/oss";
 
 const SignUp = () => {
   return <AuthForm type="sign-up" />;

app/(prowler)/profile/page.tsx

@@ -15,7 +15,7 @@ export default async function Profile() {
   }
 
   // const user = await getUserByMe();
-  // console.log("user", user);
+
   return (
     <>
       <Header title="User Profile" icon="ci:users" />

app/(prowler)/providers/page.tsx

@@ -24,7 +24,7 @@ export default async function Providers({
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
 
       <Spacer y={4} />
-      <FilterControls search providers date customFilters={filtersProviders} />
+      <FilterControls search providers customFilters={filtersProviders} />
       <Spacer y={4} />
 
       <AddProvider />

auth.config.ts

@@ -124,7 +124,7 @@ export const authConfig = {
           token.accessToken as string,
         ) as CustomJwtPayload;
         // eslint-disable-next-line no-console
-        console.log("decodedToken", decodedToken);
+        // console.log("decodedToken", decodedToken);
         token.accessTokenExpires = (decodedToken.exp as number) * 1000;
         token.user_id = decodedToken.user_id;
         token.tenant_id = decodedToken.tenant_id;
@@ -150,11 +150,11 @@ export const authConfig = {
       }
 
       // eslint-disable-next-line no-console
-      console.log(
-        "Access token expires",
-        token.accessTokenExpires,
-        new Date(Number(token.accessTokenExpires)),
-      );
+      // console.log(
+      //   "Access token expires",
+      //   token.accessTokenExpires,
+      //   new Date(Number(token.accessTokenExpires)),
+      // );
 
       // If the access token is not expired, return the token
       if (

components/auth/oss/auth-form.tsx

@@ -4,12 +4,16 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
 import { Button, Checkbox, Divider, Link } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useFormState } from "react-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { authenticate, createNewUser } from "@/actions/auth";
+import { NotificationIcon, ProwlerExtended } from "@/components/icons";
+import { ThemeSwitch } from "@/components/ThemeSwitch";
+import { useToast } from "@/components/ui";
+import { CustomButton, CustomInput } from "@/components/ui/custom";
 import {
   Form,
   FormControl,
@@ -18,11 +22,6 @@ import {
 } from "@/components/ui/form";
 import { ApiError, authFormSchema } from "@/types";
 
-import { NotificationIcon, ProwlerExtended } from "../icons";
-import { ThemeSwitch } from "../ThemeSwitch";
-import { CustomButton, CustomInput } from "../ui/custom";
-import { useToast } from "../ui/toast";
-
 export const AuthForm = ({ type }: { type: string }) => {
   const formSchema = authFormSchema(type);
   const router = useRouter();
@@ -42,11 +41,9 @@ export const AuthForm = ({ type }: { type: string }) => {
   });
 
   const [state, dispatch] = useFormState(authenticate, undefined);
-
+  const [isLoading, setIsLoading] = useState(false);
   const { toast } = useToast();
 
-  const isLoading = form.formState.isSubmitting;
-
   useEffect(() => {
     if (state?.message === "Success") {
       router.push("/");
@@ -55,13 +52,17 @@ export const AuthForm = ({ type }: { type: string }) => {
 
   const onSubmit = async (data: z.infer<typeof formSchema>) => {
     if (type === "sign-in") {
+      setIsLoading(true);
       dispatch({
         email: data.email.toLowerCase(),
         password: data.password,
       });
+      setIsLoading(false);
     }
     if (type === "sign-up") {
+      setIsLoading(true);
       const newUser = await createNewUser(data);
+      setIsLoading(false);
 
       if (!newUser.errors) {
         router.push("/sign-in");
@@ -111,13 +112,15 @@ export const AuthForm = ({ type }: { type: string }) => {
   return (
     <div className="relative flex h-screen w-screen">
       {/* Auth Form */}
-      <div className="relative flex w-full items-center justify-center bg-background lg:w-1/2">
-        {/* Prowler Logo */}
-        <div className="absolute top-[10%] z-10 flex h-fit w-fit flex-col items-center lg:hidden">
-          <ProwlerExtended width={300} />
-        </div>
+      <div className="relative flex w-full items-center justify-center bg-background lg:w-full">
+        {/* Background Pattern */}
+        <div className="absolute h-full w-full bg-[radial-gradient(#94a3b8_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)]"></div>
 
-        <div className="flex w-full max-w-sm flex-col gap-4 rounded-large bg-content1 px-8 pb-10 pt-6 shadow-small">
+        <div className="dark:bg-prowler-black-900/90 relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large bg-white/90 px-8 py-10 shadow-small md:max-w-md">
+          {/* Prowler Logo */}
+          <div className="absolute -top-[100px] left-1/2 z-10 flex h-fit w-fit -translate-x-1/2">
+            <ProwlerExtended width={300} />
+          </div>
           <div className="flex items-center justify-between">
             <p className="pb-2 text-xl font-medium">
               {type === "sign-in" ? "Sign In" : "Sign Up"}
@@ -286,22 +289,6 @@ export const AuthForm = ({ type }: { type: string }) => {
           )}
         </div>
       </div>
-
-      <div
-        className="relative hidden w-1/2 flex-col-reverse rounded-medium p-10 shadow-small lg:flex"
-        style={{
-          backgroundImage:
-            "url(https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/white-building.jpg)",
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        <div className="flex flex-col items-end gap-4">
-          <p className="w-full text-right text-2xl text-black/60">
-            <span className="font-normal">Open Source Security Platform</span>
-          </p>
-        </div>
-      </div>
     </div>
   );
 };

components/filters/data-filters.ts

@@ -1,9 +1,4 @@
 export const filtersProviders = [
-  {
-    key: "provider__in",
-    labelCheckboxGroup: "Select a Provider",
-    values: ["aws", "gcp", "azure", "kubernetes"],
-  },
   {
     key: "connected",
     labelCheckboxGroup: "Connection",

tailwind.config.js

@@ -20,36 +20,34 @@ module.exports = {
     extend: {
       colors: {
         prowler: {
-          blue: {
+          theme: {
             midnight: "#030921",
             pale: "#f3fcff",
-            smoky: "#7b8390",
-          },
-          grey: {
-            medium: "#353a4d",
-            light: "#868994",
-          },
-          green: {
-            DEFAULT: "#9FD655",
-            medium: "#09BF3D",
-          },
-          theme: {
             green: "#6af400",
             purple: "#5001d0",
             coral: "#ff5356",
             orange: "#f69000",
             yellow: "#ffdf16",
           },
-          dark: {
-            DEFAULT: "#0E1117",
-            700: "#151B23",
-            400: "#262C36",
-            title: "#E2E8F0",
-            text: "#94a3b8" /* primary default for dark mode */,
+          blue: {
+            800: "#1e293bff",
           },
-          light: {
-            title: "#1e293bff",
-            text: "#64748b" /* primary default for light mode */,
+          grey: {
+            medium: "#353a4d",
+            light: "#868994",
+            600: "#64748b",
+          },
+          green: {
+            DEFAULT: "#9FD655",
+            medium: "#09BF3D",
+          },
+          black: {
+            DEFAULT: "#000",
+            900: "#18181A",
+          },
+          white: {
+            DEFAULT: "#FFF",
+            900: "#18181A",
           },
         },
         system: {