# Password Manager — Frontend

A modern, dark-themed **Single Page Application (SPA)** built with React + Vite for the [Go + PostgreSQL Password Manager backend](https://github.com/StrubelPeter/Passwordmanager-Backend).

## Features

- 🔐 JWT-based authentication (login / signup)
- 🗄️ Vault management (create, delete)
- 🔑 Password entry management (create, edit, delete)
- 🔒 Client-side AES-GCM encryption/decryption of password values
- 👁️ Show / hide passwords with copy-to-clipboard
- 💪 Password strength indicator
- 🌑 Dark security-focused design theme
- 📱 Responsive layout

## Tech Stack

- **React 18** + **Vite**
- **React Router v6** — client-side routing
- **react-icons** — icon set
- Plain **CSS** with CSS variables (no heavy UI library)

---

## Getting Started

### 1. Install Dependencies

```bash
npm install
```

### 2. Configure the API URL

Copy the example environment file and set your backend URL:

```bash
cp .env.example .env
```

Edit `.env`:

```
VITE_API_BASE_URL=http://<your-backend-host>:8080
```

> If `VITE_API_BASE_URL` is not set, the app defaults to `http://localhost:8080`.

### 3. Run in Development

```bash
npm run dev
```

The app will be available at `http://localhost:5173` (or the port Vite chooses).

### 4. Build for Production

```bash
npm run build
```

The compiled output is placed in the `dist/` folder. Serve it with any static file server (e.g. `nginx`, `serve`, Caddy, etc.).

---

## Backend CORS Configuration

Because the frontend is served from a **different origin** than the backend, the Go backend must send appropriate CORS headers.

Add the [`github.com/go-chi/cors`](https://github.com/go-chi/cors) middleware to the backend:

```go
import "github.com/go-chi/cors"

// Inside your router setup:
r.Use(cors.Handler(cors.Options{
    AllowedOrigins:   []string{"http://localhost:5173", "https://your-frontend-domain.com"},
    AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
    AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type"},
    AllowCredentials: false,
    MaxAge:           300,
}))
```

Without this, browser requests from the frontend will be blocked by the same-origin policy.
