[frontend]: add verification page

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<Metadata> {
+  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 (
+    <VerifyAccountForm token={token} />
+  );
+};
+
+export default VerifyAccountPage;

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 (
+    <AuthWrapper heading={t('heading')}>
+      <div className='flex justify-center'>
+        <Loader className='size-8 animate-spin' />
+      </div>
+    </AuthWrapper>
+  )
+}

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<C
 export type CreateUserMutationHookResult = ReturnType<typeof useCreateUserMutation>;
 export type CreateUserMutationResult = Apollo.MutationResult<CreateUserMutation>;
 export type CreateUserMutationOptions = Apollo.BaseMutationOptions<CreateUserMutation, CreateUserMutationVariables>;
+export const VerifyAccountDocument = gql`
+    mutation VerifyAccount($data: VerificationInput!) {
+  verifyAccount(data: $data) {
+    user {
+      isEmailVerified
+    }
+    message
+  }
+}
+    `;
+export type VerifyAccountMutationFn = Apollo.MutationFunction<VerifyAccountMutation, VerifyAccountMutationVariables>;
+
+/**
+ * __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<VerifyAccountMutation, VerifyAccountMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<VerifyAccountMutation, VerifyAccountMutationVariables>(VerifyAccountDocument, options);
+      }
+export type VerifyAccountMutationHookResult = ReturnType<typeof useVerifyAccountMutation>;
+export type VerifyAccountMutationResult = Apollo.MutationResult<VerifyAccountMutation>;
+export type VerifyAccountMutationOptions = Apollo.BaseMutationOptions<VerifyAccountMutation, VerifyAccountMutationVariables>;
 export const FindChannelByUsernameDocument = gql`
     query FindChannelByUsername($name: String!) {
   findChannelByUsername(name: $name) {

frontend/src/graphql/metations/auth/VerifyAccount.graphql

@@ -0,0 +1,8 @@
+mutation VerifyAccount($data: VerificationInput!) {
+    verifyAccount(data: $data) {
+        user {
+            isEmailVerified
+        }
+        message
+    }
+}