padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Implement comprehensive Nostr identity and social features

Browse source 
## Core Identity Management
- Add secure key generation and import functionality
- Implement AES-GCM encryption with PBKDF2 key derivation
- Create password-protected identity storage
- Add browser-compatible crypto utilities (no Buffer dependency)

## User Interface
- Build identity management dialog with tabs for setup and profile
- Add navbar integration with user dropdown and mobile support
- Create password unlock dialog for encrypted identities
- Integrate vue-sonner for toast notifications

## Nostr Protocol Integration
- Implement event creation (notes, reactions, profiles, contacts)
- Add reply thread detection and engagement metrics
- Create social interaction composables for publishing
- Support multi-relay publishing with failure handling
- Add profile fetching and caching system

## Security Features
- Web Crypto API with 100k PBKDF2 iterations
- Secure random salt and IV generation
- Automatic password prompts for encrypted storage
- Legacy support for unencrypted identities

## Technical Improvements
- Replace all Buffer usage with browser-native APIs
- Add comprehensive error handling and validation
- Implement reactive state management with Vue composables
- Create reusable crypto utility functions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
padreug 2025-07-02 16:25:20 +02:00
parent d3e8b23c86
commit ee7eb461c4
12 changed files with 1777 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/layout/Navbar.vue
View file

@ -3,8 +3,12 @@ import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTheme } from '@/components/theme-provider'
import { Button } from '@/components/ui/button'
import { Zap, Sun, Moon, Menu, X } from 'lucide-vue-next'
import { Badge } from '@/components/ui/badge'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Zap, Sun, Moon, Menu, X, User, Key, LogOut } from 'lucide-vue-next'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import IdentityDialog from '@/components/nostr/IdentityDialog.vue'
import { identity } from '@/composables/useIdentity'
interface NavigationItem {
name: string
@ -14,6 +18,7 @@ interface NavigationItem {
const { t } = useI18n()
const { theme, setTheme } = useTheme()
const isOpen = ref(false)
const showIdentityDialog = ref(false)
const navigation = computed<NavigationItem[]>(() => [
{ name: t('nav.home'), href: '/' },
@ -28,6 +33,10 @@ const toggleMenu = () => {
const toggleTheme = () => {
setTheme(theme.value === 'dark' ? 'light' : 'dark')
}
const openIdentityDialog = () => {
showIdentityDialog.value = true
}
</script>
<template>
@ -51,8 +60,41 @@ const toggleTheme = () => {
</div>
</div>
<!-- Theme Toggle and Language -->
<!-- Theme Toggle, Language, and Identity -->
<div class="flex items-center gap-2">
<!-- Identity Management -->
<div class="hidden sm:block">
<DropdownMenu v-if="identity.isAuthenticated.value">
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" class="gap-2">
<User class="h-4 w-4" />
<span class="max-w-24 truncate">{{ identity.profileDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs">Connected</Badge>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-56">
<DropdownMenuItem @click="openIdentityDialog" class="gap-2">
<User class="h-4 w-4" />
Profile
</DropdownMenuItem>
<DropdownMenuItem @click="openIdentityDialog" class="gap-2">
<Key class="h-4 w-4" />
Keys
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="identity.signOut()" class="gap-2 text-destructive">
<LogOut class="h-4 w-4" />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button v-else variant="outline" size="sm" @click="openIdentityDialog" class="gap-2">
<User class="h-4 w-4" />
Connect Identity
</Button>
</div>
<!-- Hide theme toggle on mobile -->
<Button variant="ghost" size="icon" @click="toggleTheme"
class="hidden sm:inline-flex text-foreground hover:text-foreground/90 hover:bg-accent">
@ -79,8 +121,33 @@ const toggleTheme = () => {
<div v-show="isOpen"
class="absolute left-0 right-0 top-14 z-[100] border-b bg-background/95 backdrop-blur-sm md:hidden">
<div class="space-y-1 p-4">
<!-- Identity in mobile menu -->
<div class="mb-4 px-2">
<Button v-if="!identity.isAuthenticated.value" variant="outline" size="sm" @click="openIdentityDialog; isOpen = false" class="w-full gap-2">
<User class="h-4 w-4" />
Connect Identity
</Button>
<div v-else class="space-y-2">
<div class="flex items-center gap-2 px-2 py-1">
<User class="h-4 w-4" />
<span class="text-sm font-medium">{{ identity.profileDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs ml-auto">Connected</Badge>
</div>
<div class="space-y-1">
<Button variant="ghost" size="sm" @click="openIdentityDialog; isOpen = false" class="w-full justify-start gap-2">
<User class="h-4 w-4" />
Profile
</Button>
<Button variant="ghost" size="sm" @click="identity.signOut(); isOpen = false" class="w-full justify-start gap-2 text-destructive">
<LogOut class="h-4 w-4" />
Sign Out
</Button>
</div>
</div>
</div>
<!-- Add theme and language toggles to mobile menu -->
<div class="flex items-center justify-between mb-4 px-2">
<div class="flex items-center justify-between mb-4 px-2 border-t pt-4">
<Button variant="ghost" size="icon" @click="toggleTheme"
class="text-foreground hover:text-foreground/90 hover:bg-accent">
<Sun v-if="theme === 'dark'" class="h-5 w-5" />
@ -98,5 +165,8 @@ const toggleTheme = () => {
</router-link>
</div>
</div>
<!-- Identity Dialog -->
<IdentityDialog v-model:is-open="showIdentityDialog" />
</nav>
</template>