feat: implement password change notification email and update user account routing

Author: Lasim

package-lock.json

@@ -44,15 +44,15 @@
     "@release-it/conventional-changelog": "^10.0.1",
     "@types/better-sqlite3": "^7.6.13",
     "@types/fs-extra": "^11.0.4",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/nodemailer": "^6.4.14",
     "@types/pug": "^2.0.10",
     "@types/supertest": "^6.0.3",
     "@typescript-eslint/eslint-plugin": "^8.33.0",
     "@typescript-eslint/parser": "^8.33.0",
     "@vitest/coverage-v8": "^2.1.9",
     "drizzle-kit": "^0.31.1",
-    "eslint": "^9.27.0",
+    "eslint": "^9.29.0",
     "fs-extra": "^11.3.0",
     "jest": "^29.7.0",
     "release-it": "^19.0.2",
@@ -61,7 +61,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.33.0",
-    "vitest": "^2.1.8"
+    "vitest": "^3.2.3"
   },
   "overrides": {
     "glob": "^10.0.0",

services/backend/package.json

@@ -300,4 +300,33 @@ export class EmailService {
       },
     });
   }
+
+  /**
+   * Send a password changed notification email (type-safe helper)
+   */
+  static async sendPasswordChangedEmail(options: {
+    to: string;
+    userName?: string;
+    userEmail: string;
+    changeTime: string;
+    ipAddress?: string;
+    userAgent?: string;
+    loginUrl?: string;
+    supportEmail?: string;
+  }): Promise<EmailSendResult> {
+    return this.sendEmail({
+      to: options.to,
+      subject: 'Password Changed - DeployStack Security Alert',
+      template: 'password-changed',
+      variables: {
+        userName: options.userName,
+        userEmail: options.userEmail,
+        changeTime: options.changeTime,
+        ipAddress: options.ipAddress,
+        userAgent: options.userAgent,
+        loginUrl: options.loginUrl || 'https://app.deploystack.com/login',
+        supportEmail: options.supportEmail || 'support@deploystack.com',
+      },
+    });
+  }
 }

services/backend/src/email/emailService.ts

@@ -0,0 +1,72 @@
+//- @description Password change notification email template
+//- @variables userName, userEmail, changeTime, ipAddress, userAgent
+extends layouts/base.pug
+
+block content
+  h1 Password Changed Successfully
+  
+  if userName
+    p
+      | Hi #{userName},
+  else
+    p
+      | Hello,
+  
+  p
+    | We're writing to confirm that your password for your DeployStack account (#{userEmail}) has been successfully changed.
+  
+  .info-box(style="background-color: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 8px; padding: 16px; margin: 20px 0;")
+    h3(style="margin-top: 0; color: #0369a1;") Change Details:
+    p(style="margin: 8px 0;")
+      strong Time: 
+      | #{changeTime}
+    if ipAddress
+      p(style="margin: 8px 0;")
+        strong IP Address: 
+        | #{ipAddress}
+    if userAgent
+      p(style="margin: 8px 0;")
+        strong Device/Browser: 
+        | #{userAgent}
+  
+  p
+    | If you made this change, no further action is required. Your account is secure.
+  
+  .warning-box(style="background-color: #fef2f2; border: 1px solid #ef4444; border-radius: 8px; padding: 16px; margin: 20px 0;")
+    h3(style="margin-top: 0; color: #dc2626;") ⚠️ Didn't make this change?
+    p
+      | If you did not change your password, your account may have been compromised. Please:
+    ul
+      li Immediately log into your account and change your password
+      li Review your account activity for any suspicious actions
+      li Contact our support team if you need assistance
+    
+    .text-center(style="margin-top: 16px;")
+      a.button(href="#{loginUrl || 'https://app.deploystack.com/login'}" style="background-color: #dc2626; color: white;") Secure My Account
+  
+  p
+    | For your security, we recommend:
+  ul
+    li Using a strong, unique password
+    li Enabling two-factor authentication if available
+    li Regularly reviewing your account activity
+  
+  if supportEmail
+    p
+      | If you have any questions or concerns, please contact us at 
+      a(href=`mailto:${supportEmail}`)= supportEmail
+      | .
+  
+  p.text-muted
+    | Best regards,
+    br
+    | The DeployStack Security Team
+  
+  hr(style="margin: 30px 0; border: none; border-top: 1px solid #e5e7eb;")
+  
+  p.text-muted(style="font-size: 12px; color: #6b7280;")
+    | This is an automated security notification. Please do not reply to this email.
+    br
+    | If you're having trouble with the button above, copy and paste the following URL into your browser:
+    br
+    span(style="word-break: break-all; font-family: monospace;")= loginUrl || 'https://app.deploystack.com/login'

services/backend/src/email/templates/password-changed.pug

@@ -120,12 +120,23 @@ export interface EmailVerificationVariables {
   supportEmail?: string;
 }
 
+export interface PasswordChangedEmailVariables {
+  userName?: string;
+  userEmail: string;
+  changeTime: string;
+  ipAddress?: string;
+  userAgent?: string;
+  loginUrl?: string;
+  supportEmail?: string;
+}
+
 // Template registry for type safety
 export interface TemplateVariableMap {
   welcome: WelcomeEmailVariables;
   'password-reset': PasswordResetEmailVariables;
   notification: NotificationEmailVariables;
   'email-verification': EmailVerificationVariables;
+  'password-changed': PasswordChangedEmailVariables;
 }
 
 export type TemplateNames = keyof TemplateVariableMap;

services/backend/src/email/types.ts

