vstockwell/wraith
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

fix: inline modals in index.vue, proper DTO for profile update

Browse Source 
Dialogs: bypassed component-based dialogs entirely — inlined modals
directly in index.vue with inline style fallbacks for z-index/colors.
If button clicks work, we see the modal. Period.

Profile 500: created UpdateProfileDto with class-validator decorators
so ValidationPipe processes it correctly. Added error logging.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell 2026-03-13 09:09:05 -04:00
parent 19e765058d
commit f778213c32
5 changed files with 133 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,3 +6,4 @@ dist/
*.log
.DS_Store
backend/prisma/*.db
frontend/dist

13
backend/src/auth/auth.controller.ts
View File

@ -1,7 +1,8 @@
import { Controller, Post, Get, Put, Body, Request, UseGuards } from '@nestjs/common';
import { Controller, Post, Get, Put, Body, Request, UseGuards, InternalServerErrorException } from '@nestjs/common';
import { AuthService } from './auth.service';
import { JwtAuthGuard } from './jwt-auth.guard';
import { LoginDto } from './dto/login.dto';
import { UpdateProfileDto } from './dto/update-profile.dto';
@Controller('auth')
export class AuthController {
@ -20,8 +21,14 @@ export class AuthController {
@UseGuards(JwtAuthGuard)
@Put('profile')
updateProfile(@Request() req: any, @Body() body: { email?: string; displayName?: string; currentPassword?: string; newPassword?: string }) {
return this.auth.updateProfile(req.user.sub, body);
async updateProfile(@Request() req: any, @Body() dto: UpdateProfileDto) {
try {
return await this.auth.updateProfile(req.user.sub, dto);
} catch (e: any) {
console.error('Profile update error:', e);
if (e.status) throw e;
throw new InternalServerErrorException(e.message || 'Profile update failed');
}
}
@UseGuards(JwtAuthGuard)

20
backend/src/auth/dto/update-profile.dto.ts Normal file
View File

@ -0,0 +1,20 @@
import { IsEmail, IsString, IsOptional, MinLength } from 'class-validator';
export class UpdateProfileDto {
@IsOptional()
@IsEmail()
email?: string;
@IsOptional()
@IsString()
displayName?: string;
@IsOptional()
@IsString()
currentPassword?: string;
@IsOptional()
@IsString()
@MinLength(6)
newPassword?: string;
}

66
frontend/components/connections/GroupEditDialog.vue
View File

@ -69,42 +69,40 @@ async function save() {
</script>
<template>
<Teleport to="body">
<div v-if="visible" class="fixed inset-0 z-50 flex items-center justify-center">
<!-- Backdrop -->
<div class="absolute inset-0 bg-black/60" @click="close" />
<!-- Dialog -->
<div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-xl w-[380px] max-h-[90vh] overflow-y-auto">
<!-- Header -->
<div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
<h3 class="text-lg font-semibold text-white">{{ title }}</h3>
<button @click="close" class="text-gray-500 hover:text-white text-xl leading-none">&times;</button>
<div v-if="visible" class="fixed inset-0 z-[9999] flex items-center justify-center">
<!-- Backdrop -->
<div class="absolute inset-0 bg-black/70" @click="close" />
<!-- Dialog -->
<div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-2xl w-[380px] max-h-[90vh] overflow-y-auto">
<!-- Header -->
<div class="flex items-center justify-between px-5 py-4 border-b border-gray-800">
<h3 class="text-lg font-semibold text-white">{{ title }}</h3>
<button @click="close" class="text-gray-500 hover:text-white text-xl leading-none">&times;</button>
</div>
<!-- Body -->
<div class="px-5 py-4 space-y-4">
<div>
<label class="block text-sm text-gray-400 mb-1">Group Name *</label>
<input v-model="form.name" type="text" placeholder="Production Servers" autofocus
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
</div>
<!-- Body -->
<div class="px-5 py-4 space-y-4">
<div>
<label class="block text-sm text-gray-400 mb-1">Group Name *</label>
<input v-model="form.name" type="text" placeholder="Production Servers" autofocus
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none" />
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Parent Group</label>
<select v-model="form.parentId"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
<option v-for="opt in parentOptions" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
</select>
</div>
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
</div>
<!-- Footer -->
<div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-800">
<button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded">Cancel</button>
<button @click="save" :disabled="saving || !form.name"
class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded disabled:opacity-50">
{{ saving ? 'Saving...' : 'Save' }}
</button>
<div>
<label class="block text-sm text-gray-400 mb-1">Parent Group</label>
<select v-model="form.parentId"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white focus:border-sky-500 focus:outline-none">
<option v-for="opt in parentOptions" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
</select>
</div>
<p v-if="error" class="text-red-400 text-sm">{{ error }}</p>
</div>
<!-- Footer -->
<div class="flex justify-end gap-2 px-5 py-4 border-t border-gray-800">
<button @click="close" class="px-4 py-2 text-sm text-gray-400 hover:text-white rounded">Cancel</button>
<button @click="save" :disabled="saving || !form.name"
class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded disabled:opacity-50">
{{ saving ? 'Saving...' : 'Save' }}
</button>
</div>
</div>
</Teleport>
</div>
</template>

73
frontend/pages/index.vue
View File

@ -87,6 +87,28 @@ function dismissSavePrompt() {
pendingQuickConnect.value = null
}
// Inline modal state (bypasses component issues)
const inlineHost = ref({ name: '', hostname: '', port: 22, protocol: 'ssh' as 'ssh' | 'rdp' })
async function createGroupInline() {
const nameEl = document.getElementById('grp-name') as HTMLInputElement
if (!nameEl?.value) return
await connections.createGroup({ name: nameEl.value })
showGroupDialog.value = false
}
async function createHostInline() {
if (!inlineHost.value.name || !inlineHost.value.hostname) return
await connections.createHost({
name: inlineHost.value.name,
hostname: inlineHost.value.hostname,
port: inlineHost.value.port,
protocol: inlineHost.value.protocol,
})
showHostDialog.value = false
inlineHost.value = { name: '', hostname: '', port: 22, protocol: 'ssh' }
}
// Client-side search filtering
const filteredHosts = computed(() => {
if (!searchQuery.value.trim()) return connections.hosts
@ -192,8 +214,53 @@ const recentHosts = computed(() => {
</main>
</div>
<!-- Dialogs -->
<HostEditDialog v-model:visible="showHostDialog" :host="editingHost" @saved="connections.fetchHosts()" />
<GroupEditDialog v-model:visible="showGroupDialog" @saved="connections.fetchTree()" />
<!-- Debug: inline test modal -->
<div v-if="showGroupDialog || showHostDialog" class="fixed inset-0 z-[9999] flex items-center justify-center" style="z-index: 99999;">
<div class="absolute inset-0 bg-black bg-opacity-70" @click="showGroupDialog = false; showHostDialog = false" />
<div class="relative bg-gray-900 border border-gray-700 rounded-lg shadow-2xl p-6 w-96" style="background: #1a1a2e; border: 2px solid #e94560;">
<h3 class="text-lg font-bold text-white mb-4">{{ showGroupDialog ? 'New Group' : 'New Host' }}</h3>
<div v-if="showGroupDialog" class="space-y-3">
<div>
<label class="block text-sm text-gray-400 mb-1">Group Name</label>
<input id="grp-name" type="text" placeholder="Production Servers"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
</div>
<div class="flex justify-end gap-2 pt-2">
<button @click="showGroupDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
<button @click="createGroupInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
</div>
</div>
<div v-else class="space-y-3">
<div>
<label class="block text-sm text-gray-400 mb-1">Name</label>
<input v-model="inlineHost.name" type="text" placeholder="My Server"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
</div>
<div class="flex gap-3">
<div class="flex-1">
<label class="block text-sm text-gray-400 mb-1">Hostname / IP</label>
<input v-model="inlineHost.hostname" type="text" placeholder="192.168.1.1"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
</div>
<div class="w-24">
<label class="block text-sm text-gray-400 mb-1">Port</label>
<input v-model.number="inlineHost.port" type="number"
class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white" />
</div>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Protocol</label>
<select v-model="inlineHost.protocol" class="w-full px-3 py-2 bg-gray-800 border border-gray-700 rounded text-white">
<option value="ssh">SSH</option>
<option value="rdp">RDP</option>
</select>
</div>
<div class="flex justify-end gap-2 pt-2">
<button @click="showHostDialog = false" class="px-4 py-2 text-sm text-gray-400 hover:text-white">Cancel</button>
<button @click="createHostInline()" class="px-4 py-2 text-sm bg-sky-600 hover:bg-sky-700 text-white rounded">Save</button>
</div>
</div>
</div>
</div>
</div>
</template>