lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases 4 Wiki Activity

Enhance user interaction and audio feedback in CLI and login components

Browse Source 
- Updated keydown event handling in App.vue to improve keyboard navigation.
- Enhanced AppSwitcher.vue with a status indicator for online presence.
- Integrated new sci-fi typing sound effect in useLoginSounds.ts for a more engaging user experience during login.
- Modified login handling functions in Login.vue to include sound feedback on setup and login actions.
- Added CLI store integration to play navigation sounds when opening and closing the CLI.
This commit is contained in:
Dorian
2026-02-18 10:35:04 +00:00
parent 59210a7927
commit c9f6e6b8ae
8 changed files with 101 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Login.vue
+29 -6
View File
@@ -41,7 +41,8 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Enter a password (min 8 characters)"
@keyup.enter="handleSetup"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
</div>
@@ -56,13 +57,14 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Confirm your password"
@keyup.enter="handleSetup"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
</div>
<button
@click="handleSetup"
@click="handleSetupWithSound"
:disabled="loading || !password || password !== confirmPassword"
class="w-full glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -89,13 +91,14 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Enter your password"
@keyup.enter="handleLogin"
@keydown="onPasswordKeydown"
@keyup.enter="handleLoginWithSound"
:disabled="loading"
/>
</div>
<button
@click="handleLogin"
@click="handleLoginWithSound"
:disabled="loading || !password"
class="w-full glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -136,7 +139,7 @@ import AnimatedLogo from '@/components/AnimatedLogo.vue'
import { useAppStore } from '../stores/app'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { rpcClient } from '../api/rpc-client'
import { startSynthwave, stopSynthwave, playLoginSuccessWhoosh } from '@/composables/useLoginSounds'
import { startSynthwave, stopSynthwave, playLoginSuccessWhoosh, playPop, playSciFiTypingTick } from '@/composables/useLoginSounds'
const router = useRouter()
const store = useAppStore()
@@ -174,6 +177,13 @@ onMounted(async () => {
})
function handleSetupWithSound() {
if (!loading.value && password.value && password.value === confirmPassword.value) {
playPop()
}
handleSetup()
}
async function handleSetup() {
if (!password.value || password.value.length < 8) {
error.value = 'Password must be at least 8 characters'
@@ -210,6 +220,19 @@ async function handleSetup() {
}
}
function onPasswordKeydown(e: KeyboardEvent) {
if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
playSciFiTypingTick()
}
}
function handleLoginWithSound() {
if (!loading.value && password.value) {
playPop()
}
handleLogin()
}
async function handleLogin() {
if (!password.value) return