final stage of the app

This commit is contained in:
2025-07-15 14:32:57 +03:00
parent 94f006d458
commit b94d2ebbd6
29 changed files with 1498 additions and 1124 deletions

437
README.md
View File

@@ -1,267 +1,214 @@
# QR C### QR Code Types Suppo### Management Features
- **Preview** - Real-time preview of generated QR codes
- **Download** - Export QR codes as PNG images
- **History** - View and manage previously generated QR codes
- **Delete** - Remove unwanted QR codes
- **Copy** - Copy QR codes to clipboard
- **Dynamic Link Management** - ⭐ **NEW!** Create and edit link collections **Text** - Plain text QR codes
- **URL/Website** - Direct links to websites
- **Dynamic Link Page** - ⭐ **NEW!** Create a web page with manageable links
- **WiFi** - WiFi network connection details
- **Email** - Pre-filled email composition
- **Phone** - Direct phone number dialing
- **SMS** - Pre-filled SMS messages
- **vCard** - Digital contact cardsger
# QR Code Manager
A comprehensive Python web application for creating, customizing, and managing QR codes. This application provides functionality similar to popular QR code generation websites with additional features for local management.
A modern Flask web application for generating and managing QR codes with authentication and dynamic link pages.
## Features
## 🚀 Features
### QR Code Types Supported
- **Text**: Plain text QR codes
- **URL/Website**: Direct links to websites
- **WiFi**: WiFi network connection details
- **Email**: Pre-filled email composition
- **Phone**: Direct phone number dialing
- **SMS**: Pre-filled SMS messages
- **vCard**: Digital contact cards
- **Multiple QR Code Types**: Text, URL, WiFi, Email, SMS, vCard
- **Dynamic Link Pages**: Create collections of links accessible via QR codes
- **Admin Authentication**: Secure login with bcrypt password hashing
- **Customizable Styling**: Different QR code styles (square, rounded, circle)
- **Logo Integration**: Add custom logos to QR codes
- **Docker Deployment**: Production-ready containerization
- **Responsive Design**: Modern web interface that works on all devices
### Customization Options
- **Colors**: Customizable foreground and background colors
- **Styles**: Square, rounded, or circular module styles
- **Size**: Adjustable module size (5-15px per module)
- **Logo**: Option to add custom logos to QR codes
### Management Features
- **Preview**: Real-time preview of generated QR codes
- **Download**: Export QR codes as PNG images
- **History**: View and manage previously generated QR codes
- **Delete**: Remove unwanted QR codes
- **Copy**: Copy QR codes to clipboard
## Installation
1. **Clone or navigate to the project directory**:
```bash
cd /home/pi/Desktop/qr-code_manager
```
2. **Install dependencies**:
```bash
pip install -r requirements.txt
```
Or if using the virtual environment that was created:
```bash
/home/pi/Desktop/qr-code_manager/.venv/bin/pip install -r requirements.txt
```
## Usage
1. **Start the server**:
```bash
python app.py
```
Or with the virtual environment:
```bash
/home/pi/Desktop/qr-code_manager/.venv/bin/python app.py
```
2. **Access the application**:
Open your web browser and navigate to `http://localhost:5000`
3. **Create QR codes**:
- Select the type of QR code you want to create
- Fill in the required information
- Customize the appearance (colors, style, size)
- Click "Generate QR Code"
- Download or copy your QR code
4. **Use Dynamic Link Pages** ⭐ **NEW!**:
- Select "Dynamic Link Page" as the QR code type
- Enter a title and description for your link collection
- Generate the QR code
- Use the "Manage" button or edit URL to add/edit links
- Share the QR code - visitors will see your current link collection
- Update links anytime without changing the QR code!
## API Endpoints
The application provides a RESTful API for programmatic access:
### Generate QR Code
- **POST** `/api/generate`
- **Body**: JSON with QR code parameters
- **Response**: Generated QR code data and download URL
### Download QR Code
- **GET** `/api/download/<qr_id>`
- **Response**: PNG image file
### List QR Codes
- **GET** `/api/qr_codes`
- **Response**: JSON array of all generated QR codes
### Get QR Code Details
- **GET** `/api/qr_codes/<qr_id>`
- **Response**: JSON with QR code details
### Delete QR Code
- **DELETE** `/api/qr_codes/<qr_id>`
- **Response**: Success/error status
### Upload Logo
- **POST** `/api/upload_logo`
- **Body**: Multipart form with logo file
- **Response**: Logo path for use in QR generation
### Dynamic Link Pages ⭐ **NEW!**
#### Create Link Page
- **POST** `/api/create_link_page`
- **Body**: JSON with page title, description, and QR styling
- **Response**: QR code data, page URLs, and management links
#### Add Link to Page
- **POST** `/api/link_pages/<page_id>/links`
- **Body**: JSON with link title, URL, and description
- **Response**: Success/error status
#### Update Link
- **PUT** `/api/link_pages/<page_id>/links/<link_id>`
- **Body**: JSON with updated link data
- **Response**: Success/error status
#### Delete Link
- **DELETE** `/api/link_pages/<page_id>/links/<link_id>`
- **Response**: Success/error status
#### Get Link Page Data
- **GET** `/api/link_pages/<page_id>`
- **Response**: JSON with page and links data
#### View Public Link Page
- **GET** `/links/<page_id>`
- **Response**: HTML page displaying links
#### Edit Link Page
- **GET** `/edit/<page_id>`
- **Response**: HTML interface for managing links
## Example API Usage
### Generate a URL QR Code
```bash
curl -X POST http://localhost:5000/api/generate \
-H "Content-Type: application/json" \
-d '{
"type": "url",
"content": "https://github.com",
"foreground_color": "#000000",
"background_color": "#FFFFFF",
"style": "square",
"size": 10
}'
```
### Generate a WiFi QR Code
```bash
curl -X POST http://localhost:5000/api/generate \
-H "Content-Type: application/json" \
-d '{
"type": "wifi",
"wifi": {
"ssid": "MyNetwork",
"password": "MyPassword",
"security": "WPA"
},
"foreground_color": "#0066cc",
"background_color": "#ffffff"
}'
```
### Create a Dynamic Link Page ⭐ **NEW!**
```bash
curl -X POST http://localhost:5000/api/create_link_page \
-H "Content-Type: application/json" \
-d '{
"title": "My Resources",
"description": "Collection of useful links",
"foreground_color": "#1565c0",
"background_color": "#ffffff",
"style": "rounded"
}'
```
### Add Links to the Page
```bash
curl -X POST http://localhost:5000/api/link_pages/PAGE_ID/links \
-H "Content-Type: application/json" \
-d '{
"title": "GitHub",
"url": "https://github.com",
"description": "Code repository platform"
}'
```
## File Structure
## 📁 Project Structure
```
qr-code_manager/
├── app.py # Main Flask application
├── requirements.txt # Python dependencies
├── README.md # This file
├── templates/
│ └── index.html # Web interface
├── static/
│ ├── qr_codes/ # Generated QR code images
│ └── logos/ # Uploaded logo files
└── .venv/ # Virtual environment (if created)
├── README.md # Project documentation
├── main.py # Application entry point
├── Dockerfile # Docker container definition
├── docker-compose.yml # Docker orchestration
├── requirements.txt # Python dependencies
├── .env.example # Environment variables template
├── deploy.sh # Deployment script
├── app/ # Main application package
│ ├── __init__.py # Flask app factory
│ ├── templates/ # Jinja2 templates
│ │ ├── index.html # Main dashboard
│ │ ├── login.html # Authentication page
│ │ ├── link_page.html # Public link display
│ │ └── edit_links.html # Link management interface
│ ├── static/ # Static files
│ │ ├── qr_codes/ # Generated QR code images
│ │ └── logos/ # Uploaded logo files
│ ├── routes/ # Route handlers
│ │ ├── __init__.py # Route package
│ │ ├── main.py # Main page routes
│ │ ├── auth.py # Authentication routes
│ │ └── api.py # API endpoints
│ └── utils/ # Utility modules
│ ├── __init__.py # Utils package
│ ├── auth.py # Authentication utilities
│ ├── qr_generator.py # QR code generation
│ ├── link_manager.py # Dynamic link management
│ └── data_manager.py # Data storage utilities
```
## Dependencies
## 🛠️ Quick Start
- **Flask**: Web framework
- **qrcode[pil]**: QR code generation with PIL support
- **Pillow**: Image processing
- **flask-cors**: Cross-Origin Resource Sharing support
- **python-dotenv**: Environment variable management
### Method 1: Docker (Recommended)
## Security Considerations
1. **Clone and navigate to the project:**
```bash
git clone <your-repo-url>
cd qr-code_manager
```
- The application runs in debug mode by default - disable for production
- File uploads are stored locally - implement proper validation and storage limits
- QR codes are stored in memory - consider using a database for persistence
- The server accepts connections from all interfaces (0.0.0.0) - restrict for production
2. **Create environment file:**
```bash
cp .env.example .env
# Edit .env with your preferred settings
```
## Customization
3. **Deploy with Docker:**
```bash
./deploy.sh
```
### Adding New QR Code Types
1. Add the new type to the HTML select options
2. Create corresponding form fields in the HTML
3. Add processing logic in the `/api/generate` endpoint
4. Update the JavaScript to handle the new type
4. **Access the application:**
- Open http://localhost:5000
- Login with: admin / admin123 (change in production!)
### Styling
The application uses embedded CSS for easy customization. Modify the `<style>` section in `templates/index.html` to change the appearance.
### Method 2: Local Development
### Storage
Currently uses in-memory storage. To persist data:
1. Install a database library (SQLite, PostgreSQL, etc.)
2. Replace the `qr_codes_db` dictionary with database operations
3. Add database initialization code
1. **Set up Python environment:**
```bash
python -m venv .venv
source .venv/bin/activate # On Windows: .venv\Scripts\activate
```
## Troubleshooting
2. **Install dependencies:**
```bash
pip install -r requirements.txt
```
3. **Run the application:**
```bash
python main.py
```
## 🔐 Authentication
- **Default Credentials**: admin / admin123
- **Environment Variables**:
- `ADMIN_USERNAME`: Set custom admin username
- `ADMIN_PASSWORD`: Set custom admin password
- `SECRET_KEY`: Set Flask secret key for sessions
## 🐳 Docker Deployment
The application is fully containerized with Docker:
- **Build and run**: `docker-compose up -d`
- **View logs**: `docker-compose logs -f`
- **Stop**: `docker-compose down`
- **Full rebuild**: `docker-compose up --build -d`
### Production Configuration
1. **Set environment variables in .env:**
```bash
FLASK_ENV=production
SECRET_KEY=your-super-secret-key-here
ADMIN_USERNAME=your-admin-username
ADMIN_PASSWORD=your-secure-password
```
2. **Deploy:**
```bash
docker-compose up -d
```
## 📱 Usage
### Generating QR Codes
1. **Login** to the admin interface
2. **Select QR type**: Text, URL, WiFi, Email, SMS, or vCard
3. **Fill in the details** for your chosen type
4. **Customize appearance**: Size, colors, style, border
5. **Add logo** (optional): Upload custom logo for branding
6. **Generate and download** your QR code
### Dynamic Link Pages
1. **Create a link page** from the main interface
2. **Add links** to your collection via the edit interface
3. **Share the QR code** that points to your link page
4. **Update links anytime** without changing the QR code
## 🛡️ Security Features
- **Password Hashing**: Uses bcrypt for secure password storage
- **Session Management**: Secure Flask sessions with signing
- **Authentication Required**: All admin functions require login
- **Docker Security**: Non-root user in container
- **Environment Variables**: Sensitive data via environment configuration
## 🔧 Development
### Project Architecture
The application follows a modular Flask structure:
- **App Factory Pattern**: Clean application initialization
- **Blueprint Organization**: Separate route modules for different features
- **Utility Modules**: Reusable components for QR generation, auth, etc.
- **Template Organization**: Structured Jinja2 templates
- **Static File Management**: Organized asset storage
### Adding New Features
1. **New Routes**: Add to appropriate blueprint in `app/routes/`
2. **New Utilities**: Create modules in `app/utils/`
3. **New Templates**: Add to `app/templates/`
4. **New Dependencies**: Update `requirements.txt`
## 📊 API Endpoints
- `POST /api/generate` - Generate QR code
- `GET /api/qr_codes` - List all QR codes
- `GET /api/qr_codes/{id}` - Get specific QR code
- `DELETE /api/qr_codes/{id}` - Delete QR code
- `POST /api/create_link_page` - Create dynamic link page
- `POST /api/link_pages/{id}/links` - Add link to page
- `PUT /api/link_pages/{id}/links/{link_id}` - Update link
- `DELETE /api/link_pages/{id}/links/{link_id}` - Delete link
## 🚨 Troubleshooting
### Common Issues
1. **Port already in use**: Change the port in `app.py` or stop the conflicting service
2. **Permission errors**: Ensure the application has write permissions to the static directories
3. **Missing dependencies**: Reinstall requirements with `pip install -r requirements.txt`
### Debug Mode
The application runs in debug mode, which provides detailed error messages and auto-reload functionality. Disable for production by setting `debug=False` in the `app.run()` call.
1. **Permission Denied**: Ensure Docker has proper permissions
2. **Port 5000 in use**: Change port in docker-compose.yml
3. **Authentication Failed**: Check admin credentials in .env
4. **Image Generation Failed**: Verify PIL/Pillow installation
## License
### Health Check
This project is open source. Feel free to modify and distribute according to your needs.
Visit `/health` to check application status:
```bash
curl http://localhost:5000/health
```
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request
## 📞 Support
For support, please open an issue on GitHub or contact the development team.
---
**Made with ❤️ for easy QR code management**