nandi.uk
This repository has no description
1'use client';
2
3import LoginForm from '@/features/auth/components/loginForm/LoginForm';
4import {
5 Stack,
6 Title,
7 Text,
8 Image,
9 Anchor,
10 Popover,
11 Button,
12 PopoverTarget,
13 PopoverDropdown,
14 Loader,
15} from '@mantine/core';
16import { Suspense, useEffect, useState } from 'react';
17import { IoMdHelpCircleOutline } from 'react-icons/io';
18import SembleLogo from '@/assets/semble-logo.svg';
19import { useAuth } from '@/hooks/useAuth';
20import { useRouter, useSearchParams } from 'next/navigation';
21import Link from 'next/link';
22
23function InnerPage() {
24 const { isAuthenticated, isLoading } = useAuth();
25 const [isRedirecting, setIsRedirecting] = useState(false);
26 const router = useRouter();
27 const searchParams = useSearchParams();
28 const isExtensionLogin = searchParams.get('extension-login') === 'true';
29
30 useEffect(() => {
31 let timeoutId: NodeJS.Timeout;
32
33 if (isAuthenticated && !isExtensionLogin) {
34 setIsRedirecting(true);
35
36 // redirect after 1 second
37 timeoutId = setTimeout(() => {
38 router.push('/home');
39 }, 1000);
40 }
41
42 // clean up
43 return () => {
44 if (timeoutId) {
45 clearTimeout(timeoutId);
46 }
47 };
48 }, [isAuthenticated, router, isExtensionLogin]);
49
50 if (isLoading) {
51 return (
52 <Stack align="center">
53 <Loader type="dots" />
54 </Stack>
55 );
56 }
57
58 if (isRedirecting) {
59 return (
60 <Stack align="center">
61 <Text fw={500} fz={'xl'}>
62 Already logged in, redirecting you to library
63 </Text>
64 <Loader type="dots" />
65 </Stack>
66 );
67 }
68
69 return (
70 <Stack gap={'xl'} align="center">
71 <Stack gap="xl" maw={300}>
72 <Stack gap={'xs'}>
73 <Image
74 src={SembleLogo.src}
75 alt="Semble logo"
76 w={48}
77 h={64.5}
78 mx={'auto'}
79 />
80 <Title order={1} ta="center">
81 Welcome back
82 </Title>
83 </Stack>
84 <LoginForm />
85 <Stack align="center" gap={0}>
86 <Text fw={500} c={'stone'}>
87 {"Don't have an account? "}
88 <Anchor href="/signup" fw={500}>
89 Sign up
90 </Anchor>
91 </Text>
92 <Popover withArrow shadow="sm">
93 <PopoverTarget>
94 <Button
95 variant="white"
96 size="md"
97 fw={500}
98 fs={'italic'}
99 c={'stone'}
100 rightSection={<IoMdHelpCircleOutline size={22} />}
101 >
102 How your Cosmik Network account works
103 </Button>
104 </PopoverTarget>
105 <PopoverDropdown>
106 <Text fw={500} ta="center" maw={380}>
107 When you sign up today, you’ll create a Bluesky account. In near
108 future, your account will be seamlessly migrated to our{' '}
109 <Anchor
110 href="https://cosmik.network"
111 target="_blank"
112 fw={500}
113 c={'blue'}
114 >
115 Cosmik Network
116 </Anchor>
117 .
118 </Text>
119 </PopoverDropdown>
120 </Popover>
121 </Stack>
122 </Stack>
123 <Text fw={500} ta={'center'} c={'dark.1'}>
124 By continuing, you agree to our{' '}
125 <Anchor component={Link} href={'/privacy-policy'} c="dark.2" fw={600}>
126 Privacy Policy
127 </Anchor>
128 </Text>
129 </Stack>
130 );
131}
132
133export default function Page() {
134 return (
135 <Suspense>
136 <InnerPage />
137 </Suspense>
138 );
139}