@igea/oac_frontend 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "scripts": {

package/src/controllers/users.js

@@ -40,6 +40,18 @@ module.exports = function(serviceName) {
 
     });
 
+    router.get('/reset_password/:id/:token', (req, res) => {
+        let data = new DataModel(req, {  
+            root: serviceName, 
+            title: 'Reset password',
+            user: {
+                id: req.params.id,
+                token: req.params.token
+            }
+        });    
+        res.render('users/reset_password.twig', data.toJson()); 
+    });
+
     return router
 }
 

package/src/controllers/vocabolaries.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const router = express.Router();
+const DataModel = require('../models/DataModel');
+
+module.exports = function(serviceName) {
+    /**
+     * @route   GET /users/manage: redirect to the users page with list of users
+     */
+    router.get('/manage', (req, res) => {
+        let data = new DataModel(req, {  
+            root: serviceName, 
+            title: 'Vocabolaries Management',
+        });    
+        res.render('vocabolaries/edit.twig', data.toJson()); 
+    });
+
+    return router
+}
+
+
+
+

package/src/index.js

@@ -12,6 +12,8 @@ const jwtLib = jwtLibFactory({
     secret: process.env.JWT_SECRET || config.jwt_secret,
     excludePaths: [
         `/${serviceName}/`,
+        `/${serviceName}/password_recovery`,
+        new RegExp(`^/${serviceName}/users/reset_password/[^/]+/[^/]+$`),
         `/${serviceName}/health`,
         `/${serviceName}/captcha/random-image`
     ],
@@ -76,6 +78,9 @@ getPort.default({
     const usersRouter = require('./controllers/users.js')(serviceName);
     app.use(`/${serviceName}/users`, usersRouter);
 
+    const vocabolariesRouter = require('./controllers/vocabolaries.js')(serviceName);
+    app.use(`/${serviceName}/vocabolaries`, vocabolariesRouter);
+
     const searchRouter = require('./controllers/search.js')(serviceName);
     app.use(`/${serviceName}/search`, searchRouter);
 
@@ -87,6 +92,9 @@ getPort.default({
     app.get(`/${serviceName}`, (req, res) => {
         res.render('login', { root: serviceName, title: 'Login' });
     });
+    app.get(`/${serviceName}/password_recovery`, (req, res) => {
+        res.render('password_recovery', { root: serviceName, title: 'Password recovery' });
+    });
     app.get(`/${serviceName}/home`, (req, res) => {
         let data = new DataModel(req, {  
             root: serviceName, 

package/src/locales/en.json

@@ -4,9 +4,21 @@
         "title": "Login",
         "user": "Email or Username",
         "password": "Password",
+        "password_recovery": "Forgot your password?",
+        "invalid_user": "Invalid username or password",
         "sign_in": "Sign in",
         "anonymous": "Anonymous"
     },
+    "password_recovery": {
+        "title": "Password recovery",
+        "instructions": "Enter your email address or username to receive password recovery instructions.",
+        "email": "Email",
+        "send_instructions": "Send instructions",
+        "back_to_login": "Back to login",
+        "invalid_email": "Invalid email address",
+        "email_sent": "Instructions have been sent to your email address, if it exists in our system."
+        "password_reset_success": "Your password has been reset successfully. You can now log in with your new password."        
+    },
     "users": {
         "manage": {
             "title": "Users",
@@ -44,6 +56,22 @@
             "admin": "Admin",
             "editor": "Editor",
             "reader": "Reader"
+        },
+        "vocabolaries": {
+            "title": "Vocabolaries",
+            "drag_drop": "Drag & drop XML files here, or click to select",
+            "browse": "browse",
+            "no_files": "No files selected",
+            "file": "file",
+            "files": "files",
+            "remove": "Remove",
+            "upload": "Upload",
+            "uploading": "Uploading...",
+            "upload_ok": "Files uploaded successfully",
+            "upload_error": "Error uploading files",
+            "invalid_file": "Invalid file type",
+            "max_files": "You can upload up to 5 files at a time",
+            "max_size": "Each file must be less than 10MB"
         }
     },
     "search": {

package/src/locales/it.json

@@ -4,9 +4,21 @@
         "title": "Accesso",
         "user": "Email o Nome utente",
         "password": "Password",
+        "password_recovery": "Hai dimenticato la password?",
+        "invalid_user": "Nome utente o password non validi",
         "sign_in": "Accedi",
         "anonymous": "Anonimo"
     },
+    "password_recovery": {
+        "title": "Recupero password",
+        "instructions": "Inserisci il tuo indirizzo email o nome utente per ricevere le istruzioni di recupero della password.",
+        "email": "Email",
+        "send_instructions": "Invia istruzioni",
+        "back_to_login": "Torna al login",
+        "invalid_email": "Indirizzo email non valido",
+        "email_sent": "Le istruzioni sono state inviate al tuo indirizzo email, se esiste nel nostro sistema.",
+        "password_reset_success": "La tua password è stata reimpostata con successo. Ora puoi accedere con la tua nuova password."
+    },
     "users": {
         "manage": {
             "title": "Utenti",
@@ -44,7 +56,21 @@
             "admin": "Amministratore",
             "editor": "Editore",
             "reader": "Lettore"
-        }   
+        },
+        "vocabolaries": {
+            "title": "Vocabolari",
+            "drag_drop": "Trascina e rilascia i file XML qui, oppure clicca per selezionare",
+            "browse": "sfoglia",
+            "no_files": "Nessun file selezionato",
+            "file": "file",
+            "files": "file",
+            "remove": "Rimuovi",
+            "upload": "Carica",
+            "uploading": "Caricamento in corso...",
+            "upload_ok": "File caricati con successo",
+            "upload_error": "Errore durante il caricamento dei file",
+            "invalid_file": "Tipo di file non valido"
+        }
     },
     "search": {
         "fast": {

package/src/public/css/drop-file.css

@@ -0,0 +1,19 @@
+.dropzone {
+    width: calc(100% - 200px);
+    margin: 40px auto;
+    padding: 30px;
+    border: 3px dashed darkred;
+    border-radius: 8px;
+    text-align: center;
+    transition: background .15s, border-color .15s;
+    user-select: none;
+}
+.dropzone.dragover {
+    background: #f0f8ff;
+    border-color: #3b82f6;
+}
+.files-list { margin-top: 12px; text-align: left; }
+.file-row { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding:6px 0; }
+.progress { width: 200px; height: 10px; background:#eee; border-radius:6px; overflow:hidden; }
+.progress > span { display:block; height:100%; width:0%; background:#3b82f6; transition: width .2s; }
+.btn { padding:6px 10px; border-radius:6px; cursor:pointer; border:1px solid #ccc; background:#fff; }

package/src/public/js/login/login.js

@@ -1,6 +1,6 @@
 onSubmit = function(type){
-
-    axios.post("/backend/auth/authenticate", {
+    var url = "/backend/auth/authenticate";
+    axios.post(url, {
         type: type,
         user: (type == "login") ? 
             document.getElementById("username").value : "",
@@ -11,5 +11,4 @@ onSubmit = function(type){
     }).catch(error => {
         console.log(error);
     });
-
 }

package/src/public/js/login/password_recovery.js

@@ -0,0 +1,32 @@
+function passwordrecoveryInit(options={}){
+
+    window.onSubmit = function(){
+        var url = "/backend/auth/password_recovery";
+        axios.post(url, {
+            user: document.getElementById("username").value
+        }).then(response => {
+            alert(options.labels.email_sent);
+            window.location = "/frontend/";
+        }).catch(error => {
+            console.log(error);
+        });
+    }
+
+    window.onSubmitReset = function(){
+
+        alert(options.labels.reset_success);
+        window.location = "/frontend/";
+        /*
+        var url = "/backend/auth/password_recovery";
+        axios.post(url, {
+            user: document.getElementById("username").value
+        }).then(response => {
+            alert(options.labels.email_sent);
+            window.location = "/frontend/";
+        }).catch(error => {
+            console.log(error);
+        });
+        */
+    }
+
+}

package/src/public/js/vocabolaries/vocabolaries.js

@@ -0,0 +1,98 @@
+function dropFilesInit(options={}) {
+  const dropzone = document.getElementById('dropzone');
+  const fileInput = document.getElementById('fileInput');
+  const browseBtn = document.getElementById('browseBtn');
+  const filesList = document.getElementById('filesList');
+
+  // Configure your target upload API URL here:
+  const UPLOAD_URL = '/backend/fuseki/upload/vocabularies'; 
+
+  browseBtn.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', e => handleFiles(e.target.files));
+
+  // Drag events
+  ['dragenter','dragover'].forEach(ev => {
+    dropzone.addEventListener(ev, (e) => {
+      e.preventDefault();
+      //e.stopPropagation();
+      dropzone.classList.add('dragover');
+    });
+  });
+
+  ['dragleave','drop','dragend'].forEach(ev => {
+    dropzone.addEventListener(ev, (e) => {
+      e.preventDefault();
+      //e.stopPropagation();
+      dropzone.classList.remove('dragover');
+    });
+  });
+
+  dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    //e.stopPropagation();
+    const dt = e.dataTransfer;
+    if (dt && dt.files && dt.files.length) handleFiles(dt.files);
+  });
+
+  // keyboard accessibility: space or enter triggers browse
+  dropzone.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      fileInput.click();
+    }
+  });
+
+  function handleFiles(fileList) {
+    const files = Array.from(fileList);
+    files.forEach(uploadFile);
+  }
+
+  async function uploadFile(file) {
+    // Create UI row
+    const row = document.createElement('div');
+    row.className = 'file-row';
+    const info = document.createElement('div');
+    info.textContent = `${file.name} (${Math.round(file.size / 1024)} KB)`;
+    const controls = document.createElement('div');
+
+    const progressBar = document.createElement('div');
+    progressBar.className = 'progress';
+    const progressFill = document.createElement('span');
+    progressBar.appendChild(progressFill);
+
+    const status = document.createElement('span');
+    status.style.marginLeft = '8px';
+
+    controls.appendChild(progressBar);
+    controls.appendChild(status);
+    row.appendChild(info);
+    row.appendChild(controls);
+    filesList.appendChild(row);
+
+    // FormData
+    var form = new FormData();
+    form.append('files', file);
+
+    try {
+      const response = await axios.post(UPLOAD_URL, form, {
+        onUploadProgress: (evt) => {
+          if (evt.lengthComputable) {
+            const pct = Math.round((evt.loaded / evt.total) * 100);
+            progressFill.style.width = pct + '%';
+          }
+        },
+      });
+      // Success
+      progressFill.style.width = '100%';
+      status.textContent = '✔️ ' + options.labels.upload_ok;
+      status.style.color = 'green';
+    } catch (err) {
+      // Error
+      status.textContent = '❌ ' + options.labels.upload_error + ': ' + (err.response?.data?.message || err.message);
+      status.style.color = 'red';
+    }
+  }
+}
+
+
+    

package/src/views/login.twig

@@ -14,12 +14,16 @@
         <div>
             <label for="username">{{ t('login.user') }}</label>
             {% if invalidLogin %}
-                <span class=".login-message">Invalid credentials</span>
+                <span class=".login-message">{{ t('login.invalid_user') }}</span>
             {% endif %}
             <input type="text" id="username" name="username" required />
             <label for="password">{{ t('login.password') }}</label>
             <input type="password" id="password" name="password" required />
             <button onclick="onSubmit('login')">{{ t('login.sign_in') }}</button>
+            <a href="/{{ root }}/password_recovery">
+                <i class="fa-solid fa-key"></i>
+                <span>{{ t('login.password_recovery') }}</span>
+            </a>
             <button onclick="onSubmit('anonymous');" style="background: #ff0000">
                 {{ t('login.anonymous') }}</button>
         </div>

package/src/views/password_recovery.twig

@@ -0,0 +1,28 @@
+{% set showSidebar = false %}
+
+{% extends "base.twig" %}
+
+{% block extendHead %}
+    <link rel="stylesheet" href="/{{ root }}/css/login.css">
+    <script src="/{{ root }}/js/login/password_recovery.js"></script>
+{% endblock %}
+
+{% block content %}
+    
+    <div class="login-container">
+        <h2><i class="fa-solid fa-key"></i> {{ t('password_recovery.title') }}</h2>
+        <h6>{{ t('password_recovery.instructions') }}</h6>
+        <div>
+            <input type="text" id="username" name="username" required />
+            <button onclick="onSubmit()">{{ t('password_recovery.send_instructions') }}</button>
+        </div>
+    </div>
+    <script>
+        passwordrecoveryInit({
+            labels: {
+                email_sent: "{{ t('password_recovery.email_sent') }}"
+            }
+        });
+    </script>
+    
+{% endblock %}

package/src/views/sidebar.twig

@@ -8,6 +8,14 @@
                 <span>{{ t('users.manage.title') }}</span>
             </a>
         </div>
+
+        <div class="menu-item">    
+            <a href="/{{ root }}/vocabolaries/manage">
+                <i class="fa-solid fa-book-bookmark"></i>
+                <span>{{ t('users.vocabolaries.title') }}</span>
+            </a>
+        </div>
+
     {% endif %}
 
     {% if user.id > 0 %}

package/src/views/users/reset_password.twig

@@ -0,0 +1,36 @@
+{% set showSidebar = false %}
+
+{% extends "../base.twig" %}
+
+{% block extendHead %}
+    <link rel="stylesheet" href="/{{ root }}/css/login.css">
+    <script src="/{{ root }}/js/login/password_recovery.js"></script>
+{% endblock %}
+
+{% block content %}
+    
+    <div class="login-container">
+        <h2><i class="fa-solid fa-key"></i> {{ t('password_recovery.title') }}</h2>
+        <div>
+                        
+            <label for="password">{{ t('users.edit.password') }}</label>
+            <input type="password" id="password" name="password" required />
+            
+            <label for="re_password">{{ t('users.edit.confirm_password') }}</label>
+            <input type="password" id="re_password" name="re_password" required />
+
+            <button onclick="onSubmitReset()">{{ t('users.edit.save') }}</button>
+            
+        </div>
+    </div>
+    <script>
+        passwordrecoveryInit({
+            user: {{ user.id}},
+            token: "{{ user.token}}",
+            labels: {
+                reset_success: "{{ t('password_recovery.password_reset_success') }}"
+            }
+        });
+    </script>
+    
+{% endblock %}

package/src/views/vocabolaries/edit.twig

@@ -0,0 +1,44 @@
+{% set showSidebar = true %}
+{% extends "../base.twig" %}
+
+{% block extendHead %}
+    <link rel="stylesheet" href="/{{ root }}/css/drop-file.css">
+    <script src="/{{ root }}/js/vocabolaries/vocabolaries.js"></script>
+{% endblock %}
+
+{% block content %}
+    <div>
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">    
+            <span>{{ t('users.vocabolaries.title') }}:</span>
+        </h2>
+    </div>
+
+    <div class="dropzone" id="dropzone" draggable="true" tabindex="0">
+        <p>{{ t('users.vocabolaries.drag_drop') }}
+            <button style="margin-left:20px;" id="browseBtn" class="btn" type="button">
+                <i class="fa-solid fa-folder-open" 
+                    style="font-size:24px; color:darkred;">
+                </i>
+            </button>
+        </p>
+        <input id="fileInput" type="file" style="display:none" multiple>
+        <div class="files-list" id="filesList"></div>
+    </div>
+
+    <script>
+        dropFilesInit({
+            labels: {
+                no_files: "{{ t('users.vocabolaries.no_files') }}",
+                remove: "{{ t('users.vocabolaries.remove') }}",
+                upload: "{{ t('users.vocabolaries.upload') }}",
+                uploading: "{{ t('users.vocabolaries.uploading') }}",
+                upload_ok: "{{ t('users.vocabolaries.upload_ok') }}",
+                upload_error: "{{ t('users.vocabolaries.upload_error') }}",
+                invalid_file: "{{ t('users.vocabolaries.invalid_file') }}",
+                max_files: "{{ t('users.vocabolaries.max_files') }}",
+                max_size: "{{ t('users.vocabolaries.max_size') }}"
+            }
+        });
+    </script>
+
+{% endblock %}