MrPiglr
cad2e81fc4
- Added real-time messaging with Socket.io - Created comprehensive database schema (8 tables, functions, triggers) - Implemented messaging service with full CRUD operations - Built Socket.io service for real-time communication - Created React messaging components (Chat, ConversationList, MessageList, MessageInput) - Added end-to-end encryption utilities (RSA + AES-256-GCM) - Implemented 16 RESTful API endpoints - Added typing indicators, presence tracking, reactions - Created modern, responsive UI with animations - Updated server with Socket.io integration - Fixed auth middleware imports - Added comprehensive documentation Features: - Direct and group conversations - Real-time message delivery - Message editing and deletion - Emoji reactions - Typing indicators - Online/offline presence - Read receipts - User search - File attachment support (endpoint ready) - Client-side encryption utilities Dependencies: - socket.io ^4.7.5 - socket.io-client ^4.7.5
146 lines
3.6 KiB
Markdown
146 lines
3.6 KiB
Markdown
# Frontend Integration for aethex.tech
|
|
|
|
## Quick Start
|
|
|
|
Download and extract `aethex-tech-frontend-components.tar.gz` to get the React components.
|
|
|
|
## What's Included
|
|
|
|
```
|
|
components/
|
|
├── DomainVerification.jsx ← Main verification UI
|
|
├── DomainVerification.css
|
|
├── VerifiedDomainBadge.jsx ← Display verified domain badge
|
|
└── VerifiedDomainBadge.css
|
|
```
|
|
|
|
## Installation Steps
|
|
|
|
### 1. Copy Components
|
|
|
|
```bash
|
|
# Extract the archive
|
|
tar -xzf aethex-tech-frontend-components.tar.gz
|
|
|
|
# Copy to your aethex.tech src folder
|
|
cp -r components/* /path/to/aethex.tech/src/components/
|
|
```
|
|
|
|
### 2. Add to Your Profile/Settings Page
|
|
|
|
```javascript
|
|
import DomainVerification from '@/components/DomainVerification';
|
|
import VerifiedDomainBadge from '@/components/VerifiedDomainBadge';
|
|
|
|
// In your profile settings section:
|
|
function ProfileSettings() {
|
|
return (
|
|
<div>
|
|
<h2>Domain Verification</h2>
|
|
<DomainVerification />
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 3. Display Badge on User Profiles
|
|
|
|
```javascript
|
|
// In profile display component
|
|
function UserProfile({ user }) {
|
|
return (
|
|
<div>
|
|
<h1>{user.name}</h1>
|
|
{user.verified_domain && (
|
|
<VerifiedDomainBadge
|
|
verifiedDomain={user.verified_domain}
|
|
verifiedAt={user.domain_verified_at}
|
|
verificationType="dns"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## How It Works
|
|
|
|
1. **User clicks "Request Verification"**
|
|
- Frontend calls: `POST api.aethex.cloud/api/passport/domain/request-verification`
|
|
- Gets back DNS TXT record to add
|
|
|
|
2. **User adds TXT record to their DNS**
|
|
- Record name: `_aethex-verify`
|
|
- Record value: `aethex-verification=<token>`
|
|
|
|
3. **User clicks "Verify Domain"**
|
|
- Frontend calls: `POST api.aethex.cloud/api/passport/domain/verify`
|
|
- Backend checks DNS records
|
|
- If found, domain is verified ✓
|
|
|
|
4. **Badge shows on profile**
|
|
- `VerifiedDomainBadge` component displays verified domain
|
|
- Shows verification date
|
|
- Green checkmark indicates ownership
|
|
|
|
## API Endpoints Used
|
|
|
|
All endpoints are on `api.aethex.cloud`:
|
|
|
|
- `POST /api/passport/domain/request-verification` - Get verification token
|
|
- `POST /api/passport/domain/verify` - Verify ownership
|
|
- `GET /api/passport/domain/status` - Check current status
|
|
|
|
## Authentication
|
|
|
|
Components automatically use your existing auth tokens from localStorage:
|
|
```javascript
|
|
const token = localStorage.getItem('authToken');
|
|
```
|
|
|
|
Make sure your auth token is stored with key `'authToken'` or update line 26 in `DomainVerification.jsx`.
|
|
|
|
## Customization
|
|
|
|
### Change API URL
|
|
If your API is at a different endpoint:
|
|
```javascript
|
|
<DomainVerification apiBaseUrl="https://your-api.com/api/passport/domain" />
|
|
```
|
|
|
|
### Styling
|
|
- Edit `DomainVerification.css` for the verification UI
|
|
- Edit `VerifiedDomainBadge.css` for the badge appearance
|
|
- Both use CSS variables for easy theming
|
|
|
|
## Testing
|
|
|
|
1. Go to your profile settings on aethex.tech
|
|
2. Enter a domain you own (e.g., `yourdomain.com`)
|
|
3. Get the TXT record
|
|
4. Add it to your DNS (Cloudflare, Google Domains, etc.)
|
|
5. Wait 5-10 minutes
|
|
6. Click "Verify Domain"
|
|
7. Badge appears! ✓
|
|
|
|
## Troubleshooting
|
|
|
|
**"Network error"**
|
|
- Check that api.aethex.cloud is accessible
|
|
- Verify CORS is configured for aethex.tech
|
|
|
|
**"Verification token not found"**
|
|
- Wait longer (DNS can take 10+ minutes)
|
|
- Check TXT record was added correctly: `dig _aethex-verify.yourdomain.com TXT`
|
|
|
|
**Badge not showing**
|
|
- Make sure `user.verified_domain` is populated from your user API
|
|
- Check database has `verified_domain` column on users table
|
|
|
|
## Support
|
|
|
|
Questions? Check the main INTEGRATION.md in the AeThex-Connect repo.
|
|
|
|
---
|
|
|
|
Ready to verify domains! 🚀
|