@@ -6,6 +6,8 @@ import { ChangePasswordSchema, type ChangePasswordInput } from './schemas';
 import { requireAuthHook } from '../../hooks/authHook';
 import { z } from 'zod';
 import { zodToJsonSchema } from 'zod-to-json-schema';
+import { EmailService } from '../../email';
+import { GlobalSettingsService } from '../../services/globalSettingsService';
 
 // Response schemas
 const changePasswordSuccessResponseSchema = z.object({
@@ -160,6 +162,56 @@ export default async function changePasswordRoute(fastify: FastifyInstance) {
 
         fastify.log.info(`Password changed successfully for user: ${userId}`);
 
+        // Send password change notification email if email sending is enabled
+        try {
+          // Check if email sending is enabled in global settings
+          const emailSettings = await GlobalSettingsService.getByGroup('global');
+          const sendMailSetting = emailSettings?.find(s => s.key === 'global.send_mail');
+          const isEmailEnabled = sendMailSetting?.value === 'true';
+
+          if (isEmailEnabled) {
+            // Get user's IP address and user agent for security info
+            const ipAddress = request.ip || request.headers['x-forwarded-for'] as string || 'Unknown';
+            const userAgent = request.headers['user-agent'] || 'Unknown';
+            const changeTime = new Date().toLocaleString('en-US', {
+              timeZone: 'UTC',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+              timeZoneName: 'short'
+            });
+
+            // Get frontend URL for login link
+            const frontendUrlSetting = emailSettings?.find(s => s.key === 'global.frontend_url');
+            const frontendUrl = frontendUrlSetting?.value || process.env.DEPLOYSTACK_FRONTEND_URL || 'https://app.deploystack.com';
+            const loginUrl = `${frontendUrl}/login`;
+
+            // Send password change notification email
+            const emailResult = await EmailService.sendPasswordChangedEmail({
+              to: user.email,
+              userName: user.first_name ? `${user.first_name} ${user.last_name || ''}`.trim() : user.username,
+              userEmail: user.email,
+              changeTime,
+              ipAddress,
+              userAgent,
+              loginUrl,
+            });
+
+            if (emailResult.success) {
+              fastify.log.info(`Password change notification email sent to: ${user.email}`);
+            } else {
+              fastify.log.warn(`Failed to send password change notification email: ${emailResult.error}`);
+            }
+          } else {
+            fastify.log.debug('Email sending is disabled, skipping password change notification');
+          }
+        } catch (emailError) {
+          // Don't fail the password change if email fails
+          fastify.log.warn('Failed to send password change notification email:', emailError);
+        }
+
         // Optional: Invalidate all other sessions for security
         // This would require additional implementation to track and invalidate sessions
         // For now, we'll just log this as a security consideration

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

@@ -49,6 +49,10 @@ const updateProfileRouteSchema = {
       $refStrategy: 'none',
       target: 'openApi3'
     }),
+    403: zodToJsonSchema(updateProfileErrorResponseSchema.describe('Forbidden - Cannot change username for non-email users'), {
+      $refStrategy: 'none',
+      target: 'openApi3'
+    }),
     500: zodToJsonSchema(updateProfileErrorResponseSchema.describe('Internal Server Error - Profile update failed'), {
       $refStrategy: 'none',
       target: 'openApi3'
@@ -114,6 +118,14 @@ export default async function updateProfileRoute(fastify: FastifyInstance) {
 
         const currentUser = users[0];
 
+        // Check if username change is allowed for this auth type
+        if (username && username !== currentUser.username && currentUser.auth_type !== 'email_signup') {
+          return reply.status(403).send({ 
+            success: false, 
+            error: 'Username change is only available for email-authenticated users.' 
+          });
+        }
+
         // If username is being updated, check if it's already taken by another user
         if (username && username !== currentUser.username) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -43,7 +43,7 @@
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.27.0",
+    "eslint": "^9.29.0",
     "eslint-plugin-vue": "~10.1.0",
     "jiti": "^2.4.2",
     "npm-run-all2": "^8.0.4",

services/frontend/package.json

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+export interface AccountSection {
+  id: string
+  name: string
+  href: string
+}
+
+interface Props {
+  canChangePassword?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  canChangePassword: true
+})
+
+const route = useRoute()
+
+const accountSections = computed((): AccountSection[] => {
+  const sections = [
+    {
+      id: 'profile',
+      name: 'Profile',
+      href: '/user/account/profile',
+    },
+  ]
+  
+  // Only show Security section for users who can change password
+  if (props.canChangePassword) {
+    sections.push({
+      id: 'security',
+      name: 'Security',
+      href: '/user/account/security',
+    })
+  }
+  
+  return sections
+})
+</script>
+
+<template>
+  <nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
+    <Button
+      v-for="section in accountSections"
+      :key="section.id"
+      as-child
+      variant="ghost"
+      :class="cn(
+        'w-full text-left justify-start',
+        route.path === section.href && 'bg-muted hover:bg-muted',
+      )"
+    >
+      <RouterLink :to="section.href">
+        {{ section.name }}
+      </RouterLink>
+    </Button>
+  </nav>
+</template>

services/frontend/src/components/settings/AccountSidebarNav.vue

@@ -63,8 +63,12 @@ const routes = [
   },
   {
     path: '/user/account',
+    redirect: '/user/account/profile'
+  },
+  {
+    path: '/user/account/:section',
     name: 'UserAccount',
-    component: () => import('../views/UserAccount.vue'),
+    component: () => import('../views/user/Account.vue'),
     meta: { requiresSetup: true },
   },
   {