mirror of
https://codeberg.org/MarkusThielker/next-ory.git
synced 2025-04-19 09:01:18 +00:00
Update LoginPage to use Suspense for consistent error handling.
Read: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
This commit is contained in:
dotX12
parent
015f04b76a
commit
55900bb460
1 changed files with 80 additions and 76 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useCallback, useEffect, useState } from 'react';
|
import React, {Suspense, useCallback, useEffect, useState} from 'react';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Flow, HandleError, kratos, LogoutLink } from '@/ory';
|
import { Flow, HandleError, kratos, LogoutLink } from '@/ory';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
@ -11,8 +11,15 @@ import Image from 'next/image';
|
||||||
import { Skeleton } from '@/components/ui/skeleton';
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
import { AxiosError } from 'axios';
|
import { AxiosError } from 'axios';
|
||||||
|
|
||||||
export default function Login() {
|
export default function LoginPage() {
|
||||||
|
return (
|
||||||
|
<Suspense>
|
||||||
|
<Login />
|
||||||
|
</Suspense>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Login() {
|
||||||
const [flow, setFlow] = useState<LoginFlow>();
|
const [flow, setFlow] = useState<LoginFlow>();
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -65,19 +72,27 @@ export default function Login() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
const fetchFlow = async () => {
|
||||||
|
if (flow) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (flow) {
|
try {
|
||||||
return;
|
if (flowId) {
|
||||||
}
|
await getFlow(flowId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (flowId) {
|
createFlow(aal, refresh, returnTo, loginChallenge);
|
||||||
getFlow(flowId).then();
|
} catch (err) {
|
||||||
return;
|
console.error("Error in registration flow:", err);
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
createFlow(aal, refresh, returnTo, loginChallenge);
|
fetchFlow().catch((err) =>
|
||||||
|
console.error("Unhandled error in fetchFlow:", err)
|
||||||
}, [flowId, router, aal, refresh, returnTo, createFlow, loginChallenge, getFlow]);
|
);
|
||||||
|
}, [flowId, router, aal, refresh, returnTo, createFlow, loginChallenge, getFlow, flow]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="flex flex-col items-center w-full max-w-sm p-4">
|
<Card className="flex flex-col items-center w-full max-w-sm p-4">
|
||||||
|
|
@ -88,23 +103,20 @@ export default function Login() {
|
||||||
alt="Markus Thielker Intranet"/>
|
alt="Markus Thielker Intranet"/>
|
||||||
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
<CardHeader className="flex flex-col items-center text-center space-y-4">
|
||||||
{
|
{
|
||||||
flow ?
|
flow ? (
|
||||||
<div className="flex flex-col space-y-4">
|
<div className="flex flex-col space-y-4">
|
||||||
<CardTitle>{
|
<CardTitle>
|
||||||
(() => {
|
{flow.refresh
|
||||||
if (flow?.refresh) {
|
? 'Confirm Action'
|
||||||
return 'Confirm Action';
|
: flow.requested_aal === 'aal2'
|
||||||
} else if (flow?.requested_aal === 'aal2') {
|
? 'Two-Factor Authentication'
|
||||||
return 'Two-Factor Authentication';
|
: 'Welcome'}
|
||||||
}
|
|
||||||
return 'Welcome';
|
|
||||||
})()}
|
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription className="max-w-xs">
|
<CardDescription className="max-w-xs">
|
||||||
Log in to the Intranet to access all locally hosted applications.
|
Log in to the Intranet to access all locally hosted applications.
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</div>
|
</div>
|
||||||
:
|
) : (
|
||||||
<div className="flex flex-col space-y-6">
|
<div className="flex flex-col space-y-6">
|
||||||
<Skeleton className="h-6 w-full rounded-md"/>
|
<Skeleton className="h-6 w-full rounded-md"/>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col space-y-2">
|
||||||
|
|
@ -112,64 +124,56 @@ export default function Login() {
|
||||||
<Skeleton className="h-3 w-[250px] rounded-md"/>
|
<Skeleton className="h-3 w-[250px] rounded-md"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="w-full">
|
<CardContent className="w-full">
|
||||||
{
|
{flow ? (
|
||||||
flow
|
<Flow flow={flow} onSubmit={updateFlow}/>
|
||||||
? <Flow flow={flow} onSubmit={updateFlow}/>
|
|
||||||
: (
|
|
||||||
<div className="flex flex-col space-y-4 mt-4">
|
|
||||||
<div className="flex flex-col space-y-2">
|
|
||||||
<Skeleton className="h-3 w-[80px] rounded-md"/>
|
|
||||||
<Skeleton className="h-8 w-full rounded-md"/>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col space-y-2">
|
|
||||||
<Skeleton className="h-3 w-[80px] rounded-md"/>
|
|
||||||
<Skeleton className="h-8 w-full rounded-md"/>
|
|
||||||
</div>
|
|
||||||
<Button disabled>
|
|
||||||
<Skeleton className="h-4 w-[80px] rounded-md"/>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</CardContent>
|
|
||||||
{
|
|
||||||
flow?.requested_aal === 'aal2' || flow?.requested_aal === 'aal3' || flow?.refresh ? (
|
|
||||||
<Button onClick={onLogout} variant="link">
|
|
||||||
Log out
|
|
||||||
</Button>
|
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col space-y-4 mt-4">
|
||||||
{
|
<div className="flex flex-col space-y-2">
|
||||||
flow ?
|
<Skeleton className="h-3 w-[80px] rounded-md"/>
|
||||||
<Button variant="link" asChild><Link
|
<Skeleton className="h-8 w-full rounded-md"/>
|
||||||
href={{ pathname: '/flow/recovery', query: { return_to: flow.return_to } }}
|
</div>
|
||||||
className="text-orange-600"
|
<div className="flex flex-col space-y-2">
|
||||||
passHref>
|
<Skeleton className="h-3 w-[80px] rounded-md"/>
|
||||||
Forgot your password?
|
<Skeleton className="h-8 w-full rounded-md"/>
|
||||||
</Link>
|
</div>
|
||||||
</Button>
|
<Button disabled>
|
||||||
:
|
<Skeleton className="h-4 w-[80px] rounded-md"/>
|
||||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
</Button>
|
||||||
}
|
|
||||||
{
|
|
||||||
flow ?
|
|
||||||
<Button variant="link" asChild disabled={!flow}>
|
|
||||||
<Link
|
|
||||||
href={{ pathname: '/flow/registration', query: { return_to: flow.return_to } }}
|
|
||||||
className="inline-flex space-x-2"
|
|
||||||
passHref>
|
|
||||||
Create an account
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
:
|
|
||||||
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)}
|
||||||
}
|
</CardContent>
|
||||||
|
{flow?.requested_aal === 'aal2' || flow?.requested_aal === 'aal3' || flow?.refresh ? (
|
||||||
|
<Button onClick={onLogout} variant="link">
|
||||||
|
Log out
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{flow ? (
|
||||||
|
<Button variant="link" asChild>
|
||||||
|
<Link href={{ pathname: '/flow/recovery', query: { return_to: flow.return_to } }}
|
||||||
|
className="text-orange-600" passHref>
|
||||||
|
Forgot your password?
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||||
|
)}
|
||||||
|
{flow ? (
|
||||||
|
<Button variant="link" asChild disabled={!flow}>
|
||||||
|
<Link href={{ pathname: '/flow/registration', query: { return_to: flow.return_to } }}
|
||||||
|
className="inline-flex space-x-2" passHref>
|
||||||
|
Create an account
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="h-3 w-[180px] rounded-md my-3.5"/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue