@metano/quasar_rest_auth 1.0.1

package/components/FormLogin.vue

@@ -0,0 +1,217 @@
+
+<template>
+  <q-page-container>
+  <q-page class=" row items-center justify-evenly">
+    <div class="row">
+      <q-card square  flat class="text-center">
+        <q-card-section class="text-left justify-evenly">
+          <q-card  v-if="incorrectAuth" class="my-card bg-red text-white">
+            <q-card-section>
+              <div class="text-subtitle2">{{ tdc('Incorrect username or password entered') }} <br> {{ tdc('please try again') }}</div>
+            </q-card-section>
+
+          </q-card>
+          <q-card  v-if="correctAuth" class="my-card bg-green text-white">
+            <q-card-section>
+              <div class="text-subtitle2"> {{ tdc('Login successfuly') }} <br>
+                {{ tdc('Redirect to home page') }} ...</div>
+            </q-card-section>
+
+          </q-card>
+          <br>
+          <q-form class="">
+
+            <q-input outlined dense   clearable v-model="email" type="email" :label="tdc('Usuario ou Celular ou Email')">
+              <template v-slot:prepend>
+                <q-icon name="email" />
+              </template>
+              <template v-slot:append>
+                <q-icon name="phone" />
+              </template>
+            </q-input>
+            <br/>
+            <q-input outlined dense   :readonly="readonly" clearable v-model="password" :type="isPwd ? 'password': 'text'" :label="tdc('Senha')">
+
+              <template v-slot:prepend>
+                <q-icon
+                  name="lock"
+                  class="cursor-pointer"
+                  @click="isPwd = !isPwd"
+                />
+              </template>
+              <template v-slot:append>
+                <q-icon
+                  :name="isPwd ? 'visibility_off' : 'visibility'"
+                  class="cursor-pointer"
+                  @click="isPwd = !isPwd"
+                />
+              </template>
+            </q-input>
+
+            <br/>
+            <q-checkbox  class="text-grey-7" dense   clearable v-model="User.manterLogado"  @click="check" :label="tdc('Manter-me logado')">
+            </q-checkbox>
+          </q-form>
+        </q-card-section>
+
+        <q-card-actions class="q-px-md" >
+          <q-btn  :readonly="readonly" size="md" @click="login()"  color="positive" dense class="full-width " :label="tdc('Entrar')" />
+          <p></p>
+        </q-card-actions>
+        <q-card-actions align="around" >
+          <q-btn flat :to="{name:'esquecerpassword'}"  size="md"  color="purple" :label="tdc('Esqueci minha') + ' ' + tdc('Senha')" />
+          <q-btn flat :to="{name:'registarUser'}"  size="md" color="primary" class="" :label="tdc('Registar')" />
+        </q-card-actions>
+      </q-card>
+    </div>
+  </q-page>
+  </q-page-container>
+</template>
+<style scoped>
+
+</style>
+<script >
+
+import { defineComponent } from 'vue'
+import { tdc } from '../boot/app'
+import { AuthStore, UserStore } from '../stores/AuthStore'
+import { setStorage, getStorage } from '../boot/storage';
+import { useQuasar } from 'quasar'
+
+
+export default defineComponent({
+  name: 'FormLogin',
+
+  props: {
+
+  },
+
+  components: {
+
+  },
+  setup () {
+    const Auth = AuthStore()
+    const  User = UserStore()
+    const $q = useQuasar()
+    return {
+      Auth,
+      tdc,
+      User,
+      $q
+    }
+  },
+  data () {
+    return {
+      user_id: null,
+      entidade_id: null,
+      isPwd: true,
+      readonly: false,
+      email: '',
+      password: '',
+      incorrectAuth: false,
+      correctAuth: false,
+      latitude: '',
+      longitude: '',
+      local: '',
+      ipAddress: '0.0.0.0'
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    'User.Grupo' (val) {
+      if (!val) return
+      this.$router.push({ name: 'wellcome' })
+    },
+  },
+  mounted () {
+
+   if (getStorage('c', 'manterlogado') === 'true') {
+      this.User.manterLogado = true
+    } else {
+      this.User.manterLogado = false
+    }
+    this.getGeolocation()
+    fetch('https://api.ipify.org?format=json')
+      .then(response => response.json())
+      .then(data => {
+        this.ipAddress = data.ip
+      })
+      .catch(error => {
+        console.error('Error fetching IP address:', error)
+      })
+  },
+  methods: {
+    check () {
+      setStorage('c', 'manterlogado', this.User.manterLogado, 365)
+    },
+    getGeolocation () {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(this.setPosition, this.errorPosition)
+      } else {
+        this.errorPosition()
+      }
+    },
+    async getLocalFromCoords(lat, lon) {
+      const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}&accept-language=pt`
+
+      const res = await fetch(url, {
+        headers: {
+          // 'User-Agent': 'SeuApp/1.0'
+        }
+      })
+
+      const data = await res.json()
+
+      return {
+        cidade: data.address.city
+          || data.address.town
+          || data.address.village
+          || '',
+        bairro: data.address.suburb || '',
+        pais: data.address.country || '',
+        nomeCompleto: data.display_name || '.'
+      }
+    },
+    setPosition (position) {
+      const coords = position.coords
+      this.latitude = coords.latitude
+      this.longitude = coords.longitude
+
+      this.local = this.getLocalFromCoords(this.latitude, this.longitude)
+      console.log(this.local)
+
+    },
+    errorPosition () {
+      this.$q.notify({
+        position: 'bottom',
+        timeout: 3000,
+        color: 'negative',
+        textColor: 'white',
+        actions: [{ icon: 'close', color: 'white' }],
+        message: 'Não foi possível recupera sua posição!'
+      })
+    },
+
+    async login () {
+      const availScreenWidth = window.screen.availWidth
+      const availScreenHeight = window.screen.availHeight
+
+      setStorage('c', 'manterlogado', this.User.manterLogado, 365)
+
+      this.correctAuth = false
+
+      await this.User.login({
+        email: this.email,
+        password: this.password,
+        info: navigator.platform + ' ' + this.ipAddress,
+        dispositivo: navigator.userAgent,
+        local_lat: this.latitude || '-26.372109',
+        local_lon: this.longitude || '28.233608',
+        local: JSON.stringify(this.local)
+      }, this.$q)
+    }
+  }
+})
+</script>

package/components/LeftMenu.vue

@@ -0,0 +1,93 @@
+
+<template>
+  <q-layout >
+    <q-card  square
+        :class="$q.dark.isActive ? 'bg-dark text-white fixed-top  q-pa-sm ' : 'bg-primary text-white   q-pa-sm fixed-top'"
+        flat
+      >
+      <div class="text-center text-h6">{{ User?.username }}</div>
+      <q-btn
+        flat dense
+        :label="User.Grupo?.name"
+        class="full-width"
+      >
+        <q-menu fit>
+          <q-list dense>
+            <q-item clickable v-close-popup  @click="User.selectGrupo({id:'1', name:'Hóspede'})"  >
+              <q-item-section>
+                <q-item-label overline> {{tdc('Hóspede')}}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item v-for="grupo in User.Grupos" :key="grupo.id" clickable @click="User.selectGroup(grupo)">
+              <q-item-section>{{ grupo.name }}</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+      <q-list  >
+        <q-item clickable replace v-ripple  exact
+          :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'"
+          exact-active-class=""  >
+          <q-item-section avatar @click="$router.push({ name: 'home'})">
+            <q-icon  name="home" />
+          </q-item-section>
+          <q-item-section class="text-h6" @click="$router.push({ name: 'home'})">{{ tdc('Casa') }}</q-item-section>
+          <q-item-section side >
+            <q-btn
+            round dense flat
+            :icon="'settings'" :class="$q.dark.isActive ? 'text-white' : 'text-white'"
+            @click="User.toggleSettings()"
+          >
+          <q-tooltip :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'">{{ tdc('Configurações') }}</q-tooltip>
+          </q-btn>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card>
+
+    <LeftMenuSegundo :class="$q.dark.isActive ? 'bg-dark text-white fixed-top' : 'bg-primary text-white  fixed-top'" style="margin-top:127px" ></LeftMenuSegundo>
+
+  </q-layout>
+</template>
+<script >
+
+import LeftMenuSegundo from './LeftMenuSegundo.vue'
+
+
+import { defineComponent } from 'vue'
+import { HTTPClient, url } from '../boot/api'
+import { tdc } from '../boot/app'
+import { UserStore } from '../stores/AuthStore'
+
+export default defineComponent({
+  components: {
+    LeftMenuSegundo
+  },
+  setup () {
+    const User = UserStore()
+    return {
+      User,
+    }
+  },
+
+  data () {
+    return {
+      tdc: tdc,
+      
+    }
+  },
+
+  created () {
+  },
+  computed: {
+  },
+
+  mounted () {
+    
+  },
+
+  methods: {
+
+  }
+})
+</script>

package/components/LeftMenuSegundo.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="col-12" style="margin-top: 2px;">
+      <search-menu />
+        <q-card square flat  class=" col-xs-12 col-md-12 col-lg-12 q-bt-md"
+          v-for="App in Auth.TipoEntidadeMenus" :key="App"
+          style="padding: 0px;"
+          v-show="User.EntidadeModulos.includes(App.app) && User.isAuthorized(App.app.toLowerCase())"
+        >
+          <q-expansion-item default-opened
+            :class="$q.dark.isActive ? 'bg-dark-custom text-subtitle1' : 'bg-white text-subtitle1 text-primary'"
+            :icon="App.icon"
+            dense
+            :label="tdc(App.menu)"
+            :header-class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'"
+            :expand-icon-class="$q.dark.isActive ? 'text-white' : 'text-white'"
+          >
+            <q-separator />
+
+            <q-item  v-for="sm in App.submenu " :key="sm"
+              dense
+              clickable v-ripple
+              :to="{name: sm?.rota}"
+              v-show="User.isAuthorized(sm.role.toLowerCase())"
+            >
+              <q-item-section avatar>
+                <q-icon :name="sm.icon" />
+              </q-item-section>
+              <q-item-section>{{tdc(sm.menu)}}</q-item-section>
+              <q-item-section side >
+                <q-item dense  style="margin-right: -20px;"
+                  v-show="User.isAuthorized('add_' + sm.menu.toLowerCase())"
+                  clickable v-ripple
+                  :to="{name: 'add_' + sm.menu.toLowerCase()}"
+                >
+                  <q-icon name="add" size="sm" :color="$q.dark.isActive ? '' : 'primary'">
+                    <q-tooltip :class="$q.dark.isActive ? 'bg-dark' : 'bg-primary'">
+                      {{ tdc('Adicionar ') }} {{ tdc(sm.menu) }}
+                    </q-tooltip>
+                  </q-icon>
+                </q-item>
+              </q-item-section>
+            </q-item>
+            <q-separator />
+          </q-expansion-item>
+        </q-card>
+      </div>
+</template>
+
+<style scoped>
+  .bg-dark-custom {
+    background-color: #121212 !important;
+  }
+</style>
+<script >
+
+
+import { defineComponent } from 'vue'
+import { tdc } from '../boot/app'
+import { AuthStore, UserStore } from '../stores/AuthStore'
+import SearchMenu from './SearchMenu.vue';
+
+
+export default defineComponent({
+  name: 'LeftMenuSegundo',
+
+  components: {
+    SearchMenu
+  },
+  setup () {
+    const Auth = AuthStore()
+    const  User = UserStore()
+    return {
+      Auth,
+      User,
+      tdc
+    }
+  },
+  data () {
+    return {
+      
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    
+  },
+  mounted () {
+    
+  },
+  methods: {
+    
+  }
+})
+</script>

package/components/MyTest.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="q-pa-md">
+    <h1> {{ Teste }}</h1>
+  </div>
+</template>
+
+
+
+<script>
+import { defineComponent } from 'vue'
+
+
+export default defineComponent({
+  components: {
+
+  },
+  setup () {
+    
+    return {
+      
+    }
+  },
+  data () {
+    return {
+      Teste:  "Teste",
+      
+    }
+  },
+  computed: {
+
+  },
+
+  mounted(){
+   
+  },
+
+  methods: {
+    
+  }
+})
+</script>

package/components/RightMenu.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="q-pa-md">
+    <h1>{{Teste}}</h1>
+  </div>
+</template>
+
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  components: {
+
+  },
+  setup () {
+    return {
+    }
+  },
+  data () {
+    return {
+      Teste:  "Teste",
+    }
+  },
+  computed: {
+
+  },
+
+  mounted(){
+
+  },
+
+  methods: {
+    
+  }
+})
+</script>

package/components/SearchMenu.vue

@@ -0,0 +1,88 @@
+<template>
+    <div >
+      <q-input  standout v-model="Auth.search"   square :class="[$q.dark.isActive ? 'bg-transparent ' : 'bg-transparent', 'input-28', 'q-pa-0']"  dense @update:model-value="filterMenus"
+        :label=" ' ' + tdc(' Procurar') + ' '">
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </div>
+</template>
+
+<style scoped>
+  .input-28 .q-field__control {
+    height: 28px;
+    min-height: 28px;
+  }
+</style>
+
+<script >
+
+import { defineComponent } from 'vue'
+import { tdc } from '../boot/app'
+import { UserStore, AuthStore } from '../stores/AuthStore'
+
+
+
+export default defineComponent({
+  name: 'SearchMenu',
+
+  components: {
+
+  },
+  setup () {
+
+    const User = UserStore()
+    const Auth = AuthStore()
+
+    return {
+      User,
+      Auth,
+      tdc
+    }
+  },
+  data () {
+    return {
+      search: ''
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+    'User.Permicoes' () {
+      this.filterMenus(this.Auth.search)
+    },
+
+    'User.Entidade'() {
+      this.Auth.setTipoEntidadeMenus()
+      this.User.setEntidadeModelos()
+      this.User.setEntidadeModulos()
+    },
+
+  },
+  mounted () {
+    this.filterMenus(this.Auth.search)
+    this.Auth.setTipoEntidadeMenus()
+    this.User.setEntidadeModelos()
+    this.User.setEntidadeModulos()
+  },
+  methods: {
+      
+    filterMenus (val) {
+      console.log(val)
+      if (val === '') {
+        this.Auth.TipoEntidadeMenus = this.Auth.TipoEntidadeAllMenus
+      } else {
+        const needle = val.toLowerCase()
+        this.Auth.TipoEntidadeMenus  = this.Auth.TipoEntidadeAllMenus.map(v => ({
+          ...v,
+          submenu: v.submenu.filter(sub =>
+            sub.menu && sub.menu.toLowerCase().includes(needle.toLowerCase())
+          )
+        })).filter(v => v.submenu.length > 0)
+      }
+    }
+  }
+})
+</script>

package/components/SettingsLayout.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-btn label="Fixed size" color="primary" @click="''" />
+  </div>
+</template>
+<script >
+
+import { defineComponent } from 'vue'
+
+// import { st } from 'src/js/appMytech'
+
+export default defineComponent({
+  components: {
+
+  },
+  setup () {
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+  created () {
+  },
+  computed: {
+  },
+  mounted () {
+
+  }
+})
+</script>

package/components/TopMenu.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-bar >
+    <div class="q-pa-sm q-pl-md  items-center text-body1">
+      <div class="q-ml-md cursor-pointer non-selectable">
+        <q-item clickable dense replace v-ripple
+          :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'"  >
+          <q-item-section avatar @click="$router.push({ name: 'home'})" >
+            <q-icon  name="home" />
+          </q-item-section>
+          <q-item-section class="text-body1" @click="$router.push({ name: 'home'})" >{{ tdc('Casa') }}</q-item-section>
+          <q-item-section side>
+            <q-btn
+            round dense flat
+            :icon="'settings'" :class="$q.dark.isActive ? 'text-white' : 'text-white'"
+            @click="User.toggleSettings()"
+          >
+            <q-tooltip :class="$q.dark.isActive ? 'bg-dark text-white' : 'bg-primary text-white'">{{ tdc('Configurações') }}</q-tooltip>
+          </q-btn>
+          </q-item-section>
+        </q-item>
+      </div>
+    </div>
+
+    <SearchMenu  style="height: 28px; margin-top:-4px;"/>
+    <q-space />
+    <TopMenuSegundo ></TopMenuSegundo>
+  </q-bar>
+</template>
+<script >
+
+import TopMenuSegundo from './TopMenuSegundo.vue'
+import { defineComponent } from 'vue'
+import { tdc } from '../boot/app'
+import { UserStore } from '../stores/AuthStore'
+import SearchMenu from './SearchMenu.vue';
+
+export default defineComponent({
+  components: {
+    TopMenuSegundo,
+    SearchMenu
+  },
+  setup () {
+    const User = UserStore()
+    return {
+      User
+    }
+  },
+
+  data () {
+    return {
+      tdc: tdc,
+    }
+  },
+
+  created () {
+  },
+  computed: {
+  },
+
+  mounted () {
+
+  },
+
+  methods: {
+   
+  }
+})
+</script>