---

2026-06-24 14:20:05 +02:00
commit 1c859d20c8
442 changed files with 25625 additions and 0 deletions
@@ -0,0 +1,69 @@
+'use client'
+import { InputField, Wrapper } from '@/components'
+import { LoginDocument, MeDocument, PostsDocument } from '@/generated/graphql/graphql'
+import { errorMapper } from '@/utils'
+import { useMutation, useQuery } from '@apollo/client/react'
+import { Link } from '@chakra-ui/next-js'
+import { Box, Button } from '@chakra-ui/react'
+import { Form, Formik } from 'formik'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Suspense } from 'react'
+
+
+const Page: React.FC = () => {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { refetch } = useQuery(MeDocument)
+  const { refetch: refetchPosts } = useQuery(PostsDocument)
+  const [login] = useMutation(LoginDocument)
+
+  return (
+    <Wrapper variant='small'>
+      <Formik
+        initialValues={{ username: '', password: '' }}
+        onSubmit={async (values, { setErrors }) => {
+          const response = await login({ variables: { input: values } })
+          const errors = response.data?.login.errors
+          if (errors) {
+            setErrors(errorMapper(errors))
+          }
+          else if (response.data?.login.user) {
+            // Successful login
+            await refetch()   // Refetch client-side
+            await refetchPosts()
+            const destination = searchParams.get('redirect')
+            if (destination) {
+              router.push(destination)
+            }
+            else {
+              router.push('/')
+            }
+          }
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            <InputField name='username' label='Username' placeholder='username' />
+            <Box mt={4}>
+              <InputField name='password' label='Password' placeholder='password' type='password' />
+            </Box>
+            <Box mt={4}>
+              <Link href='/forgot-password'>Forgot password?</Link>
+            </Box>
+            <Button type='submit' colorScheme='teal' mt={4} isLoading={isSubmitting}>Login</Button>
+          </Form>
+        )}
+      </Formik>
+    </Wrapper>
+  )
+}
+
+const LoginPage = () => {
+  return (
+    <Suspense>
+      <Page />
+    </Suspense>
+  )
+}
+
+export default LoginPage