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 Badge,
16} from '@mantine/core';
17import { Suspense, useEffect } from 'react';
18import { IoMdHelpCircleOutline } from 'react-icons/io';
19import SembleLogo from '@/assets/semble-logo.svg';
20import { useAuth } from '@/hooks/useAuth';
21import { useRouter, useSearchParams } from 'next/navigation';
22import Link from 'next/link';
23
24function InnerPage() {
25 const { isAuthenticated, isLoading, refreshAuth } = useAuth();
26 const router = useRouter();
27 const searchParams = useSearchParams();
28 const isExtensionLogin = searchParams.get('extension-login') === 'true';
29
30 useEffect(() => {
31 if (isAuthenticated && !isExtensionLogin) {
32 refreshAuth();
33 router.push('/home');
34 }
35 }, [isAuthenticated, router, isExtensionLogin, refreshAuth]);
36
37 if (isAuthenticated) {
38 return (
39 <Stack align="center">
40 <Loader type="dots" />
41 </Stack>
42 );
43 }
44
45 return (
46 <Stack gap={'xl'} align="center">
47 <Stack gap="xl" maw={300}>
48 <Stack gap={'xs'}>
49 <Stack align="center" gap={'xs'}>
50 <Image
51 src={SembleLogo.src}
52 alt="Semble logo"
53 w={48}
54 h={64.5}
55 mx={'auto'}
56 />
57 <Badge size="sm">Alpha</Badge>
58 </Stack>
59 <Title order={1} ta="center">
60 Welcome back
61 </Title>
62 </Stack>
63 <LoginForm />
64 <Stack align="center" gap={0}>
65 <Text fw={500} c={'stone'}>
66 {"Don't have an account? "}
67 <Anchor href="/signup" fw={500}>
68 Sign up
69 </Anchor>
70 </Text>
71 <Popover withArrow shadow="sm">
72 <PopoverTarget>
73 <Button
74 variant="white"
75 size="md"
76 fw={500}
77 fs={'italic'}
78 c={'stone'}
79 rightSection={<IoMdHelpCircleOutline size={22} />}
80 >
81 How your Cosmik Network account works
82 </Button>
83 </PopoverTarget>
84 <PopoverDropdown>
85 <Text fw={500} ta="center" maw={380}>
86 When you sign up today, you’ll create a Bluesky account. In near
87 future, your account will be seamlessly migrated to our{' '}
88 <Anchor
89 href="https://cosmik.network"
90 target="_blank"
91 fw={500}
92 c={'blue'}
93 >
94 Cosmik Network
95 </Anchor>
96 .
97 </Text>
98 </PopoverDropdown>
99 </Popover>
100 </Stack>
101 </Stack>
102 <Text fw={500} ta={'center'} c={'dark.1'}>
103 By continuing, you agree to our{' '}
104 <Anchor component={Link} href={'/privacy-policy'} c="dark.2" fw={600}>
105 Privacy Policy
106 </Anchor>
107 </Text>
108 </Stack>
109 );
110}
111
112export default function Page() {
113 return (
114 <Suspense>
115 <InnerPage />
116 </Suspense>
117 );
118}