index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Temp Email Farel</title>
<style>
body{background:#020617;color:#fff;font-family:sans-serif}
.box{max-width:500px;margin:40px auto;background:#0f172a;padding:20px;border-radius:10px}
input,select,button{width:100%;padding:10px;margin:6px 0}
button{background:#38bdf8;border:0;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.msg{background:#020617;padding:8px;border-radius:5px;margin:5px 0}
</style>
</head>
<body>

<div class="box">
<h2>📧 Temp Email Farel</h2>

<input id="name" placeholder="username">
<select id="domain"></select>
<button id="btn" onclick="createEmail()" disabled>Buat Email</button>

<b id="email"></b>
<div id="inbox"></div>
</div>

<script>
let currentEmail = null;
let timer = null;
let domainList = [];

// 🔥 LOAD DOMAIN + AUTO RANDOM
async function loadDomains(){
    const r = await fetch('/api/domains');
    const j = await r.json();

    domain.innerHTML = '';
    domainList = [];

    j.domains.forEach(d=>{
        const dom = typeof d === 'string' ? d : d.name;
        domainList.push(dom);
        domain.innerHTML += `<option value="${dom}">${dom}</option>`;
    });

    // auto pilih random
    const random = domainList[Math.floor(Math.random() * domainList.length)];
    domain.value = random;

    btn.disabled = false;
}

// 🔥 CREATE EMAIL (AMAN)
async function createEmail(){
    if (!name.value.trim())
        return alert('Username wajib diisi');

    if (!domain.value)
        return alert('Domain belum siap');

    const r = await fetch('/api/email/new',{
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({
            name: name.value.trim(),
            domain: domain.value
        })
    });

    const j = await r.json();
    if(!j.success) return alert(j.error);

    currentEmail = j.email;
    email.innerText = "📬 " + j.email;

    if(timer) clearInterval(timer);
    timer = setInterval(loadInbox, 5000);
}

// 🔥 LOAD INBOX
async function loadInbox(){
    if(!currentEmail) return;

    const r = await fetch('/api/email/' + currentEmail + '/messages');
    const j = await r.json();

    inbox.innerHTML = '';
    j.messages?.forEach(m=>{
        inbox.innerHTML += `
        <div class="msg">
            <b>${m.from}</b><br>
            ${m.subject}
        </div>`;
    });
}

loadDomains();
</script>

</body>
</html>