External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adding AuthCard for mobile first design and refactoring the Logo loading in the layout.

Browse Source
This commit is contained in:
charlesgauthereau
2025-12-22 12:50:40 +01:00
parent 57d9b8da1e
commit 3b356e33e7
7 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(auth)/forgot-password/page.tsx
+9 -7
View File
@@ -1,23 +1,25 @@
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {CardContent, CardHeader} from "@/components/ui/card";
import { TooltipProvider } from "@/components/ui/tooltip";
import { ForgotPasswordForm } from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
import {TooltipProvider} from "@/components/ui/tooltip";
import {ForgotPasswordForm} from "@/components/wrappers/auth/login/forgot-password-form/forgot-password-form";
import {CardAuth} from "@/features/layout/card-auth";
export default async function RoutePage(props: { searchParams: Promise<{ callbackUrl: string | undefined }> }) {
return (
<TooltipProvider>
<Card className="w-full">
<CardAuth className="w-full">
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Reset password</h1>
<p className="text-balance text-muted-foreground">Enter your email address and we'll send you a link to reset your password.</p>
<p className="text-balance text-muted-foreground">Enter your email address and we'll send you a
link to reset your password.</p>
</div>
</CardHeader>
<CardContent>
<ForgotPasswordForm />
<ForgotPasswordForm/>
</CardContent>
</Card>
</CardAuth>
</TooltipProvider>
);
}
app/(auth)/guard/page.tsx
+11 -10
View File
@@ -1,8 +1,9 @@
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { TooltipProvider } from "@/components/ui/tooltip";
import { GuardForm } from "@/components/wrappers/auth/guard/guard-form";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import {CardContent, CardHeader} from "@/components/ui/card";
import {TooltipProvider} from "@/components/ui/tooltip";
import {GuardForm} from "@/components/wrappers/auth/guard/guard-form";
import {cookies} from "next/headers";
import {redirect} from "next/navigation";
import {CardAuth} from "@/features/layout/card-auth";
export default async function GuardPage() {
@@ -13,20 +14,20 @@ export default async function GuardPage() {
redirect("/login");
}
return (
<TooltipProvider>
<Card className="w-full max-w-md">
<CardAuth className="w-full max-w-md">
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Two-factor verification</h1>
<p className="text-balance text-muted-foreground">Please enter the verification code generated by your authentication app.</p>
<p className="text-balance text-muted-foreground">Please enter the verification code generated
by your authentication app.</p>
</div>
</CardHeader>
<CardContent>
<GuardForm />
<GuardForm/>
</CardContent>
</Card>
</CardAuth>
</TooltipProvider>
);
}
app/(auth)/login/page.tsx
+5 -4
View File
@@ -3,9 +3,10 @@ import {Metadata} from "next";
import {SUPPORTED_PROVIDERS} from "../../../portabase.config";
import {SocialAuthButtons} from "@/components/wrappers/auth/social-buttons";
import {TooltipProvider} from "@/components/ui/tooltip";
import {Card, CardContent, CardHeader} from "@/components/ui/card";
import {CardContent, CardHeader} from "@/components/ui/card";
import Link from "next/link";
import {Separator} from "@/components/ui/separator";
import {CardAuth} from "@/features/layout/card-auth";
export const metadata: Metadata = {
title: "Login",
@@ -15,7 +16,7 @@ export default async function SignInPage() {
return (
<TooltipProvider>
<Card className="w-full">
<CardAuth className="w-full">
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Login</h1>
@@ -30,7 +31,7 @@ export default async function SignInPage() {
<div className="relative my-4 flex items-center justify-center overflow-hidden">
<Separator/>
<div className="px-2 text-center bg-card text-sm">OR</div>
<div className="px-2 text-center text-sm">OR</div>
<Separator/>
</div>
@@ -45,7 +46,7 @@ export default async function SignInPage() {
</Link>
</div>
</CardContent>
</Card>
</CardAuth>
</TooltipProvider>
src/components/wrappers/auth/auth-logo-section.tsx
+24 -18
View File
@@ -1,11 +1,11 @@
"use client"
import {env} from "@/env.mjs";
import React, {useEffect, useState} from "react";
import {useTheme} from "next-themes";
"use client";
import {env} from "@/env.mjs";
import {useTheme} from "next-themes";
import Image from "next/image";
import {useEffect, useState} from "react";
export const AuthLogoSection = () => {
const {resolvedTheme} = useTheme();
const [mounted, setMounted] = useState(false);
@@ -13,19 +13,25 @@ export const AuthLogoSection = () => {
setMounted(true);
}, []);
if (!mounted) return null;
const imageTheme = resolvedTheme === "dark" ? "/images/logo-white.png" : "/images/logo-black.png";
const imageTheme =
resolvedTheme === "dark"
? "/images/logo-white.png"
: "/images/logo-black.png";
return (
<div className="sm:mx-auto sm:w-full sm:max-w-md flex items-center justify-center space-x-2">
<img
className="p-12 text-black dark:text-white"
src={imageTheme}
alt="Logo"
/>
<span className="text-sm text-muted-foreground -ml-12 -mb-12">v{env.NEXT_PUBLIC_PROJECT_VERSION}</span>
<div className="sm:mx-auto sm:w-full sm:max-w-md relative flex items-center justify-center h-[160px]">
{mounted && (
<Image
src={imageTheme}
alt="Logo"
fill
priority
className="object-contain p-10"
/>
)}
<span className="absolute bottom-12 right-2 text-sm text-muted-foreground">
v{env.NEXT_PUBLIC_PROJECT_VERSION}
</span>
</div>
)
}
);
};
src/components/wrappers/auth/register/register-form/register-form.tsx
+3 -2
View File
@@ -15,6 +15,7 @@ import {RegisterSchema, RegisterType} from "@/components/wrappers/auth/register/
import {PasswordInput} from "@/components/ui/password-input";
import {signUp} from "@/lib/auth/auth-client";
import Link from "next/link";
import {CardAuth} from "@/features/layout/card-auth";
export type registerFormProps = {
defaultValues?: RegisterType;
@@ -45,7 +46,7 @@ export const RegisterForm = (props: registerFormProps) => {
return (
<TooltipProvider>
<Card>
<CardAuth>
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Create an account</h1>
@@ -144,7 +145,7 @@ export const RegisterForm = (props: registerFormProps) => {
</Form>
</CardContent>
</Card>
</CardAuth>
</TooltipProvider>
);
};
src/components/wrappers/auth/reset-password/reset-password-form.tsx
+3 -2
View File
@@ -10,6 +10,7 @@ import {Card, CardContent, CardHeader} from "@/components/ui/card";
import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
import {authClient} from "@/lib/auth/auth-client";
import {toast} from "sonner";
import {CardAuth} from "@/features/layout/card-auth";
type ResetPasswordFormProps = {
token: string;
@@ -43,7 +44,7 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
});
return (
<Card>
<CardAuth>
<CardHeader>
<div className="grid gap-2 text-center mb-2">
<h1 className="text-3xl font-bold">Reset Password</h1>
@@ -89,6 +90,6 @@ export const ResetPasswordForm = ({token}: ResetPasswordFormProps) => {
</ButtonWithLoading>
</Form>
</CardContent>
</Card>
</CardAuth>
);
};
src/features/layout/card-auth.tsx
+17
View File
@@ -0,0 +1,17 @@
import {cn} from "@/lib/utils";
import * as React from "react";
export function CardAuth({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card"
className={cn(
"bg-transparent border-none py-3",
"md:bg-card text-card-foreground flex flex-col gap-6 rounded-xl md:border-solid md:border md:py-6 shadow-sm",
className
)}
{...props}
/>
)
}