@igea/oac_frontend 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/chpigea/oac_frontend#readme",
   "dependencies": {
-    "@igea/oac_jwt_helpers": "1.0.6",
+    "@igea/oac_jwt_helpers": "1.0.10",
     "axios": "1.10.0",
     "cookie-parser": "1.4.7",
     "express": "5.1.0",

package/src/controllers/users.js

@@ -1,28 +1,29 @@
 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) => {
-        res.render('users/manage.twig', { 
+        let data = new DataModel(req, {  
             root: serviceName, 
             title: 'User Management',
-            users: [
-                { id: 1, name: 'alice',     role: 'admin' },
-                { id: 2, name: 'bob',       role: 'user' },
-                { id: 3, name: 'charlie',   role: 'user' },
-            ]
-        });
+        });    
+        res.render('users/manage.twig', data.toJson()); 
     });
 
     /**
      * @route   GET /users/:id: redirect to the user page with user details
      */
     router.get('/:id', (req, res) => {
-
+        let data = new DataModel(req, {  
+            root: serviceName, 
+            title: 'User Edit',
+            id: req.params.id
+        });    
+        res.render('users/edit.twig', data.toJson());    
     });
 
     /**

package/src/index.js

@@ -78,7 +78,8 @@ getPort.default({
         res.render('login', { root: serviceName, title: 'Login' });
     });
     app.get(`/${serviceName}/home`, (req, res) => {
-        res.render('home', { root: serviceName, title: 'Login' });
+        let user = req.user;
+        res.render('home', { root: serviceName, title: 'Login', cur_id: user.id || 0 });
     });
     // ---------------------------------------------------------------------
     // Start listing on the specified port

package/src/locales/en.json

@@ -19,6 +19,15 @@
             "delete": "Delete",
             "new": "New"
         },
+        "edit": {
+            "title": "User",
+            "update": "Update",
+            "new": "New",
+            "password": "Password",
+            "confirm_password": "Confirm password",
+            "save": "Save",
+            "cancel": "Cancel"
+        },
         "profile": {
             "title": "Profile"
         },

package/src/locales/it.json

@@ -19,6 +19,15 @@
             "delete": "Elimina",
             "new": "Nuovo"
         },
+        "edit": {
+            "title": "Utente",
+            "update": "Modifica",
+            "new": "Nuovo",
+            "password": "Password",
+            "confirm_password": "Conferma password",
+            "save": "Salva",
+            "cancel": "Annulla"
+        },
         "profile": {
             "title": "Profilo"
         },

package/src/models/DataModel

@@ -0,0 +1,19 @@
+
+class DataModel {
+
+    constructor(req, options = {}){
+        this.user = req.user || {};
+        this.options = options;
+    }
+
+    toJson(){   
+        return { 
+            user: this.user, 
+            cur_id: this.user.id || 0,
+            ...this.options 
+        };
+    }
+
+}
+
+module.exports = DataModel;

package/src/public/js/app/vue-users-edit.js

@@ -0,0 +1,49 @@
+const {createApp} = Vue;
+
+const elementId = 'edit-user';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const el = document.getElementById(elementId);
+
+    const app = createApp({
+        delimiters: ['{%', '%}'],
+        data() {
+            return {
+                root: el.dataset.root,
+                labels: {
+                    role_sudo: el.dataset.role_sudo,
+                    role_admin: el.dataset.role_admin,
+                    role_editor: el.dataset.role_editor,
+                    role_reader: el.dataset.role_reader,
+                },
+                user: {}       
+            }    
+        },
+        mounted() {
+            this.getUser();
+        },
+        methods: {
+            getUser() {
+                /*
+                axios.get("/backend/users/").then(response => {
+                    var data = response.data;
+                    if(data.success) {
+                        this.users = data.data;
+                    } else {
+                        console.error("Failed to fetch users:", data.message);
+                    }
+                }).catch(error => {
+                    console.log(error);
+                });
+                */
+            },
+            save() {
+                // Here you would also make an API call to save the user to the server
+            },
+            cancel() {
+                window.history.back();
+            }
+        }
+    });
+    app.mount(`#${elementId}`);
+});

package/src/public/js/app/vue-users-manage.js

@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
         data() {
             return {
                 root: el.dataset.root,
+                cur_id: parseInt(el.dataset.cur_id) || 0,
                 labels: {
                     role_sudo: el.dataset.role_sudo,
                     role_admin: el.dataset.role_admin,
@@ -48,7 +49,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.users = this.users.filter(user => user.id !== userId);
             },
             editUser(userId) {
-                window.location.href = `/${this.root}/users/edit/${userId}`;
+                window.location.href = `/${this.root}/users/${userId}`;
+            },
+            newUser() {
+                window.location.href = `/${this.root}/users/0`;
             }
         }
     });

