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

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
+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>
);
}
+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>
);
}
+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>