@igea/oac_frontend 1.0.7 → 1.0.8

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@igea/oac_frontend",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Frontend service for the OAC project",
   "main": "src/index.js",
   "scripts": {
     "start": "cross-env NODE_ENV=production node src/index.js",
-    "dev": "cross-env NODE_ENV=development nodemon src/index.js",
+    "dev": "cross-env NODE_ENV=development nodemon src/index.js --ext js,twig",
     "build:scss": "sass src/scss/main.scss src/public/css/style.css",
     "watch:scss": "sass --watch src/scss/main.scss:src/public/css/style.css"
   },

package/src/index.js

@@ -12,6 +12,7 @@ i18n.configure({
   directory: path.join(__dirname, 'locales'),
   queryParameter: 'lang',
   autoReload: true,
+  objectNotation: true,
   updateFiles: false, // don't auto-create keys
   api: {
     '__': 't'
@@ -61,7 +62,7 @@ getPort.default({
 
 
     app.get(`/${serviceName}`, (req, res) => {
-        res.render('base', { root: serviceName, title: 'Home Page', message: 'Hello from Twig!' });
+        res.render('login', { root: serviceName, title: 'Home Page', message: 'Hello from Twig!' });
     });
 
     // Start listing on the specified port

package/src/locales/en.json

@@ -1,3 +1,10 @@
 {
-    "welcome": "Welcome"
+    "welcome": "Welcome",
+    "login": {
+        "title": "Login",
+        "user": "Email or Username",
+        "password": "Password",
+        "sign_in": "Sign in",
+        "anonymous": "Anonymous"
+    }
 }

package/src/locales/it.json

@@ -1,3 +1,10 @@
 {
-    "welcome": "Benvenuto"
+    "welcome": "Benvenuto",
+    "login": {
+        "title": "Accesso",
+        "user": "Email or Nome utente",
+        "password": "Password",
+        "sign_in": "Accedi",
+        "anonymous": "Anonimo"
+    }
 }

package/src/public/css/login.css

@@ -0,0 +1,40 @@
+.login-container {
+    background: white;
+    padding: 2rem;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    width: 300px;
+    margin: auto;
+}
+.login-container h2 {
+    margin-top: 0;
+    text-align: center;
+}
+.login-container label {
+    display: block;
+    margin: 0.5rem 0 0.25rem;
+}
+.login-container input[type="text"],
+.login-container input[type="password"] {
+    width: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+}
+.login-container button {
+    width: 100%;
+    padding: 0.5rem;
+    margin-top: 1rem;
+    background: #3498db;
+    border: none;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+    border-radius: 4px;
+}
+.login-container button:hover {
+    background: #2980b9;
+}
+.login-message{
+    color: red;
+    font-size: 12px;
+}

package/src/public/css/style.css

@@ -1,7 +1,52 @@
-body {
+html, body {
   font-family: "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
-  color: red;
+  color: #3498db;
+  height: 100%;
+}
+
+.site-header {
+  background: #333;
+  color: white;
+  padding: 1em;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.site-footer {
+  background: #333;
+  color: white;
+  padding: 1em;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+}
+
+.container {
+  display: flex;
+  margin-top: 140px;
+  margin-bottom: 80px;
+  min-height: calc(100vh - 220px);
+  overflow: auto;
+}
+
+.sidebar {
+  width: 200px;
+  background: #f4f4f4;
+  padding: 1em;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.main-content {
+  flex: 1;
+  padding: 1em;
+  overflow-y: auto;
 }
 
 /*# sourceMappingURL=style.css.map */

package/src/public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/_typography.scss","../../scss/_variables.scss"],"names":[],"mappings":"AAGA;EACI,aCFS;EDGT;EACA,OCNY","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/_typography.scss","../../scss/_variables.scss"],"names":[],"mappings":"AAGA;EACI,aCFS;EDGT;EACA,OCNY;EDOZ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAAQ;EACR;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAAW;EACX;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA","file":"style.css"}

package/src/scss/_typography.scss

@@ -1,8 +1,51 @@
 @use './variables' as *;
 @use './functions' as *;
 
-body {
+html, body {
     font-family: $font-stack;
     font-size: rem(16);
     color: $primary-color;
-}
+    height: 100%
+}
+
+.site-header {
+    background: #333;
+    color: white;
+    padding: 1em;
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+.site-footer {
+    background: #333;
+    color: white;
+    padding: 1em;
+    position: fixed;
+    bottom: 0; left: 0;
+    width: 100%;
+    z-index: 100;
+}
+
+.container {
+    display: flex;
+    margin-top: 140px;
+    margin-bottom: 80px;
+    min-height: calc(100vh - 220px);
+    overflow: auto;
+}
+
+.sidebar {
+    width: 200px;
+    background: #f4f4f4;
+    padding: 1em;
+    flex-shrink: 0;
+    overflow-y: auto;
+}
+
+.main-content {
+    flex: 1;
+    padding: 1em;
+    overflow-y: auto;
+}

package/src/views/base.twig

@@ -1,11 +1,28 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>{{ title }}</title>
-  <link rel="stylesheet" type="text/css" href="/{{ root }}/css/style.css">
+    <meta charset="UTF-8">
+    <title>{{ t('welcome') ~ ': ' ~ title }}</title>
+    <link rel="stylesheet" href="/{{ root }}/css/style.css">
+    {% block extendHead %}{% endblock %}
 </head>
 <body>
-  <h1>{{ message }}</h1>
-  <h2>{{ t('welcome') }}</h2>
+    {% include 'header.twig' %}
+    
+    <div class="container">
+        
+        {% if showSidebar %}
+          <aside class="sidebar">
+              {% block sidebar %}
+              {% endblock %}
+          </aside>
+        {% endif %}
+
+        <main class="main-content">
+            {% block content %}{% endblock %}
+        </main>
+    </div>
+    
+    {% include 'footer.twig' %}
 </body>
 </html>

package/src/views/footer.twig

@@ -0,0 +1,3 @@
+<footer class="site-footer">
+    <p>&copy; {{ "now"|date("Y") }} IGEA: all rights reserved.</p>
+</footer>

package/src/views/header.twig

@@ -0,0 +1,7 @@
+<header class="site-header">
+    <h1>OAC Site</h1>
+    <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+    </nav>
+</header>

package/src/views/home.twig

@@ -0,0 +1,15 @@
+{% extends "base.twig" %}
+
+{% block sidebar %}
+    <ul>
+        <li><a href="#">Dashboard</a></li>
+        <li><a href="#">Settings</a></li>
+        <li><a href="#">Profile</a></li>
+    </ul>
+{% endblock %}
+
+{% block content %}
+    <h2>Home Page</h2>
+    <p>{{ mainContent }}</p>
+{% endblock %}
+

package/src/views/login.twig

@@ -0,0 +1,27 @@
+{% set showSidebar = false %}
+
+{% extends "base.twig" %}
+
+{% block extendHead %}
+    <link rel="stylesheet" href="/{{ root }}/css/login.css">
+{% endblock %}
+
+{% block content %}
+    
+    <div class="login-container">
+        <h2>{{ t('login.title') }}</h2>
+        <form action="/{{ root }}/login" method="POST">
+            <label for="username">{{ t('login.user') }}</label>
+            {% if invalidLogin %}
+                <span class=".login-message">Invalid credentials</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 type="submit">{{ t('login.sign_in') }}</button>
+            <button type="submit" style="background: #ff0000">
+                {{ t('login.anonymous') }}</button>
+        </form>
+    </div>
+
+{% endblock %}