components/login/InvalidTokenPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// app/[lng]/auth/reset-password/components/InvalidTokenPage.tsx

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { XCircle } from 'lucide-react';
import Link from 'next/link';

interface Props {
  expired: boolean;
  error?: string;
}

export default function InvalidTokenPage({ expired, error }: Props) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto flex items-center justify-center w-12 h-12 rounded-full bg-red-100 mb-4">
            <XCircle className="w-6 h-6 text-red-600" />
          </div>
          <CardTitle className="text-2xl">링크 오류</CardTitle>
          <CardDescription>
            {expired 
              ? '재설정 링크가 만료되었습니다. 새로운 재설정 요청을 해주세요.' 
              : error || '유효하지 않은 재설정 링크입니다.'}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Link href="/auth/forgot-password">
              <Button className="w-full">
                새로운 재설정 링크 요청
              </Button>
            </Link>
            <Link href="/auth/login">
              <Button variant="outline" className="w-full">
                로그인 페이지로 돌아가기
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}