Yet Another Password Manager (YAPM) - Interface

A secure, modern password manager interface built with Quasar Framework v2 and Vue 3, featuring end-to-end encryption, PWA capabilities, and seamless integration with YAPM.

Table of contents

• Requirements
• Installation
  • Development environment
  • Production environment
• Security

Requirements

System requirements

• Node.js: 18.x or higher
• npm: 9.x or higher (or yarn/pnpm)

Backend API

This frontend requires YAPM backend to be running and accessible.

Installation

Development Environment

1. Clone the repository

git clone https://github.com/mixvoip/yapm-interface.git
cd yapm-interface

2. Install dependencies

npm install

3. Install Quasar CLI (if not already installed)

npm install -g @quasar/cli

4. Configure environment

Copy the example environment file and update it with your settings:

cp .env.example .env

Edit .env:

# Base URL for the frontend application
BASE_URL=http://localhost:9000

# Backend API URL
API_BASE_URL=http://localhost:8000

# Keep console logs in browser (true for development, false for production)
KEEP_CONSOLE_LOGS=true

# Server public key from backend (copy from backend's .env.local)
SERVER_PUBLIC_KEY=your-server-public-key-here

# Development host configuration (if you want to use a different host than localhost)
DEV_HOST=your_host_here

Important: The SERVER_PUBLIC_KEY must match the public key generated in your backend installation.

JWT public key:

Create jwt-public-key.ts in src/utils with the jwt public key from your backend installation:

const jwtPublicKey = `Your-JWT-Public-Key-Here`;

export default jwtPublicKey;

5. Start development server

# Start Quasar development server (SPA mode)
quasar dev
# or
npm run dev

# Start in PWA mode
quasar dev -m pwa

# The application will be available at http://localhost:9000

Production Environment

The production setup builds the application as a Progressive Web App (PWA) and includes automation through the provided Makefile.

1. Clone the repository

git clone https://github.com/mixvoip/yapm-interface.git
cd yapm-interface
git checkout main

2. Setup environment

Follow the steps in the Development Environment section but update the configuration for production:

BASE_URL=https://yapm.yourdomain.com
API_BASE_URL=https://api.yourdomain.com
KEEP_CONSOLE_LOGS=false
SERVER_PUBLIC_KEY=your-server-public-key-here

JWT public key:

Create jwt-public-key.ts in src/utils with the jwt public key from your backend installation:

const jwtPublicKey = `Your-JWT-Public-Key-Here`;

export default jwtPublicKey;

3. Build for production

You can build the application using the provided Makefile, which includes automatic backup and restoration on build failure:

# Install dependencies and build
make npmInstall

make build

The Makefile provides the following commands:

• make build: Build project with automatic backup restoration on failure
• make update: Pull latest changes, install dependencies, and build

Manual build alternative:

# Install dependencies
npm install --production

# Build the PWA application
npm run build

# The built files will be in dist/pwa/ directory

4. Deploy

The built application is a Progressive Web App (PWA). Deploy the contents of dist/pwa/ to your web server.

5. Setup HTTPS

Always use HTTPS in production.

Security

Key security features

1. Client-Side Encryption: All sensitive data is encrypted in the browser before transmission
2. End-to-End Encryption: Master passwords never leave the client unencrypted
3. Public Key Cryptography: Secure key exchange with the backend server

Security best practices

1. Always use HTTPS in production - HTTP connections expose sensitive data
2. Secure environment variables: Never commit .env files to version control
3. Monitor console logs: Disable KEEP_CONSOLE_LOGS in production
4. Regular backups: Backup your environment configuration and use make build for automatic backup handling

Important Files to Secure

# Never add these files to VCS
.env
.env.local
.env.production
.quasar/
dist/
node_modules/

Troubleshooting

CORS Issues

If you encounter CORS errors, ensure:

1. Backend CORS_ALLOW_ORIGIN includes your frontend URL
2. Both frontend and backend are using the same protocol (both HTTP or both HTTPS)
3. Check browser console for specific CORS error messages

Encryption Errors

If you see encryption/decryption errors:

1. Verify SERVER_PUBLIC_KEY matches the backend's public key
2. Clear browser cache and localStorage
3. Check that the backend API is accessible

Note: This frontend requires YAPM to function. Ensure the backend is properly configured and running.