import React , { useState } from "react" ; import { NextPage } from "next" ; import { Wrapper } from "../../components/Wrapper" ; import { Formik , Form } from "formik" ; import { toErrorMap } from "../../utils/toErrorMap" ; import { InputField } from "../../components/InputField" ; import { Box , Button , Link , Flex } from "@chakra-ui/core" ; import { useChangePasswordMutation , MeDocument , MeQuery , } from "../../generated/graphql" ; import { useRouter } from "next/router" ; import { withUrqlClient } from "next-urql" ; import { createUrqlClient } from "../../utils/createUrqlClient" ; import NextLink from "next/link" ; import { withApollo } from "../../utils/withApollo" ; const ChangePassword = ( ) => { const router = useRouter ( ) ; const [ changePassword ] = useChangePasswordMutation ( ) ; const [ tokenError , setTokenError ] = useState ( "" ) ; return ( < Wrapper variant = "small" > < Formik initialValues = { { newPassword : "" } } onSubmit = { async ( values , { setErrors } ) => { const response = await changePassword ( { variables : { newPassword : values . newPassword , token : typeof router . query . token === "string" ? router . query . token : "" , } , update : ( cache , { data } ) => { cache . writeQuery < MeQuery > ( { query : MeDocument , data : { __typename : "Query" , me : data ?. changePassword . user , } , } ) ; } , } ) ; if ( response . data ?. changePassword . errors ) { const errorMap = toErrorMap ( response . data . changePassword . errors ) ; if ( "token" in errorMap ) { setTokenError ( errorMap . token ) ; } setErrors ( errorMap ) ; } else if ( response . data ?. changePassword . user ) { router . push ( "/" ) ; } } } > { ( { isSubmitting } ) => ( < Form > < InputField name = "newPassword" placeholder = "new password" label = "New Password" type = "password" / > { tokenError ? ( < Flex > < Box mr = { 2 } style = { { color : "red" } } > { tokenError } < /Box> < NextLink href = "/forgot-password" > < Link > click here to get a new one < /Link> < /NextLink> < /Flex>) : null} < Button mt = { 4 } type = "submit" isLoading = { isSubmitting } variantColor = "teal" > change password < /Button> < /Form>)} < /Formik> < /Wrapper>); } ; export default withApollo ( { ssr : false } ) ( ChangePassword ) ;