diff --git a/frontend/src/app/account/verify/page.tsx b/frontend/src/app/account/verify/page.tsx new file mode 100644 index 0000000..54ab81e --- /dev/null +++ b/frontend/src/app/account/verify/page.tsx @@ -0,0 +1,32 @@ +import { VerifyAccountForm } from '@/components/features/auth/forms/VerifyAccoiuntForm'; +import { Metadata } from 'next'; +import { getTranslations } from 'next-intl/server'; +import { redirect } from 'next/navigation'; +import React from 'react'; + + +export async function generateMetadata(): Promise { + const t = await getTranslations('auth.verify'); + + return { + title: t('heading') + } +} + +type VerifyAccountPageProps = { + searchParams: Promise<{token: string}> +} + +const VerifyAccountPage = async (props: VerifyAccountPageProps) => { + const {token} = await props.searchParams; + + if (!token) { + return redirect('/account/create') + } + + return ( + + ); +}; + +export default VerifyAccountPage; diff --git a/frontend/src/components/features/auth/forms/VerifyAccoiuntForm.tsx b/frontend/src/components/features/auth/forms/VerifyAccoiuntForm.tsx new file mode 100644 index 0000000..737b06d --- /dev/null +++ b/frontend/src/components/features/auth/forms/VerifyAccoiuntForm.tsx @@ -0,0 +1,46 @@ +'use client' + +import { Loader } from 'lucide-react' +import { useTranslations } from 'next-intl' +import { useRouter } from 'next/navigation' +import { useEffect } from 'react' +import { toast } from 'sonner' + +import { useVerifyAccountMutation } from '@/graphql/generated/output' + +import AuthWrapper from '../AuthWrapper' +type VerifyAccountFormProps = { + token: string +} +export function VerifyAccountForm(props: VerifyAccountFormProps) { + const { token } = props; + const t = useTranslations('auth.verify') + + const router = useRouter() + + const [verify] = useVerifyAccountMutation({ + onCompleted() { + toast.success(t('successMessage')) + router.push('/dashboard/settings') + }, + onError() { + toast.error(t('errorMessage')) + } + }) + + useEffect(() => { + void verify({ + variables: { + data: { token } + } + }) + }, [token, verify]) + + return ( + +
+ +
+
+ ) +} diff --git a/frontend/src/graphql/generated/output.ts b/frontend/src/graphql/generated/output.ts index aea0ef1..b552f72 100644 --- a/frontend/src/graphql/generated/output.ts +++ b/frontend/src/graphql/generated/output.ts @@ -598,6 +598,13 @@ export type CreateUserMutationVariables = Exact<{ export type CreateUserMutation = { __typename?: 'Mutation', createUser: { __typename?: 'UserModel', name: string, password: string, email: string } }; +export type VerifyAccountMutationVariables = Exact<{ + data: VerificationInput; +}>; + + +export type VerifyAccountMutation = { __typename?: 'Mutation', verifyAccount: { __typename?: 'AuthModel', message?: string | null, user?: { __typename?: 'UserModel', isEmailVerified: boolean } | null } }; + export type FindChannelByUsernameQueryVariables = Exact<{ name: Scalars['String']['input']; }>; @@ -641,6 +648,42 @@ export function useCreateUserMutation(baseOptions?: Apollo.MutationHookOptions; export type CreateUserMutationResult = Apollo.MutationResult; export type CreateUserMutationOptions = Apollo.BaseMutationOptions; +export const VerifyAccountDocument = gql` + mutation VerifyAccount($data: VerificationInput!) { + verifyAccount(data: $data) { + user { + isEmailVerified + } + message + } +} + `; +export type VerifyAccountMutationFn = Apollo.MutationFunction; + +/** + * __useVerifyAccountMutation__ + * + * To run a mutation, you first call `useVerifyAccountMutation` within a React component and pass it any options that fit your needs. + * When your component renders, `useVerifyAccountMutation` returns a tuple that includes: + * - A mutate function that you can call at any time to execute the mutation + * - An object with fields that represent the current status of the mutation's execution + * + * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2; + * + * @example + * const [verifyAccountMutation, { data, loading, error }] = useVerifyAccountMutation({ + * variables: { + * data: // value for 'data' + * }, + * }); + */ +export function useVerifyAccountMutation(baseOptions?: Apollo.MutationHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useMutation(VerifyAccountDocument, options); + } +export type VerifyAccountMutationHookResult = ReturnType; +export type VerifyAccountMutationResult = Apollo.MutationResult; +export type VerifyAccountMutationOptions = Apollo.BaseMutationOptions; export const FindChannelByUsernameDocument = gql` query FindChannelByUsername($name: String!) { findChannelByUsername(name: $name) { diff --git a/frontend/src/graphql/metations/auth/VerifyAccount.graphql b/frontend/src/graphql/metations/auth/VerifyAccount.graphql new file mode 100644 index 0000000..6f99646 --- /dev/null +++ b/frontend/src/graphql/metations/auth/VerifyAccount.graphql @@ -0,0 +1,8 @@ +mutation VerifyAccount($data: VerificationInput!) { + verifyAccount(data: $data) { + user { + isEmailVerified + } + message + } +}