display aliases as table

config/default.json

@@ -11,6 +11,7 @@
   },
   "wildDuck": {
     "url": "http://localhost",
-    "token": "aaaaa"
+    "token": "aaaaa",
+    "domain": "test-codemowers.eu"
   }
 }

public/index.js

@@ -1,9 +1,84 @@
+function renderAliases(aliases) {
+    const dataContainer = document.getElementById('container')
+    // Create table element ant populate with items
+    const table = document.createElement('table')
+    table.classList.add('table')
+    const thead = document.createElement('thead')
+    const tr = document.createElement('tr')
+
+    for (const value of ['Address', 'Created']) {
+        const th = document.createElement('th')
+        th.setAttribute('scope', 'col')
+        th.innerText = value
+        tr.appendChild(th)
+    }
+
+    thead.appendChild(tr)
+    table.appendChild(thead)
+
+    const tbody = document.createElement('tbody')
+    // sort by field created
+    aliases
+        .sort((a, b) => new Date(a.created) - new Date(b.created))
+        .forEach(alias => {
+            const tr = document.createElement('tr')
+            const tdAddress = document.createElement('td')
+            // On click copy to clipboard
+            tdAddress.addEventListener('click', () => {
+                navigator.clipboard.writeText(alias.address)
+            })
+            tdAddress.innerText = alias.address
+            const tdCreated = document.createElement('td')
+            tdCreated.innerText = alias.created
+            const tdActions = document.createElement('td')
+            const aDelete = document.createElement('a')
+            aDelete.classList.add('btn')
+            aDelete.classList.add('btn-danger')
+            aDelete.innerText = 'Delete'
+            aDelete.setAttribute('href', `/aliases/${alias.id}`)
+            tdActions.appendChild(aDelete)
+
+            tr.appendChild(tdAddress)
+            tr.appendChild(tdCreated)
+            tr.appendChild(tdActions)
+            tbody.appendChild(tr)
+        })
+    table.appendChild(tbody)
+
+    dataContainer.innerHTML = ''
+    dataContainer.appendChild(table)
+
+    renderCreateButton();
+}
+
+function renderCreateButton() {
+    const dataContainer = document.getElementById('container')
+    const button = document.createElement('a')
+    button.classList.add('btn')
+    button.classList.add('btn-primary')
+
+    button.addEventListener('click', async () => {
+        button.innerText = 'Creating, please wait...'
+        const res = await fetch('/aliases', {
+            method: 'POST'
+        })
+
+        if (res.ok) {
+            const data = await res.json()
+            renderAliases(data)
+            return
+        }
+    })
+
+    button.innerText = 'Create new alias'
+    dataContainer.appendChild(button)
+}
+
 fetch('/aliases').then(async res => {
     const data = await res.json()
     const dataContainer = document.getElementById('container')
 
     if (!res.ok) {
-        // Show message "Login to see your aliases" and create a div with a button to login, url is /auth-oidc
         dataContainer.innerHTML = `
             <div class="alert alert-warning" role="alert">
                 Login to see your aliases
@@ -14,29 +89,5 @@ fetch('/aliases').then(async res => {
         return
     }
 
-    dataContainer.innerHTML = `
+    renderAliases(data);
-        <div class="alert alert-success" role="alert">
-            Your aliases
-        </div>
-        <table class="table">
-            <thead>
-                <tr>
-                    <th scope="col">Address</th> 
-                    <th scope="col">Created</th>
-                    <th scope="col">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                ${data.map(alias => `
-                    <tr>
-                        <td>${alias.address}</td>
-                        <td>${alias.created}</td>
-                        <td>
-                            <a href="/aliases/${alias.id}" class="btn btn-danger">Delete</a>
-                        </td>
-                    </tr>
-                `).join('')}
-            </tbody>
-        </table>
-    `
 })