feat: sign-up and sign-in pages are styled and ready to be merged

This commit is contained in:
Pablo Lara
2024-10-08 08:46:35 +02:00
parent 6b7fe81cf8
commit 7572136cc8
6 changed files with 35 additions and 56 deletions
+1 -1
View File
@@ -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" />
+1 -1
View File
@@ -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 />
+6 -6
View File
@@ -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 (
+8 -22
View File
@@ -112,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"}
@@ -287,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 Cloud Security Platform </span>
</p>
</div>
</div>
</div>
);
};
-5
View File
@@ -1,9 +1,4 @@
export const filtersProviders = [
{
key: "provider__in",
labelCheckboxGroup: "Select a Provider",
values: ["aws", "gcp", "azure", "kubernetes"],
},
{
key: "connected",
labelCheckboxGroup: "Connection",
+19 -21
View File
@@ -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: {