added missing email verify page, corrected error

frontend/src/views/MailVerify.vue

@@ -1,23 +1,24 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
-import { Home, CheckCircle } from "lucide-vue-next";
 import axios from "axios";
 
 const router = useRouter();
+const route = useRoute();
 
 const loading = ref(true);
 const success = ref(false);
 const error = ref(false);
 const message = ref("Verifying your email...");
+const countdown = ref(5); // countdown in seconds
 
 const goHome = () => router.push("/");
 const goBack = () => router.back();
 
-onMounted(async () => {
+let countdownInterval = null;
-  const urlParams = new URLSearchParams(window.location.search);
-  const token = urlParams.get("token");
 
+onMounted(async () => {
+  const token = route.params.token;
   if (!token) {
     error.value = true;
     loading.value = false;
@@ -29,26 +30,30 @@ onMounted(async () => {
     const res = await axios.get(
       `https://api.turbotrades.dev/api/user/verify-email/${token}`
     );
-
     if (res.data.success) {
       success.value = true;
       message.value = "Email verified successfully! Redirecting to homepage...";
+      loading.value = false;
 
-      // Redirect after 5 seconds
+      // Start countdown
-      setTimeout(() => {
+      countdownInterval = setInterval(() => {
-        router.push("/");
+        countdown.value--;
-      }, 5000);
+        if (countdown.value <= 0) {
+          clearInterval(countdownInterval);
+          router.push("/");
+        }
+      }, 1000);
     } else {
       error.value = true;
+      loading.value = false;
       message.value = res.data.message || "Failed to verify email.";
     }
   } catch (err) {
     error.value = true;
+    loading.value = false;
     message.value =
       err.response?.data?.message ||
       "An error occurred while verifying your email.";
-  } finally {
-    loading.value = false;
   }
 });
 </script>
@@ -57,51 +62,40 @@ onMounted(async () => {
   <div class="verify-page min-h-screen flex items-center justify-center py-12">
     <div class="container-custom">
       <div class="max-w-2xl mx-auto text-center">
-        <!-- Icon -->
+        <!-- Big pulsing text -->
         <div class="relative mb-8">
-          <CheckCircle
-            v-if="success"
-            class="w-32 h-32 text-green-500 mx-auto animate-pulse-slow"
-          />
           <div
-            v-else-if="loading"
+            class="text-9xl font-display font-bold text-transparent bg-clip-text animate-pulse-slow"
-            class="w-32 h-32 rounded-full bg-primary-500/20 mx-auto animate-pulse"
+            :class="{
-          ></div>
+              'bg-gradient-to-r from-green-500 to-green-700': success,
-          <div
+              'bg-gradient-to-r from-red-500 to-red-700': error,
-            v-else-if="error"
+              'bg-gradient-to-r from-primary-500 to-primary-700': loading,
-            class="w-32 h-32 rounded-full bg-red-500/20 mx-auto animate-pulse"
+            }"
-          ></div>
+          >
+            {{ success ? "SUCCESS" : error ? "ERROR" : "VERIFY" }}
+          </div>
+          <div class="absolute inset-0 flex items-center justify-center">
+            <div
+              class="w-64 h-64 rounded-full blur-3xl animate-pulse"
+              :class="{
+                'bg-green-500/10': success,
+                'bg-red-500/10': error,
+                'bg-primary-500/10': loading,
+              }"
+            ></div>
+          </div>
         </div>
 
-        <!-- Main message -->
+        <!-- Message -->
-        <h1
+        <p class="text-lg text-gray-400 mb-2 max-w-md mx-auto">
-          :class="{
-            'text-5xl font-bold': true,
-            'text-green-500': success,
-            'text-red-500': error,
-            'text-white': loading,
-          }"
-          class="mb-4"
-        >
-          {{ success ? "Success" : error ? "Error" : "Verifying..." }}
-        </h1>
-
-        <p class="text-lg text-gray-400 mb-8 max-w-md mx-auto">
           {{ message }}
         </p>
 
-        <!-- Actions -->
+        <!-- Countdown -->
-        <div
+        <p v-if="success" class="text-gray-400 mb-8">
-          class="flex flex-col sm:flex-row items-center justify-center gap-4"
+          Redirecting in {{ countdown }} second{{ countdown > 1 ? "s" : "" }}...
-        >
+        </p>
-          <button @click="goHome" class="btn btn-primary btn-lg group">
+        <p v-else class="mb-8"></p>
-            <Home class="w-5 h-5" />
-            Go to Homepage
-          </button>
-          <button @click="goBack" class="btn btn-secondary btn-lg group">
-            Go Back
-          </button>
-        </div>
       </div>
     </div>
   </div>