style(all): update email templates for consistent button styling

Author: Lasim

services/backend/src/email/templates/admin-password-reset.pug

@@ -10,7 +10,7 @@ block content
   p An administrator has initiated a password reset for your account (#{userEmail}). If you were expecting this action, you can reset your password using the link below.
 
   .text-center
-    a.button(href=resetUrl style="display: inline-block; padding: 12px 24px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; margin: 20px 0;") Reset Your Password
+    a.button(href=resetUrl style="display: inline-block; padding: 12px 24px; background-color: #0f766e; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; margin: 20px 0;") Reset Your Password
 
   p 
     strong Important security information:
@@ -21,7 +21,7 @@ block content
     li If you did not expect this password reset, please contact your administrator immediately
 
   p If the button above doesn't work, you can copy and paste this link into your browser:
-  p.link-text(style="word-break: break-all; color: #007bff;") #{resetUrl}
+  p.link-text(style="word-break: break-all; color: #0f766e;") #{resetUrl}
 
   hr(style="margin: 30px 0; border: none; border-top: 1px solid #eee;")
 

services/backend/src/email/templates/email-verification.pug

@@ -10,7 +10,7 @@ block content
   p Thank you for registering with #{appName || 'DeployStack'}. To complete your account setup, please verify your email address by clicking the button below.
 
   .text-center
-    a.button(href=verificationUrl style="display: inline-block; padding: 12px 24px; background-color: #007bff; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; margin: 20px 0;") Verify Email Address
+    a.button(href=verificationUrl style="display: inline-block; padding: 12px 24px; background-color: #0f766e; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; margin: 20px 0;") Verify Email Address
 
   p If the button above doesn't work, you can also copy and paste the following link into your browser:
 

services/backend/src/routes/auth/adminResetPassword.ts

@@ -65,7 +65,7 @@ export default async function adminResetPasswordRoute(fastify: FastifyInstance)
         fastify.log.info(`Admin-initiated password reset requested by admin ${adminUserId} for email: ${email}`);
 
         // Send admin-initiated reset email
-        const result = await PasswordResetService.sendAdminResetEmail(email, adminUserId);
+        const result = await PasswordResetService.sendAdminResetEmail(email, adminUserId, fastify.log);
 
         if (!result.success && result.error) {
           fastify.log.error(`Admin password reset failed for ${email} by admin ${adminUserId}: ${result.error}`);

services/backend/src/routes/auth/registerEmail.ts

@@ -316,7 +316,8 @@ export default async function registerEmailRoute(server: FastifyInstance) {
               const emailResult = await EmailVerificationService.sendVerificationEmail(
                 userId,
                 email.toLowerCase(),
-                username
+                username,
+                request.log
               );
 
               if (!emailResult.success) {

services/frontend/src/components/admin/UserActionsGroup.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
 import { 
   AlertDialog,
@@ -13,9 +14,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
-import { Alert, AlertDescription } from '@/components/ui/alert'
 import { UserService } from '@/services/userService'
-import { CheckCircle, AlertCircle } from 'lucide-vue-next'
 import type { User } from '@/views/admin/users/types'
 
 interface Props {
@@ -26,8 +25,6 @@ const props = defineProps<Props>()
 const { t } = useI18n()
 
 const isLoading = ref(false)
-const successMessage = ref<string | null>(null)
-const errorMessage = ref<string | null>(null)
 const showDialog = ref(false)
 
 // Check if user can have password reset (only email users)
@@ -39,18 +36,13 @@ const canResetPassword = computed(() => {
 const handlePasswordReset = async () => {
   try {
     isLoading.value = true
-    errorMessage.value = null
     
     const result = await UserService.adminResetPassword(props.user.email)
     
     if (result.success) {
-      successMessage.value = t('adminUsers.userDetail.actions.resetPasswordSuccess', { 
+      toast.success(t('adminUsers.userDetail.actions.resetPasswordSuccess', { 
         email: props.user.email 
-      })
-      // Auto-hide success message after 5 seconds
-      setTimeout(() => {
-        successMessage.value = null
-      }, 5000)
+      }))
     }
   } catch (error) {
     const errorKey = 'adminUsers.userDetail.actions.resetPasswordError'
@@ -74,50 +66,16 @@ const handlePasswordReset = async () => {
       }
     }
     
-    errorMessage.value = t(errorKey, { error: errorText })
+    toast.error(t(errorKey, { error: errorText }))
   } finally {
     isLoading.value = false
     showDialog.value = false
   }
 }
-
-// Clear messages
-const clearMessages = () => {
-  successMessage.value = null
-  errorMessage.value = null
-}
 </script>
 
 <template>
   <div class="space-y-4">
-    <!-- Success Message -->
-    <Alert v-if="successMessage" class="border-green-200 bg-green-50">
-      <CheckCircle class="h-4 w-4 text-green-600" />
-      <AlertDescription class="text-green-800">
-        {{ successMessage }}
-        <button 
-          @click="clearMessages"
-          class="ml-2 text-green-600 hover:text-green-800 underline text-sm"
-        >
-          Dismiss
-        </button>
-      </AlertDescription>
-    </Alert>
-
-    <!-- Error Message -->
-    <Alert v-if="errorMessage" variant="destructive">
-      <AlertCircle class="h-4 w-4" />
-      <AlertDescription>
-        {{ errorMessage }}
-        <button 
-          @click="clearMessages"
-          class="ml-2 text-red-600 hover:text-red-800 underline text-sm"
-        >
-          Dismiss
-        </button>
-      </AlertDescription>
-    </Alert>
-
     <!-- Actions Group -->
     <div class="border rounded-lg p-4 bg-gray-50">
       <h3 class="text-sm font-medium text-gray-900 mb-3">

services/frontend/src/i18n/locales/en/index.ts

@@ -26,7 +26,7 @@ export default {
   ...notFoundMessages,
   ...adminUsersMessages,
   ...sidebarMessages,
-  ...verifyEmailMessages,
+  verifyEmail: verifyEmailMessages,
   ...forgotPasswordMessages,
   ...resetPasswordMessages,
   ...teamsMessages,

services/frontend/src/views/VerifyEmail.vue

@@ -221,9 +221,9 @@ onMounted(() => {
   <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-md">
       <img
-        class="mx-auto h-10 w-auto"
-        src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
-        alt="Your Company"
+        class="mx-auto h-20 w-auto"
+        src="/deploystack-logo-80x80.png"
+        alt="DeployStack Logo"
       />
       <h2 class="mt-10 text-center text-2xl font-bold tracking-tight text-gray-900">
         {{ $t('verifyEmail.title') }}