Updates & fixes:

-Config toast and dialog controls
-Add forbidden route
-Fix check auth & permission before enter, not so tested
-Fix set data on login
-Display sections according to roles
-Show user contact name after login, still need fix.

src/js/app.js

@@ -36,6 +36,17 @@ var app = new Framework7({
   //   browserHistory: true,
   // },
 
+  dialog: {
+    buttonOk: 'Aceptar',
+    buttonCancel: 'Cancelar',
+  },
+
+  toast: {
+    closeTimeout: 2000,
+    closeButton: true,
+    closeButtonText: "[X]"
+  },
+
   // Input settings
   input: {
     scrollIntoViewOnFocus: device.cordova && !device.electron,

src/js/controllers/check.js

@@ -4,7 +4,7 @@ import user from './../stores/user.js';
 let Check = {
   authorization( { to, resolve } ) {
     const router = this;
-    if (user.getters.isLogged.value){
+    if (!user.getters.isLogged.value){
     //if (!User.isLogged()){
       router.navigate('/login/', { reloadCurrent: true });
     }
@@ -47,7 +47,7 @@ let Check = {
       return;
     }
     reject();
-    router.navigate('/forbidden/');
+    router.navigate('/forbidden/', { reloadCurrent: true });
   },
 };
 

src/js/routes.js

@@ -3,15 +3,21 @@ import AboutPage from '../pages/about.f7.html';
 import home from './routes/home.js';
 import login from './routes/login.js';
 import not_found from './routes/not-found.js';
+import forbidden from './routes/forbidden.js';
+
+import Check from './controllers/check';
 
 let routes = [
   {
     name: 'about',
     path: '/about/',
     component: AboutPage,
+    allowedRoles: [15],
+    beforeEnter: [Check.authorization, Check.permission],
   },
   ...home,
   ...login,
+  ...forbidden,
   ...not_found,
 ]
 

src/js/routes/forbidden.js

@@ -0,0 +1,12 @@
+import ForbiddenPage from '../../pages/forbidden.f7.html';
+
+/*Must be in last position*/
+const forbidden = [
+  {
+    name: 'forbidden',
+    path: '/forbidden/',
+    component: ForbiddenPage
+  }
+];
+
+export default forbidden;

src/js/stores/user.js

@@ -16,12 +16,10 @@ const user = createStore({
           const token = response.data.token;
           delete response.data.token;
           const user = response.data;
-          const roles = [1, 4]; //Owner, Customer, Seller, Deliverer//response.data.roles;
-          console.log(roles);
-          console.log(user);
+          const roles = [1, 4, 14]; //Owner, Customer, Seller, Deliverer//response.data.roles;
           localStorage.setItem('token', token);
           http.defaults.headers.common['Authorization'] = token;
-          dispatch('auth_success', token, user, roles);
+          dispatch('auth_success', {token, user, roles});
           resolve(response);
         })
         .catch(err => {
@@ -47,7 +45,7 @@ const user = createStore({
     auth_request({ state }){
       state.status = 'loading';
     },
-    auth_success({ state }, token, user, roles){
+    auth_success({ state }, { token, user, roles }){
       state.status = 'success';
       state.token = token;
       state.user = user;

src/pages/forbidden.f7.html

@@ -0,0 +1,33 @@
+<template>
+<div class="page" data-name="about">
+  <div class="navbar">
+    <div class="navbar-bg"></div>
+    <div class="navbar-inner sliding">
+      <div class="left">
+        <a href="/" class="link">
+          <i class="material-icons">home</i>
+          <span class="if-not-md">Home</span>
+        </a>
+      </div>
+      <div class="title">Prohibido</div>
+    </div>
+  </div>
+  <div class="page-content">
+    <div class="block-title">Contenido no autorizado</div>
+    <div class="block block-strong">
+      <p>
+        No tiene los permisos requeridos para poder visualizar el contenido solicitado.
+      </p>
+    </div>
+    <div class="block-footer">
+      <p>© Aplicaciones Digitales Cab, 2019-2021 (v${version})</p>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+export default (props, { $f7, $on, $update }) => {
+  let version = $f7.version;
+  return $render;
+};
+</script>

src/pages/home/panel-left.f7.html

@@ -128,26 +128,26 @@
 <script>
 import $ from 'dom7';
 import store from '../../js/stores/index.js';
-import User from '../../js/controllers/users.js';
+import user from '../../js/stores/user.js';
+//import User from '../../js/controllers/users.js';
 
 export default (props, { $f7, $on, $update, }) => {
-
-  let isLogged = false;
+  let isLogged = user.getters.isLogged.value;
   let isSeller = false;
   let isCustomer = false;
   let isDeliverer = false;
   let theme = store.getters.themeName.value;
-
-  const onPanelOpen = () => {
-    if (User.isLogged()){
-      //const userData = JSON.parse(localStorage.getItem("userData"));
-      //const userRoles = userData['userPermissions'];
   const userRoles = user.getters.roles.value;
 
-      isLogged = true,
-      isCustomer = userRoles.includes(4), //Customer,
-      isSeller = userRoles.includes(14), //Seller,
-      isDeliverer =  userRoles.includes(15), //Deliverer,
+  const onPanelOpen = () => {
+    //if (User.isLogged()){
+      //const userData = JSON.parse(localStorage.getItem("userData"));
+      //const userRoles = userData['userPermissions'];
+      //console.log("Roles:",userRoles.includes(4));
+    if (isLogged){
+      isCustomer = userRoles.includes(4); //Customer,
+      isSeller = userRoles.includes(14); //Seller,
+      isDeliverer =  userRoles.includes(15); //Deliverer,
       $update();
     }
   };

src/pages/home/panel-right.f7.html

@@ -17,7 +17,7 @@
                   <div class="item-title item-label">Usuario</div>
                   <div class="item-input-wrap">
                     <i class="icon f7-icons color-blue">person</i>
-                    <span id="menu-username"></span>
+                    <span id="menu-username">${displayName}</span>
                   </div>
                 </div>
               </div>
@@ -67,8 +67,9 @@ import user from '../../js/stores/user.js';
 //import User from '../../js/controllers/users.js';
 
 export default (props, { $f7, $on, $update, $f7router }) => {
-  let isLogged = user.getters.isLogged.value;
   let theme = store.getters.themeName.value;
+  let isLogged = user.getters.isLogged.value;
+  let displayName = user.getters.displayName.value['contactName'] || '';
 
   const onPanelOpen = () => {
     $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
@@ -78,20 +79,13 @@ export default (props, { $f7, $on, $update, $f7router }) => {
     //   isLogged = true;
     //   $update();
     // }
-    //console.log(user.getters.displayName.value);
-    console.log(user.getters.isLogged.value);
-    console.log(user.getters.authStatus.value);
-    console.log(user.getters.token.value);
-    console.log(user.getters.roles.value);
-    if (isLogged){
-
-    }
   };
 
   const logout = () => {
     //User.logOff();
     user.dispatch('logOut').then( () => {
       $f7router.navigate('/');
+      $f7.toast.show( { text: "Ha cerrado sesión." });
     });
   };
 

src/pages/login.f7.html

@@ -65,11 +65,11 @@ export default (props, { $f7, $on, $update, $f7router }) => {
     // var username = $('#username').val();
     // var password = $('#password').val();
     // User.checkLogin(username, password).then(function(result){
-    user.dispatch('logIn', data)
-    .then(function(result){
+    user.dispatch('logIn', data).then(function(result){
       $f7.preloader.hide();
       if (result.status === 200){
         $f7router.navigate('/');
+        $f7.toast.show( { text: "Ha iniciado sesión." });
       }
       else{
         $f7.toast.show( { text: result.message });