user interface

src/axios/auth.js

@@ -12,3 +12,8 @@ export async function login (user, pass) {
     .post(url, user, requestDataFormUrlEncoded())
   return response
 }
+export async function logout () {
+  const url = `${REQUEST_DIR}auth/logout`
+  const response = await axios.post(url, requestDataFormUrlEncoded())
+  return response
+}

src/components/PatientFile.vue

@@ -416,7 +416,7 @@
 
 <script>
   import { getMunicipalities, getHealthAreas } from '@/axios/nomenclators'
-import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex'
   export default {
     name: 'PatientFile',
 

src/layouts/home/AppBar.vue

@@ -35,8 +35,8 @@
       />
       <v-menu
         offset-y
-        max-width="175"
-        min-width="175"
+        max-width="200"
+        min-width="200"
       >
         <template v-slot:activator="{ on, attrs }">
           <v-btn
@@ -58,10 +58,9 @@
                   color="#2D89C5"
                   v-on="on"
                 >
-                  mdi-google-assistant
+                  mdi-account
                 </v-icon>
                 <svg
-                  xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 36 36"
                   height="12px"
                   width="12px"
@@ -79,6 +78,19 @@
             </v-tooltip>
           </v-btn>
         </template>
+        <v-lazy>
+          <v-card>
+            <v-list
+              dense
+              style="margin-left: 16px"
+            >
+              <v-list-item-title class="h3">
+                <b>
+                  {{ user.name }}
+                </b>
+              </v-list-item-title>
+              <v-list-item-subtitle>{{ user.role }}</v-list-item-subtitle>
+            </v-list>
             <v-list
               dense
             >
@@ -101,6 +113,30 @@
                 </v-list-item-content>
               </v-list-item>
             </v-list>
+            <v-list
+              dense
+            >
+              <v-list-item
+                v-for="item in globalActions"
+                :key="item.title"
+                @click="getMeOut"
+              >
+                <v-list-item-avatar>
+                  <v-avatar
+                    fab
+                  >
+                    <v-icon color="#2D89C5">
+                      mdi-logout
+                    </v-icon>
+                  </v-avatar>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                  <v-list-item-title>Cerrar Sesión</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-lazy>
       </v-menu>
     </v-app-bar>
 
@@ -112,6 +148,7 @@
 </template>
 
 <script>
+  import { mapGetters } from 'vuex'
   export default {
     name: 'HomeAppBar',
 
@@ -121,7 +158,7 @@
 
     data: () => ({
       globalActions: [
-        { link: 'lol', title: 'pepe', icon: 'mdi-account' },
+        { link: 'lol', title: 'Registrar Usuario', icon: 'mdi-account-plus' },
       ],
       items: [
         'Home',
@@ -130,7 +167,17 @@
         'Pro',
       ],
     }),
+    computed: {
+      ...mapGetters(['user']),
+    },
     methods: {
+      getMeOut () {
+        console.log(this.user.name)
+        /* this.clearUser()
+        localStorage.commit('tkn', null)
+        localStorage.commit('usr', null) */
+        // Todo: SEND LOGOUT REQUEST
+      },
       showHideDrawer () {
         this.$store.commit('setDrawer')
       },

src/store/getters.js

@@ -11,4 +11,5 @@ export default {
   healthStatuses: state => state.healthStatuses,
   pIndex: state => state.pIndex,
   patient: state => state.patient,
+  user: state => state.user,
 }

src/store/mutations.js

@@ -40,4 +40,7 @@ export default {
   clearPatient (state) {
     state.patient = Object.assign({}, DEFAULT_PATIENT)
   },
+  setUser (state, data) {
+    state.user = Object.assign({}, data)
+  },
 }

src/store/state.js

@@ -58,4 +58,5 @@ export default {
     tipo_contacto: '',
     lugar_contacto: '',
   },
+  user: null,
 }

src/views/sections/Login.vue

@@ -22,7 +22,7 @@
                       :src="require('@/assets/icon.png')"
                       alt="SIGI"
                     >
-                  </v-avatar>SIGI / Inicio de sesión
+                  </v-avatar> SIGI / Inicio de sesión
                 </v-toolbar-title>
               </v-toolbar>
               <v-card-text>
@@ -38,8 +38,8 @@
                     name="login"
                     label="Coreo Electrónico"
                     required
-
                     type="text"
+                    @keydown.native.enter="submit"
                   />
                   <v-text-field
                     id="password"
@@ -57,6 +57,8 @@
               <v-card-actions>
                 <v-spacer />
                 <v-btn
+                  color="green"
+                  dark
                   :disabled="!valid"
                   submit
                   :loading="tryLogin"
@@ -74,7 +76,7 @@
 </template>
 <script>
   import { login } from '@/axios/auth'
-  import { encrypt, decrypt } from '@/utils/enc'
+  import { mapMutations } from 'vuex'
   export default {
     name: 'Login',
     data: () => ({
@@ -94,6 +96,7 @@
       checkbox: false,
     }),
     methods: {
+      ...mapMutations(['setUser']),
       async submit () {
         this.$refs.form.validate()
         if (this.$refs.form.validate(true)) {
@@ -101,12 +104,30 @@
           try {
             const loginResponse = await login(this.username, this.password)
             const token = loginResponse.data.token
-            const role = loginResponse.data.user.role
-            localStorage.setItem('role', role)
-            const data = encrypt(token)
-            localStorage.setItem('tkn', data)
+            const user = loginResponse.data.user
+            this.setUser(user)
+            localStorage.setItem('tkn', token)
             this.$router.push({ name: 'Control' })
           } catch (e) {
+            switch (e.response.status) {
+              case 500: {
+                this.$toast.error('Error interno del servidor, inténtelo más tarde', {
+                  position: 'bottom-center',
+                  timeout: 3000,
+                  closeOnClick: true,
+                  pauseOnFocusLoss: false,
+                  pauseOnHover: true,
+                  draggable: true,
+                  draggablePercent: 0.6,
+                  showCloseButtonOnHover: false,
+                  hideProgressBar: true,
+                  closeButton: 'button',
+                  icon: true,
+                  rtl: false,
+                })
+                break
+              }
+              case 401: {
                 this.$toast.error('No autorizado', {
                   position: 'bottom-center',
                   timeout: 3000,
@@ -121,6 +142,26 @@
                   icon: true,
                   rtl: false,
                 })
+                break
+              }
+              default: {
+                this.$toast.error('No autorizado', {
+                  position: 'bottom-center',
+                  timeout: 3000,
+                  closeOnClick: true,
+                  pauseOnFocusLoss: false,
+                  pauseOnHover: true,
+                  draggable: true,
+                  draggablePercent: 0.6,
+                  showCloseButtonOnHover: false,
+                  hideProgressBar: true,
+                  closeButton: 'button',
+                  icon: true,
+                  rtl: false,
+                })
+              }
+            }
+            console.log(e.response)
             this.tryLogin = false
           }
         }