-Refactor/change user authentication pt2

src/js/controllers/check.js

@@ -1,11 +1,11 @@
-import User from './users.js';
+//import User from './users.js';
-//import user from './../stores/user.js';
+import user from './../stores/user.js';
 
 let Check = {
   authorization( { to, resolve } ) {
     const router = this;
-    //if (user.isLogged.value){
+    if (user.getters.isLogged.value){
-    if (!User.isLogged()){
+    //if (!User.isLogged()){
       router.navigate('/login/', { reloadCurrent: true });
     }
     else{
@@ -14,9 +14,9 @@ let Check = {
   },
   permission( { to, resolve, reject } ) {
     const router = this;
-    const userData = JSON.parse(localStorage.getItem("userData"));
+    //const userData = JSON.parse(localStorage.getItem("userData"));
-    const userRoles = userData['userPermissions'];
+    //const userRoles = userData['userPermissions'];
-    //const userRoles = user.roles.value;
+    const userRoles = user.getters.roles.value;
 
     let currentIndex = -1;
     for (let i = 0; i < router.routes.length; i++) {

src/js/routes/login.js

@@ -1,16 +1,18 @@
 import LoginPage from '../../pages/login.f7.html';
 
-import User from '../controllers/users.js';
+//import User from '../controllers/users.js';
+import user from '../stores/user.js';
 
 function checkAuth( { resolve } ) {
   const router = this;
-  if (User.isLogged()){
+  if (user.getters.isLogged.value){
+  //if (User.isLogged()){
     router.navigate('/', { reloadCurrent: true });
   }
   else {
-     if (router.currentRoute.name !== "login"){
+    if (router.currentRoute.name !== "login"){
-       resolve('/login/');
+      resolve('/login/');
-     }
+    }
   }
 }
 

src/js/stores/user.js

@@ -3,7 +3,7 @@ import http from './../api/config.js';
 
 const user = createStore({
   state: {
-    status: '',
+    status: localStorage.getItem('token') ? 'success' : '',
     token: localStorage.getItem('token') || '',
     user: {},
     roles: [],
@@ -12,11 +12,13 @@ const user = createStore({
     logIn({ state, dispatch }, data){
       return new Promise((resolve, reject) => {
         dispatch('auth_request');
-        http.post('/user/login', data)
+        http.post('/user/login', data).then(response => {
-        .then(response => {
           const token = response.data.token;
-          const user = response.data.user;
+          delete response.data.token;
-          const roles = response.data.roles;
+          const user = response.data;
+          const roles = [1, 4]; //Owner, Customer, Seller, Deliverer//response.data.roles;
+          console.log(roles);
+          console.log(user);
           localStorage.setItem('token', token);
           http.defaults.headers.common['Authorization'] = token;
           dispatch('auth_success', token, user, roles);
@@ -29,9 +31,10 @@ const user = createStore({
         });
       });
     },
-    logOut(){
+    logOut({ state, dispatch }){
       return new Promise((resolve, reject) => {
         dispatch('logout');
+        localStorage.removeItem('token')
         http.defaults.headers.common['Authorization'];
         resolve();
       });
@@ -41,16 +44,16 @@ const user = createStore({
       state.status = '';
       state.token = '';
     },
-    auth_request(state){
+    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;
       state.roles = roles;
     },
-    auth_error(state){
+    auth_error({ state }){
       state.status = 'error'
     },
 //End mutations
@@ -59,12 +62,18 @@ const user = createStore({
     isLogged({ state }) {
       return !!state.token;
     },
+    token({ state }) {
+      return state.token;
+    },
     authStatus({ state }) {
       return state.status;
     },
     roles({ state }){
       return state.roles;
     },
+    displayName({ state }){
+      return state.user;
+    }
   },
 })
 

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

@@ -27,7 +27,6 @@
                 </div>
               </div>
             </li>
-            
             <li class="accordion-item">
               <a href="#" class="item-content item-link">
                 <div class="item-inner">
@@ -43,6 +42,7 @@
                 </div>
               </div>
             </li>
+            ${isSeller && $h`
             <li class="accordion-item">
               <a href="#" class="item-content item-link">
                 <div class="item-inner">
@@ -61,6 +61,8 @@
                 </div>
               </div>
             </li>
+            `}
+            ${isDeliverer && $h`
             <li class="accordion-item">
               <a href="#" class="item-content item-link">
                 <div class="item-inner">
@@ -78,7 +80,9 @@
                 </div>
               </div>
             </li>
-            <li id="is-customer-${isCustomer}" class="accordion-item" data-some="${isCustomer}">
+            `}
+            ${isCustomer && $h`
+            <li id="is-customer" class="accordion-item" data-some="${isCustomer}">
               <a href="#" class="item-content item-link">
                 <div class="item-inner">
                   <div class="item-title">Clientes</div>
@@ -97,6 +101,7 @@
                 </div>
               </div>
             </li>
+            `}
             <li class="accordion-item">
               <a href="#" class="item-content item-link">
                 <div class="item-inner">
@@ -135,8 +140,9 @@ export default (props, { $f7, $on, $update, }) => {
 
   const onPanelOpen = () => {
     if (User.isLogged()){
-      const userData = JSON.parse(localStorage.getItem("userData"));
+      //const userData = JSON.parse(localStorage.getItem("userData"));
-      const userRoles = userData['userPermissions'];
+      //const userRoles = userData['userPermissions'];
+      const userRoles = user.getters.roles.value;
 
       isLogged = true,
       isCustomer = userRoles.includes(4), //Customer,

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

@@ -63,24 +63,36 @@
 <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 }) => {
+export default (props, { $f7, $on, $update, $f7router }) => {
-  let isLogged = false;
+  let isLogged = user.getters.isLogged.value;
   let theme = store.getters.themeName.value;
 
   const onPanelOpen = () => {
     $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
-    if (User.isLogged()){
+    // if (User.isLogged()){
-      let data = JSON.parse(localStorage.getItem("userData"));
+    //   let data = JSON.parse(localStorage.getItem("userData"));
-      $("#menu-username").text(data.contactName);
+    //   $("#menu-username").text(data.contactName);
-      isLogged = true;
+    //   isLogged = true;
-      $update();
+    //   $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.logOff();
+    user.dispatch('logOut').then( () => {
+      $f7router.navigate('/');
+    });
   };
 
   const setTheme = () => {

src/pages/login.f7.html

@@ -10,7 +10,7 @@
               <div class="item-inner">
                 <div class="item-title item-label">Usuario</div>
                 <div class="item-input-wrap">
-                  <input id="username" type="text" name="username" placeholder="Ingresa tu usuario o email" />
+                  <input id="username" type="text" name="username" value="${username}" @input="${updateUsername}" placeholder="Ingresa tu usuario o email" autocomplete="off" />
                 </div>
               </div>
             </li>
@@ -18,7 +18,7 @@
               <div class="item-inner">
                 <div class="item-title item-label">Contraseña</div>
                 <div class="item-input-wrap">
-                  <input id="password" type="password" name="password" placeholder="Ingresa tu contraseña" autocomplete="off" @keypress="${pressEnter}" />
+                  <input id="password" type="password" name="password" alue="${password}" @input="${updatePassword}" placeholder="Ingresa tu contraseña" autocomplete="off" @keypress="${pressEnter}" />
                 </div>
               </div>
             </li>
@@ -38,18 +38,37 @@
 </template>
 <script>
 import $ from 'dom7';
-import User from '../js/controllers/users.js';
+//import User from '../js/controllers/users.js';
+import user from '../js/stores/user.js';
 
 export default (props, { $f7, $on, $update, $f7router }) => {
   let version = $f7.version;
+  let username = '';
+  let password = '';
+
+  const updateUsername = (e) => {
+    username = e.target.value;
+    $update();
+  };
+
+  const updatePassword = (e) => {
+    password = e.target.value;
+    $update();
+  }
 
   const checkLogin = () => {
     $f7.preloader.show();
-    var username = $('#username').val();
+    const data = {
-    var password = $('#password').val();
+      UserData : username,
-    User.checkLogin(username, password).then(function(result){
+      UserPassword : password,
+    };
+    // var username = $('#username').val();
+    // var password = $('#password').val();
+    // User.checkLogin(username, password).then(function(result){
+    user.dispatch('logIn', data)
+    .then(function(result){
       $f7.preloader.hide();
-      if (result === true){
+      if (result.status === 200){
         $f7router.navigate('/');
       }
       else{