Security Center

[lebaaar]

Add a new tab Security Center (between Secure Notes and Password Generator)

Security Center features

• account risk score (circle chart with % safety score)
• reused passwords
• weak passwords,
• breach monitoring / compromised credentials (haveibeenpwned API)
• Implement Reused and Breached in EntryFormView

Implementation

AppSidebar.vue:

{
  path: 'security',
  name: 'security',
  component: () => import('../views/security/SecurityCenterView.vue'),
},

AppSidebar.vue:

<script>
...
const navItems = [
  { name: 'All Items', to: '/vault', icon: 'vault' },
  { name: 'Passwords', to: '/passwords', icon: 'password' },
  { name: 'Secure Notes', to: '/notes', icon: 'note' },
  { name: 'Security Center', to: '/security', icon: 'shield' }, // Add
  { name: 'Password Generator', to: '/generator', icon: 'generator' }
]
</script>

...

<template v-else-if="item.icon === 'shield'">
  <svg class="h-5 w-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
    />
  </svg>
</template>

robots.txt:

Disallow: /security