# 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! 🚀