Move to git.themmonk.com

web/index.html

@@ -0,0 +1,3 @@
+<script>
+  window.location.replace('/web/login');
+</script>

web/js/api/libraries.js

@@ -0,0 +1,22 @@
+import * as auth from '/web/js/api/auth.js';
+import ky from 'https://cdn.jsdelivr.net/npm/ky@1.14.1/+esm'
+
+export async function ls(library, path) {
+    try {
+        const response = await ky.get(`/libraries/${library}/${path}`, {
+            headers: {
+                'Authorization': `Bearer ${auth.ACCESS_TOKEN}`,
+            },
+        }).json();
+
+        return response;
+
+    } catch (err) {
+        if (err.response) {
+            console.error('Unexpected HTTP status code', err.response.status);
+        } else {
+            console.error(err);
+        }
+        return "err";
+    }
+}

web/js/auth.js

@@ -0,0 +1,69 @@
+const accessToken = localStorage.getItem('accessToken');
+
+async function isAccessTokenOkay() {
+    try {
+        const response = await fetch('/auth/check_access_token', {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${accessToken}`,
+            }
+        });
+
+        if (response.status === 200) return true;
+        if (response.status === 401) return false;
+
+        console.error('Error: server sent unexpected HTTP status code', response.status);
+        return false;
+    } catch (err) {
+        console.error('Network or server error:', err);
+        return false;
+    }
+}
+
+(async () => {
+    if (!accessToken) return;
+
+    const valid = await isAccessTokenOkay();
+    if (valid && window.location.pathname === '/web/login') {
+        window.location.href = '/web/libraries';
+    }
+
+    if (!valid) {
+        window.location.href = '/web/login';
+    }
+})();
+
+//used in /web/login, not a general purpose function
+async function getAccessToken() {
+    const username = document.getElementById('username').value;
+    const password = document.getElementById('password').value;
+
+    try {
+        const response = await fetch('/auth/user_and_pass', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ username, password })
+        });
+
+        if (response.status === 200) {
+            const data = await response.json();
+            const accessToken = data.AccessToken;
+
+            if (!accessToken) {
+                alert('Login failed: no token returned');
+                return;
+            }
+
+            localStorage.setItem('accessToken', accessToken);
+            window.location.href = '/web/libraries';
+        } else if (response.status === 401) {
+            alert('Invalid username or password');
+        } else {
+            alert('Server error, please try again later.');
+        }
+    } catch (err) {
+        alert('Network error, please try again later.');
+    }
+}

web/js/libraries.js

@@ -0,0 +1,49 @@
+//auth.js handles accessToken
+//const accessToken = localStorage.getItem("accessToken");
+
+//only to be used by /web/libraries, not general purpose
+
+async function getAllLibraries() {
+    try {
+        const response = await fetch('/libraries', {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${accessToken}`,
+            }
+        });
+
+        if (response.status === 401) {
+            alert("Error: access forbidden, please reauthenticate if error persists");
+            return;
+        }
+
+        if (response.status !== 200) {
+            console.error('Unexpected HTTP status code', response.status);
+            return;
+        }
+
+        const data = await response.json();
+        const libraries = data.AvailableLibraries;
+
+        const container = document.getElementById("library-entry-container");
+        const template = document.getElementById("library-template");
+
+        container.innerHTML = "";
+
+        libraries.forEach(lib => {
+            const clone = template.content.cloneNode(true);
+            const link = clone.querySelector(".library-viewer-href");
+
+            link.textContent = lib.Name;
+            link.href = `/web/library_viewer?lib=${encodeURIComponent(lib.PathName)}&path=/`;
+
+            container.appendChild(clone);
+        });
+
+    } catch (err) {
+        alert("Network or server error");
+        console.error(err);
+    }
+}
+
+getAllLibraries();

web/js/pages/library_viewer.js

@@ -0,0 +1,3 @@
+import * as lib from '/web/js/api/libraries.js';
+
+console.log(await lib.ls("lib1", "/"))

web/libraries

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Opal Media Server</title>
+</head>
+<body>
+    <h2>Libraries</h2>
+
+    <div id="library-entry-container"></div>
+
+<!-- begin templates -->
+    <template id="library-template">
+        <a class="library-viewer-href"></a>
+    </template>
+<!-- end templates -->
+
+<!-- begin js -->
+    <script src="/web/js/auth.js" defer></script>
+    <script src="/web/js/libraries.js" defer></script>
+<!-- end js -->
+</body>
+</html>

web/library_viewer

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Opal Media Server</title>
+</head>
+<body>
+    <h2 id="library-viewer-header">Library viewer:</h2>
+
+<!-- begin templates -->
+<!-- end templates -->
+
+<!-- begin js -->
+    <script type="module" src="/web/js/pages/library_viewer.js"></script>
+<!-- end js -->
+</body>
+</html>

web/login

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Opal Media Server</title>
+</head>
+<body>
+    <h2>Login</h2>
+    <form id="loginForm">
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" required><br><br>
+
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" required><br><br>
+
+        <button type="submit">Login</button>
+    </form>
+
+    <script src="/web/js/auth.js"></script>
+    <script>
+        const loginForm = document.getElementById('loginForm');
+
+        loginForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            getAccessToken();
+        });
+    </script>
+</body>
+</html>