package/src/views/home.twig

@@ -1,8 +1,6 @@
 {% set showSidebar = true %}
 {% extends "base.twig" %}
 
-
-
 {% block content %}
     <h2>Home Page</h2>
     <p>{{ mainContent }}</p>

package/src/views/sidebar.twig

@@ -1,17 +1,24 @@
 {% block sidebar %}
     
-    <div class="menu-item">    
-        <a href="/{{ root }}/users/manage">
-            <i class="fa-solid fa-users-between-lines"></i>
-            <span>{{ t('users.manage.title') }}</span>
-        </a>
-    </div>
+    {% if user.id > 0 %}
+
+        <!-- abilitare solo per utenti ADMIN -->
+        {% if cur_role != "admin" %}
+            <div class="menu-item">    
+                <a href="/{{ root }}/users/manage">
+                    <i class="fa-solid fa-users-between-lines"></i>
+                    <span>{{ t('users.manage.title') }}</span>
+                </a>
+            </div>
+        {% endif %}
+
+        <div class="menu-item">
+            <a href="/{{ root }}/users/{{ cur_id }}">
+                <i class="fa-solid fa-id-badge"></i>
+                {{ t('users.profile.title') }}
+            </a>
+        </div>
+
+    {% endif %}
 
-    <div class="menu-item">
-        <a href="/{{ root }}/users/profile">
-            <i class="fa-solid fa-id-badge"></i>
-            {{ t('users.profile.title') }}
-        </a>
-    </div>
-    
 {% endblock %}

package/src/views/users/edit.twig

@@ -0,0 +1,98 @@
+{% set showSidebar = true %}
+{% extends "../base.twig" %}
+
+{% block extendHead %}
+    <script src="/{{ root }}/js/app/vue-users-edit.js"></script>
+{% endblock %}
+
+{% block content %}
+
+    <div id="edit-user"
+        data-root="{{ root }}"
+        data-role_sudo="{{ t('users.role.sudo') }}" 
+        data-role_admin="{{ t('users.role.admin') }}" 
+        data-role_editor="{{ t('users.role.editor') }}" 
+        data-role_reader="{{ t('users.role.reader') }}" 
+    >
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">
+            {% if id == 0 %}
+                <span>{{ t('users.edit.title') }}: {{ t('users.edit.new') }}</span>
+            {% else %}
+                <span>{{ t('users.edit.title') }} #{{id}}: {{ t('users.edit.update') }}</span>
+            {% endif %}
+        </h2>
+
+        <form class="container mt-4" style="width:80%; margin-left:10%;">
+            <div class="row g-3">
+                
+                <!-- Name -->
+                <div class="col-md-6">
+                <label for="name" class="form-label">{{ t('users.manage.name') }}</label>
+                <input type="text" class="form-control" id="name" placeholder="">
+                <div id="nameHelp" class="form-text"></div>
+                </div>
+                
+                <!-- Surname -->
+                <div class="col-md-6">
+                <label for="surname" class="form-label">{{ t('users.manage.surname') }}</label>
+                <input type="text" class="form-control" id="surname" placeholder="">
+                <div id="surnameHelp" class="form-text"></div>
+                </div>
+                
+                <!-- Username -->
+                <div class="col-md-6">
+                <label for="username" class="form-label">{{ t('users.manage.username') }}</label>
+                <input type="text" class="form-control" id="username" placeholder="">
+                <div id="usernameHelp" class="form-text"></div>
+                </div>
+                
+                <!-- Email -->
+                <div class="col-md-6">
+                <label for="email" class="form-label">{{ t('users.manage.email') }}</label>
+                <input type="email" class="form-control" id="email" placeholder="">
+                <div id="emailHelp" class="form-text text-danger">
+                    We'll never share your email with anyone else.
+                </div>
+                </div>
+                
+                <!-- Password -->
+                <div class="col-md-6">
+                <label for="password" class="form-label">{{ t('users.edit.password') }}</label>
+                <input type="password" class="form-control" id="password" placeholder="">
+                <div id="passwordHelp" class="form-text text-danger">
+                    We'll never share your email with anyone else.
+                </div>
+                </div>
+                
+                <!-- Confirm Password -->
+                <div class="col-md-6">
+                <label for="password2" class="form-label">{{ t('users.edit.confirm_password') }}</label>
+                <input type="password" class="form-control" id="password2" placeholder="">
+                <div id="password2Help" class="form-text text-danger">
+                    We'll never share your email with anyone else.
+                </div>
+                </div>
+                
+                <!-- Role -->
+                <div class="col-md-6">
+                    <label for="role" class="form-label">Role</label>
+                    <select id="role" class="form-select">
+                        <option value="0">{{ t('users.role.sudo') }}</option>
+                        <option value="1">{{ t('users.role.admin') }}</option>
+                        <option value="2">{{ t('users.role.editor') }}</option>
+                        <option value="3">{{ t('users.role.reader') }}</option>
+                    </select>
+                </div>
+                
+                <!-- Buttons -->
+                <div class="col-12 text-center mt-4">
+                    <button @click="save()" type="submit" class="btn btn-primary me-2">{{ t('users.edit.save') }}</button>
+                    <button @click="cancel()" type="button" class="btn btn-secondary">{{ t('users.edit.cancel') }}</button>
+                </div>
+
+            </div>
+        </form>
+
+    </div>
+
+{% endblock %}

package/src/views/users/manage.twig

@@ -8,45 +8,51 @@
 
 {% block content %}
 
-    <h2 style="display:flex; justify-content:space-between; align-items:center;">
-        <span>{{ t('users.manage.title') }}</span>
-        <i style="color:gray; cursor:pointer; font-size:24px;"
-            class="fa-solid fa-user-plus" title="{{ t('users.manage.new') }}"></i>
-    </h2>
-    <table id="manage-users" class="table"
+    <div id="manage-users"
         data-root="{{ root }}"
         data-role_sudo="{{ t('users.role.sudo') }}" 
         data-role_admin="{{ t('users.role.admin') }}" 
         data-role_editor="{{ t('users.role.editor') }}" 
         data-role_reader="{{ t('users.role.reader') }}" 
+        data-cur_id="{{ cur_id }}"
     >
-        <thead>
-            <tr>
-                <td>#</td>
-                <td>{{ t('users.manage.name') }}</td>
-                <td>{{ t('users.manage.surname') }}</td>
-                <td>{{ t('users.manage.username') }}</td>
-                <td>{{ t('users.manage.email') }}</td>
-                <td>{{ t('users.manage.role') }}</td>
-                <td></td>
-                <td></td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="user in users">
-                <td v-text="user.id"></td>
-                <td v-text="user.name"></td>
-                <td v-text="user.surname"></td>
-                <td v-text="user.username"></td>
-                <td v-text="user.email"></td>
-                <td v-text="roleByCode(user.role)"></td>
-                <td @click="editUser(user.id)"><i style="cursor:pointer; color:blue" 
-                    class="fa-solid fa-pen-to-square" title="{{ t('users.manage.edit') }}"></i>
-                </td>
-                <td @click="deleteUser(user.id)"><i style="cursor:pointer; color:red" 
-                    class="fa-solid fa-trash-can" title="{{ t('users.manage.delete') }}"></i>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+        <h2 style="display:flex; justify-content:space-between; align-items:center;">
+            <span>{{ t('users.manage.title') }}</span>
+            <i @click="newUser()" style="color:gray; cursor:pointer; font-size:24px;"
+                class="fa-solid fa-user-plus" title="{{ t('users.manage.new') }}"></i>
+        </h2>
+        <table class="table">
+            <thead>
+                <tr>
+                    <td>#</td>
+                    <td>{{ t('users.manage.name') }}</td>
+                    <td>{{ t('users.manage.surname') }}</td>
+                    <td>{{ t('users.manage.username') }}</td>
+                    <td>{{ t('users.manage.email') }}</td>
+                    <td>{{ t('users.manage.role') }}</td>
+                    <td></td>
+                    <td></td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="user in users">
+                    <td v-text="user.id"></td>
+                    <td v-text="user.name"></td>
+                    <td v-text="user.surname"></td>
+                    <td v-text="user.username"></td>
+                    <td v-text="user.email"></td>
+                    <td v-text="roleByCode(user.role)"></td>
+                    <td @click="editUser(user.id)"><i style="cursor:pointer; color:blue" 
+                        class="fa-solid fa-pen-to-square" title="{{ t('users.manage.edit') }}"></i>
+                    </td>
+                    <td v-if="cur_id != user.id" @click="deleteUser(user.id)">
+                        <i style="cursor:pointer; color:red" 
+                            class="fa-solid fa-trash-can" title="{{ t('users.manage.delete') }}">
+                        </i>
+                    </td>
+                    <td v-else></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 {% endblock %}