Initial commit

5322be32 · Arturo Montejo Ráez · 5322be32 · 5322be32
Commit 5322be32 authored Apr 18, 2022 by Arturo Montejo Ráez
Showing with 77 additions and 0 deletions
index.html
js/main.js
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Navegador SOLID</title>
+    </head>
+<body>
+    <h1>Navegador SOLID</h1>
+    <div id="login">
+        <button>Iniciar sesión</button>
+    </div>
+    <div id="logout">
+        Has iniciado sesión como <strong id="user"></strong>.
+        <button id="logoutButton">Cerrar sesión</button>
+        <h2>Perfil</h2>
+        <input id="webid" size="60"> <button id="view">Mostrar</button>
+        <p>
+            <label>Nombre:</label>
+            <span id="fullName"></span>
+        </p>
+        <p id="photo"></p>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <script src="https://solid.github.io/solid-auth-client/dist/solid-auth-client.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/rdflib@1.1.0/dist/rdflib.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/js/main.js
+++ b/js/main.js
+/* ------------------------------------
+* Gestión de sesiones
+* ------------------------------------ */
+$('#login button').click(() => popupLogin());
+$('#logout #logoutButton').click(() => solid.auth.logout());
+
+/* Login */
+async function popupLogin() {
+    let session = await solid.auth.currentSession();
+    let popupUri = 'https://solidcommunity.net/common/popup.html';
+    if (!session)
+        session = await solid.auth.popupLogin({ popupUri });
+}
+solid.auth.trackSession(session => {
+    const loggedIn = !!session;
+    $('#login').toggle(!loggedIn);
+    $('#logout').toggle(loggedIn);
+    if (session) {
+        $('#user').text(session.webId);
+        if (!$('#webid').val())
+            $('#webid').val(session.webId);
+    }
+});
+/* ------------------------------------
+* Recuperación de datos
+* ------------------------------------ */
+// Establecemos espacios de nombres
+const FOAF = $rdf.Namespace('http://xmlns.com/foaf/0.1/');
+const VCARD = $rdf.Namespace('http://www.w3.org/2006/vcard/ns#');
+
+// Creamos un almacén y le asociamos un lector RDF
+const store = $rdf.graph();
+const fetcher = new $rdf.Fetcher(store);
+
+$('#view').click(async function () {
+    // Cargamos los datos a partir del WebID
+    const person = $('#webid').val();
+    await fetcher.load(person);
+    showPersonalData(person);
+});
+
+// Información personal
+function showPersonalData(person) {
+    // Mostramos tres campos del perfil
+    const fullName = store.any($rdf.sym(person), VCARD('fn'));
+    const photoUrl = store.any($rdf.sym(person), VCARD('hasPhoto'));
+    $('#fullName').text(fullName && fullName.value);
+    $('#photo').html($('<img>').attr('src', photoUrl && photoUrl.value).attr('width', '200px'));
+}