mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-04-14 16:50:04 +00:00
feat: upgrade to React 19, Next.js 15, React Compiler, HeroUI and Tailwind 4 (#8748)
Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local> Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com> Co-authored-by: César Arroba <cesar@prowler.com> Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@heroui/button";
|
||||
import { Checkbox } from "@heroui/checkbox";
|
||||
import { Divider } from "@heroui/divider";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Button, Checkbox, Divider } from "@nextui-org/react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
@@ -190,9 +192,9 @@ export const AuthForm = ({
|
||||
{/* Auth Form */}
|
||||
<div className="relative flex w-full items-center justify-center lg:w-full">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute h-full w-full bg-[radial-gradient(#6af400_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)]"></div>
|
||||
<div className="absolute h-full w-full bg-[radial-gradient(#6af400_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)] bg-size-[16px_16px]"></div>
|
||||
|
||||
<div className="relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large border-1 border-divider bg-white/90 px-8 py-10 shadow-small dark:bg-background/85 md:max-w-md">
|
||||
<div className="rounded-large border-divider shadow-small dark:bg-background/85 relative z-10 flex w-full max-w-sm flex-col gap-4 border bg-white/90 px-8 py-10 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} />
|
||||
@@ -350,7 +352,7 @@ export const AuthForm = ({
|
||||
<>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Divider className="flex-1" />
|
||||
<p className="shrink-0 text-tiny text-default-500">OR</p>
|
||||
<p className="text-tiny text-default-500 shrink-0">OR</p>
|
||||
<Divider className="flex-1" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -387,7 +389,7 @@ export const AuthForm = ({
|
||||
<>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Divider className="flex-1" />
|
||||
<p className="shrink-0 text-tiny text-default-500">OR</p>
|
||||
<p className="text-tiny text-default-500 shrink-0">OR</p>
|
||||
<Divider className="flex-1" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
@@ -401,14 +403,14 @@ export const AuthForm = ({
|
||||
</>
|
||||
)}
|
||||
{type === "sign-in" ? (
|
||||
<p className="text-center text-small">
|
||||
<p className="text-small text-center">
|
||||
Need to create an account?
|
||||
<CustomLink size="base" href="/sign-up" target="_self">
|
||||
Sign up
|
||||
</CustomLink>
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-center text-small">
|
||||
<p className="text-small text-center">
|
||||
Already have an account?
|
||||
<CustomLink size="base" href="/sign-in" target="_self">
|
||||
Log in
|
||||
|
||||
@@ -69,25 +69,28 @@ export const PasswordRequirementsMessage = ({
|
||||
{allRequirementsMet ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle
|
||||
className="h-4 w-4 flex-shrink-0 text-system-success"
|
||||
className="text-system-success h-4 w-4 shrink-0"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="text-xs font-medium leading-tight text-system-success">
|
||||
<p className="text-system-success text-xs leading-tight font-medium">
|
||||
Password meets all requirements
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle
|
||||
className="h-4 w-4 flex-shrink-0 text-red-600"
|
||||
className="h-4 w-4 shrink-0 text-red-600"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="text-xs font-medium leading-tight text-red-700">
|
||||
<p className="text-xs leading-tight font-medium text-red-700">
|
||||
Password must include:
|
||||
</p>
|
||||
</div>
|
||||
<ul className="ml-6 space-y-0.5" aria-label="Password requirements">
|
||||
<ul
|
||||
className="ml-6 flex flex-col gap-0.5"
|
||||
aria-label="Password requirements"
|
||||
>
|
||||
{results.map((req) => (
|
||||
<li
|
||||
key={req.key}
|
||||
@@ -95,7 +98,7 @@ export const PasswordRequirementsMessage = ({
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={`h-2 w-2 flex-shrink-0 rounded-full ${
|
||||
className={`h-2 w-2 shrink-0 rounded-full ${
|
||||
req.isMet ? "bg-system-success" : "bg-red-400"
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Button } from "@heroui/button";
|
||||
import { Tooltip } from "@heroui/tooltip";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Button, Tooltip } from "@nextui-org/react";
|
||||
|
||||
import { CustomLink } from "@/components/ui/custom/custom-link";
|
||||
|
||||
@@ -24,7 +25,7 @@ export const SocialButtons = ({
|
||||
</CustomLink>
|
||||
</div>
|
||||
}
|
||||
placement="right-start"
|
||||
placement="top"
|
||||
shadow="sm"
|
||||
isDisabled={isGoogleOAuthEnabled}
|
||||
className="w-96"
|
||||
@@ -51,7 +52,7 @@ export const SocialButtons = ({
|
||||
</CustomLink>
|
||||
</div>
|
||||
}
|
||||
placement="right-start"
|
||||
placement="top"
|
||||
shadow="sm"
|
||||
isDisabled={isGithubOAuthEnabled}
|
||||
className="w-96"
|
||||
|
||||
Reference in New Issue
Block a user