Last active
August 26, 2020 18:14
-
-
Save dgrammatiko/53554fdc87fd47a77a6f640a390deb21 to your computer and use it in GitHub Desktop.
Simple Joomla 4 API consumption
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Joomla 4 API DEMO</title> | |
| </head> | |
| <body> | |
| <div id="auth"></div> | |
| <button type="button" id="fetch" disabled>Fetch The Article With id#1</button> | |
| <label>Article # <input id="num" type="number" min="1" value="1" max="6"></label> | |
| <div id="app"></div> | |
| <script type="module"> | |
| import {render, html} from 'https://unpkg.com/uhtml?module'; | |
| import redaxios from 'https://unpkg.com/redaxios?module'; | |
| const axiosOptions = { | |
| baseURL: "http://j4.local/api/index.php/v1/", | |
| timeout: 5000, | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': 'Basic ', | |
| // 'Authorization': 'Basic base64(username:password)' | |
| }, | |
| responseType: 'json' | |
| } | |
| let jApi = redaxios.create(axiosOptions); | |
| const app = document.getElementById('app'); | |
| const auth = document.getElementById('auth'); | |
| const button = document.getElementById('fetch'); | |
| // Simple 2 way binding Store | |
| const store = new Proxy({ | |
| username: '', | |
| password: '', | |
| }, { | |
| get(target, property) { | |
| return target[property] | |
| }, | |
| set(target, property, value) { | |
| target[property] = value; | |
| return true | |
| } | |
| }); | |
| const updateInputs = (e) => { | |
| const input = e.currentTarget; | |
| if (input.dataset.is === 'username') { | |
| store.username = input.value; | |
| } | |
| if (input.dataset.is === 'password') { | |
| store.password = input.value; | |
| } | |
| axiosOptions.headers['Authorization'] = `Basic ${btoa(`${store.username}:${store.password}`)}`; | |
| jApi = redaxios.create(axiosOptions); | |
| } | |
| const authApp = () => { | |
| render(auth, html` | |
| <label>Username <input type="text" autocomplete="username" value=${store.username} onInput=${updateInputs} .dataset=${{ is: 'username' }}></label> | |
| <label>Password <input type="password" autocomplete="pasword" value=${store.password} onInput=${updateInputs} .dataset=${{ is: 'password' }}></label> | |
| `); | |
| } | |
| // Initial render | |
| authApp() | |
| // Try it | |
| button.removeAttribute('disabled') | |
| button.addEventListener('click', () => { | |
| console.dir(axiosOptions) | |
| jApi.get(`content/article/${document.getElementById('num').value}`) | |
| .then((response) => { | |
| render(app, html`<h1>Your requested content</h1> | |
| <pre> | |
| ${JSON.stringify(response, null, 2)} | |
| </pre>`); | |
| }) | |
| .catch((error) => { | |
| render(app, html`<h1> There was an error</h1> | |
| <pre> | |
| ${JSON.stringify(error, null, 2)} | |
| </pre>`); | |
| }) | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment