@igea/oac_frontend 1.0.14 → 1.0.16

package/package.json

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

package/src/controllers/users.js

@@ -1,31 +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) => {
-        let user = req.user;
-        res.render('users/manage.twig', { 
+        let data = new DataModel(req, {  
             root: serviceName, 
             title: 'User Management',
-            cur_id: user.id || 0
-        });
+        });    
+        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 user = req.user;
-        res.render('users/edit.twig', { 
+        let data = new DataModel(req, {  
             root: serviceName, 
             title: 'User Edit',
-            id: req.params.id,
-            cur_id: user.id || 0
-        });
+            id: req.params.id
+        });    
+        res.render('users/edit.twig', data.toJson());    
     });
 
     /**

package/src/index.js

@@ -7,6 +7,7 @@ const path = require("path");
 const i18n = require('i18n');
 const jwtLibFactory = require('@igea/oac_jwt_helpers')
 const serviceName = "frontend"
+const DataModel = require('./models/DataModel');
 const jwtLib = jwtLibFactory({
     secret: process.env.JWT_SECRET || config.jwt_secret,
     excludePaths: [
@@ -78,7 +79,11 @@ getPort.default({
         res.render('login', { root: serviceName, title: 'Login' });
     });
     app.get(`/${serviceName}/home`, (req, res) => {
-        res.render('home', { root: serviceName, title: 'Login' });
+        let data = new DataModel(req, {  
+            root: serviceName, 
+            title: 'Home',
+        });  
+        res.render('home', data.toJson());
     });
     // ---------------------------------------------------------------------
     // Start listing on the specified port

package/src/locales/en.json

@@ -22,7 +22,11 @@
         "edit": {
             "title": "User",
             "update": "Update",
-            "new": "New"
+            "new": "New",
+            "password": "Password",
+            "confirm_password": "Confirm password",
+            "save": "Save",
+            "cancel": "Cancel"
         },
         "profile": {
             "title": "Profile"

package/src/locales/it.json

@@ -22,7 +22,11 @@
         "edit": {
             "title": "Utente",
             "update": "Modifica",
-            "new": "Nuovo"
+            "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,57 @@
+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: {
+                    name: "",
+                    surname: "",
+                    username: "",
+                    email: "",
+                    password: "",
+                    confirm_password: "",
+                    role: 2
+                }       
+            }    
+        },
+        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/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

@@ -22,6 +22,77 @@
             {% 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 v-model="user.name" 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 v-model="user.surname" 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 v-model="user.username" 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 v-model="user.email" 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 v-model="user.password" 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 v-model="user.confirm_password" 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 v-model.number="user.role" 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 %}