135 lines
3.6 KiB
Markdown
135 lines
3.6 KiB
Markdown
# Robot Account Manager - Project Structure
|
|
|
|
## Directory Organization
|
|
|
|
```
|
|
AccManager/
|
|
├── pages/ # HTML pages
|
|
│ ├── login.html # Login page (entry point)
|
|
│ ├── index.html # Dashboard
|
|
│ ├── accounts.html # Accounts management
|
|
│ └── applications.html # Applications management
|
|
├── js/ # JavaScript files
|
|
│ └── app.js # Main application logic
|
|
├── docs/ # Documentation
|
|
│ └── README.md # This file
|
|
├── index.html # Root redirect to pages/login.html
|
|
├── .git/ # Version control
|
|
├── .vscode/ # VS Code settings
|
|
└── README.md # Project root README
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
1. **Access the application:**
|
|
- Open `index.html` in a browser
|
|
- You will be automatically redirected to `pages/login.html`
|
|
|
|
2. **Login Credentials (Demo):**
|
|
- Username: `admin`
|
|
- Password: `admin`
|
|
|
|
3. **Features:**
|
|
- Dashboard: Overview of accounts and applications
|
|
- Accounts: Manage user accounts for various services
|
|
- Applications: Manage connected applications/services
|
|
|
|
## File Structure Explanation
|
|
|
|
### /pages/
|
|
Contains all HTML pages with updated relative paths for script imports:
|
|
- `login.html` - Authentication page
|
|
- `index.html` - Main dashboard
|
|
- `accounts.html` - Accounts management interface
|
|
- `applications.html` - Applications management interface
|
|
|
|
All pages reference scripts using `../js/app.js` for correct path resolution.
|
|
|
|
### /js/
|
|
Application logic and state management:
|
|
- `app.js` - Main AccountManager class with all functionality
|
|
|
|
### /docs/
|
|
Documentation files for reference and development.
|
|
|
|
## Application Architecture
|
|
|
|
### AccountManager Class (app.js)
|
|
- **Storage**: Uses localStorage for data persistence
|
|
- **Pages**: Dynamically renders content based on user navigation
|
|
- **Authentication**: Checks for valid session on page load
|
|
- **Modals**: Manages adding/editing accounts and applications
|
|
|
|
### Data Storage
|
|
Application stores data in browser's localStorage:
|
|
- `currentUser` - Logged-in user information
|
|
- `accounts` - List of managed accounts
|
|
- `applications` - List of managed applications
|
|
- `rememberedUsername` - Optional saved username
|
|
|
|
## Development Notes
|
|
|
|
- **Framework**: Tailwind CSS for styling
|
|
- **Icons**: Material Design symbols
|
|
- **Storage**: Browser localStorage (client-side only)
|
|
- **Responsive**: Built with mobile-first approach
|
|
- **Modern**: ES6+ JavaScript features
|
|
|
|
## Navigation Flow
|
|
|
|
```
|
|
index.html (root)
|
|
↓
|
|
pages/login.html
|
|
↓ (after login)
|
|
pages/index.html (dashboard)
|
|
├→ pages/accounts.html
|
|
└→ pages/applications.html
|
|
```
|
|
|
|
## Features
|
|
|
|
### Authentication
|
|
- Username/password login
|
|
- Session management
|
|
- Remember me functionality
|
|
- Logout with confirmation
|
|
|
|
### Dashboard
|
|
- Overview statistics
|
|
- Recent account activity
|
|
- Quick access to management pages
|
|
|
|
### Account Management
|
|
- Add new accounts
|
|
- Edit existing accounts
|
|
- Delete accounts
|
|
- Filter by service
|
|
- View account details
|
|
|
|
### Application Management
|
|
- Add new applications
|
|
- Edit application details
|
|
- Delete applications
|
|
- View application status (online/offline)
|
|
- Health monitoring
|
|
|
|
## Browser Compatibility
|
|
|
|
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
- Requires JavaScript enabled
|
|
- Uses localStorage API
|
|
|
|
## Future Improvements
|
|
|
|
- Server-side authentication
|
|
- Database integration
|
|
- Advanced filtering and search
|
|
- User roles and permissions
|
|
- Audit logging
|
|
- Dark mode toggle persistence
|
|
|
|
---
|
|
Generated: March 27, 2026
|
|
Version: 1.0.0
|