# Frontend for Credential Issuance

**What We Are Doing:**

* Creating a simple HTML form to collect user data.
* When the form is submitted, it calls `/kyc-credential` and displays the returned QR code.
* The user scans this QR code with the Empe DID Wallet to receive the credential.

**Why:** A user interface is essential so that a real person can enter their details and obtain a credential.

**Steps:** In `public/index.html`:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>EVDI Tutorial</title>
</head>
<body>
<h1>KYC Credential Issuance</h1>

<form id="kyc-form">
    <label for="age">Age</label>
    <input type="number" name="age" id="age" required/>

    <label for="firstName">First Name</label>
    <input type="text" name="firstName" id="firstName" required/>

    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" id="lastName" required/>

    <button type="submit">Submit</button>
</form>
<img src="" alt="qrcode" width="238" height="238" id="qrcode" style="display:none;"/>

<script>
    const form = document.getElementById('kyc-form');
    const qrcodeImg = document.getElementById('qrcode');

    form.addEventListener('submit', async (event) => {
        event.preventDefault();
        const formData = new FormData(event.target);
        const payload = {
            age: formData.get('age'),
            firstName: formData.get('firstName'),
            lastName: formData.get('lastName')
        };

        const res = await fetch('/issuer/kyc-credential', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });

        const data = await res.json();
        // Fetch the actual QR code image data
        const qrRes = await fetch(data.qr_code_url);

        // Assume QR code is returned as JSON image data
        qrcodeImg.src = await qrRes.json();
        qrcodeImg.style.display = 'block';
    });
</script>
</body>
</html>
```

Now, you can test issuing a credential by filling out the form and scanning the generated QR code with the Empe DID Wallet.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.empe.io/getting-started/tutorial/frontend-issuance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
