backend/src/modules/verify-module/controller/verify.controller.ts

@@ -6,6 +6,7 @@ import {
   HttpStatus,
   Query,
   UseGuards,
+  Post,
 } from '@nestjs/common';
 import { ApiCreatedResponse, ApiTags } from '@nestjs/swagger';
 import { Request } from 'express';
@@ -22,11 +23,11 @@ export class VerifyController {
   ) {}
 
   @ApiCreatedResponse({
-    description: 'Email verified successfully',
+    description: 'Verify email',
     type: Boolean,
   })
   @Public()
-  @Get()
+  @Post()
   @HttpCode(HttpStatus.OK)
   public async verifyEmail(
     @Query('token') tokenToVerify: string

frontend/src/app/pages/event-root/event-empty-state/event-empty-state.component.html

@@ -22,3 +22,28 @@
     </div>
   </div>
 </div>
+
+<dialog #emailVerificationModal class="modal">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Email Verification Required</h3>
+    <p class="py-4">
+      To ensure the security and integrity of our platform, we require email
+      verification before you can create an event. Verifying your email helps
+      us:
+    </p>
+    <ul class="list-disc list-inside mb-4">
+      <li>Protect your account and event information</li>
+      <li>Ensure reliable communication with attendees</li>
+      <li>Maintain the trust and quality of our event community</li>
+    </ul>
+    <p class="mb-4">
+      Would you like to verify your email now to unlock full access to our event
+      creation tools?
+    </p>
+    <div class="modal-action">
+      <button class="btn btn-primary" (click)="closeEmailVerificationModal()">
+        I'll Do This Later
+      </button>
+    </div>
+  </div>
+</dialog>

frontend/src/app/pages/event-root/event-empty-state/event-empty-state.component.ts

@@ -1,6 +1,13 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
 import { Router } from '@angular/router';
 
+import { VerifyApiService } from '../../../api';
+
 @Component({
   selector: 'app-event-empty-state',
   standalone: true,
@@ -9,9 +16,33 @@ import { Router } from '@angular/router';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EventEmptyStateComponent {
-  public constructor(private readonly router: Router) {}
+  @ViewChild('emailVerificationModal')
+  public emailVerificationModal!: ElementRef;
+
+  public constructor(
+    private readonly router: Router,
+    private readonly verifyApi: VerifyApiService
+  ) {}
 
   public navigateToCreateEvent(): void {
+    this.verifyApi
+      .verifyControllerIsEmailVerified()
+      .subscribe((isVerified: boolean) => {
+        if (!isVerified) {
+          this.openEmailVerificationModal();
+        } else {
           this.router.navigate(['/event/create']);
         }
+      });
+  }
+
+  public closeEmailVerificationModal(): void {
+    (this.emailVerificationModal.nativeElement as HTMLDialogElement).close();
+  }
+
+  private openEmailVerificationModal(): void {
+    (
+      this.emailVerificationModal.nativeElement as HTMLDialogElement
+    ).showModal();
+  }
 }