dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

index.tsx (2175B)

      1 import { SubmitButton } from '@/components/elements/Button'
      2 import Title from '@/components/elements/Title'
      3 import Field from '@/components/form/Field'
      4 import Fields from '@/components/form/Fields'
      5 import Form from '@/components/form/Form'
      6 import Container from '@/components/layout/Container'
      7 import Hero from '@/components/layout/Hero'
      8 import Section from '@/components/layout/Section'
      9 import { useForm } from '@/lib/hooks/use_form'
     10 import { useRouter } from 'next/router'
     11 import { useState } from 'react'
     12 
     13 interface SignUpFormFields {
     14   email: string
     15 }
     16 
     17 export default function SignUpPage () {
     18   return (
     19     <>
     20       <Hero>
     21         <Title kind="headline">Sign up</Title>
     22       </Hero>
     23 
     24       <Container>
     25         <Section>
     26           <SignUpForm/>
     27         </Section>
     28       </Container>
     29     </>
     30   )
     31 }
     32 
     33 function SignUpForm () {
     34   const router = useRouter()
     35   const [fields, updateFields, submit, isLoading] = useForm<SignUpFormFields>(
     36     { method: 'POST', url: '/api/users/signup' },
     37     { email: '' },
     38     () => {
     39       router.push('/users/signup/sent')
     40         .catch(console.error)
     41     },
     42     (status) => {
     43       switch (status) {
     44         case 401:
     45           setErrorMessage('이메일 혹은 비밀번호가 잘못되었습니다.')
     46           break
     47 
     48         default:
     49           setErrorMessage('알 수 없는 오류가 발생했습니다.')
     50           break
     51       }
     52     },
     53   )
     54   const [errorMessage, setErrorMessage] = useState<string | null>(null)
     55 
     56   return (
     57     <Form onSubmit={submit}>
     58       <Fields>
     59         <Field
     60           type="text"
     61           disabled={isLoading}
     62           placeholder="Email"
     63           color={errorMessage == null ? undefined : 'error'}
     64           value={fields.email}
     65           message={errorMessage ?? undefined}
     66           onValueChange={updateFields.bind(null, 'email')}
     67         />
     68       </Fields>
     69 
     70       <p>입력해주신 주소로 인증 메일을 보내드립니다.
     71         메일에 포함된 링크를 통해, 가입을 진행할 수 있습니다.</p>
     72       <p>메일 주소는 공개되지 않습니다.</p>
     73 
     74       <SubmitButton
     75         color="primary"
     76         disabled={isLoading}
     77         value="Sign up"
     78       />
     79     </Form>
     80   )
     81 }