feat: add fake login

public/index.html

@@ -14,10 +14,9 @@
         <link
             rel="shortcut icon"
             type="image/png"
-            href="assets/icon/favicon.ico"
+            href="/assets/icon/favicon.ico"
         />
 
-        <!-- add to homescreen for ios -->
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta
             name="apple-mobile-web-app-title"

src/components/Menu.vue

@@ -1,15 +1,9 @@
 <template>
   <ion-menu content-id="main-content" type="overlay">
     <ion-header>
-      <ion-toolbar class="ion-text-center" :color="isLoggedIn ? 'primary' : ''">
-        <ion-title v-if="isLoggedIn" class="remove-padding"
-          >Welcome {{ userName }}</ion-title
-        >
-        <!-- <ion-img
-          v-else
-          class="w-50 mx-auto py-2"
-          src="assets/icon/logo.png"
-        /> -->
+      <ion-toolbar class="welcome-container" color="primary">
+        <span>Welcome {{ userName }}</span>
+        <ion-img class="py-2" style="width: 50px" src="/assets/icon/logo.png" />
       </ion-toolbar>
     </ion-header>
     <ion-content>
@@ -77,14 +71,15 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonImg,
   IonMenu,
   IonMenuToggle,
   IonHeader,
   IonToolbar,
   IonTitle,
 } from "@ionic/vue";
 
-import { onBeforeUnmount, onMounted, ref, computed } from "vue";
+import { onBeforeUnmount, onMounted, ref, computed, reactive } from "vue";
 
 import { useRouter } from "vue-router";
 
@@ -107,7 +102,7 @@ const getUserName = computed(() => userStore.getUserName);
 const selectedIndex = ref(0);
 const isLoggedIn = ref(false);
 const router = useRouter();
-const userName = ref("");
+const userName = ref("Guest");
 
 const Icon = ref({
   build,
@@ -123,18 +118,23 @@ const Icon = ref({
 
 const appPages = ref([]);
 
-onMounted(() => {
-  emitter.on("logged", async () => {
-    await mountMenu();
-    fillUserName();
-  });
+async function handleLogin() {
+  console.log('log')
+  debugger;
+  await mountMenu();
+  await fillUserName();
+}
+
+onMounted(async () => {
+  emitter.on("logged", handleLogin);
 
-  mountMenu();
-  fillUserName();
+  await mountMenu();
+  await fillUserName();
 });
 
-onBeforeUnmount(() => {
-  mountMenu();
+onBeforeUnmount(async () => {
+  await mountMenu();
+  emitter.off("logged", handleLogin);
 });
 
 async function verifyIsLoggedIn() {
@@ -145,17 +145,18 @@ async function verifyIsLoggedIn() {
 async function mountMenu() {
   await verifyIsLoggedIn();
 
-  let userType = await getUserType;
-  userType = await getUserType;
+  let userType = await getUserType.value;
+  userType = await getUserType.value;
 
-  const userMenuItems = await getMenuByUserType.value(userType.value);
+  const userMenuItems = getMenuByUserType.value(userType.value);
 
   appPages.value = [
     ...(isLoggedIn.value && userMenuItems ? userMenuItems : []),
     ...(isLoggedIn.value ? getNeedAuth.value : getWithoutAuth.value),
     ...getPublic.value,
   ];
 }
+
 function redirect(index, menuItem) {
   selectedIndex.value = index;
 
@@ -175,15 +176,21 @@ async function fillUserName() {
 
   if (!name) return;
 
-  userName.value = name.split(" ")[0] || "";
+  userName.value = name.split(" ")[0] || "Guest";
 }
 </script>
 
 <style scoped>
+.welcome-container {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+}
+
 hr {
   border-top: 1px solid var(--ion-color-step-150, #d7d8da);
 }
-
 ion-menu.md ion-content {
   --padding-start: 16px;
   --padding-end: 8px;

src/composition/login.js

@@ -13,21 +13,20 @@ export default function () {
       password: userCredentials.password,
     };
 
-    loginStore.login(data)
+    loginStore
+      .login(data)
       .then((response) => {
-        openToast("Logged with sucess", "success", "top");
+        openToast("Logged with success", "success", "top");
 
-        redirectTo(
-          response.data.userType,
-          { anyCustomParams: response.customParams },
-          true,
-        );
+        redirectTo(response.data.userType, {
+          anyCustomParams: response.customParams,
+        });
 
         return Promise.resolve();
       })
-      .catch(() => {
+      .catch((ex) => {
         openToast("Something was wrong on login", "danger", "top");
-        Promise.reject();
+        Promise.reject(ex);
       });
   }
 

src/composition/redirectToHome.js

@@ -1,17 +1,9 @@
 import { useRouter } from "vue-router";
-import UserTypes from "../enums/UserTypes";
+import HomeRoutesByUser from "../enums/HomeRoutesByUser";
 
 export default function () {
   const router = useRouter();
 
-  /**
-   * Default routes to redirect the user
-   */
-  const routes = {
-    [UserTypes.CLIENT]: "client-home",
-    [UserTypes.ADMINISTRATOR]: "admin-home",
-  };
-
   /**
    * Redirect user by type
    * @param {number | string} userTypeId
@@ -22,22 +14,21 @@ export default function () {
   function redirectTo(userTypeId, routeParams, reload = false) {
     if (!reload) {
       router.push({
-        name: routes[userTypeId] || "logout",
+        name: HomeRoutesByUser[userTypeId] || "logout",
         params: routeParams,
       });
       return;
     }
 
     const redirect = router.resolve({
-      name: routes[userTypeId] || "logout",
+      name: HomeRoutesByUser[userTypeId] || "logout",
       params: routeParams,
     });
 
     window.location = redirect.href;
   }
 
   return {
-    routes,
     redirectTo,
   };
 }

src/enums/HomeRoutesByUser.js

@@ -0,0 +1,9 @@
+import UserTypes from "./UserTypes";
+
+/**
+ * Default routes to redirect the user
+ */
+export default {
+  [UserTypes.CLIENT]: "client-home",
+  [UserTypes.ADMINISTRATOR]: "admin-dashboard",
+};

src/main.js

@@ -7,8 +7,6 @@ import { defineCustomElements } from "@ionic/pwa-elements/loader";
 import App from "./App.vue";
 import router from "./router";
 
-import redirectToHome from "./composition/redirectToHome";
-
 import BaseLayout from "./components/base/BaseLayout.vue";
 import ErrorMessage from "./components/ErrorMessage.vue";
 import Loading from "./components/Loading.vue";
@@ -31,6 +29,7 @@ import "@ionic/vue/css/display.css";
 
 /* Theme variables */
 import "./theme/index.css";
+import HomeRoutesByUser from "./enums/HomeRoutesByUser";
 
 router.beforeEach(async (to, from, next) => {
   const user = await Preferences.get({ key: "user" });
@@ -44,7 +43,7 @@ router.beforeEach(async (to, from, next) => {
   }
 
   if (["login", "home", "register"].includes(to.name) && user.value) {
-    next({ name: redirectToHome().routes[_userType] });
+    next({ name: HomeRoutesByUser[_userType] });
     return;
   }
 

src/pages/Login.vue

@@ -13,13 +13,15 @@
         <ion-item class="form-field">
           <ion-icon slot="start" :icon="Icon.mail"></ion-icon>
           <ion-input
-            v-model="Fields.email"
+            v-model="fields.email"
             clear-input
             required
             label="E-mail"
             type="email"
             label-placement="floating"
+            tabindex="1"
             inputmode="email"
+            placeholder="admin"
             @input="errorMessages.email = ''"
           ></ion-input>
         </ion-item>
@@ -29,11 +31,13 @@
         <ion-item class="form-field">
           <ion-icon slot="start" :icon="Icon.key"></ion-icon>
           <ion-input
-            v-model="Fields.password"
+            v-model="fields.password"
             required
             name="password"
             label="Password"
+            tabindex="2"
             label-placement="floating"
+            placeholder="admin"
             clear-input
             :type="showPassword ? 'text' : 'password'"
             @input="errorMessages.password = ''"
@@ -104,7 +108,7 @@ const Icon = ref({
   enterOutline,
 });
 
-const Fields = ref({
+const fields = ref({
   email: "",
   password: "",
 });
@@ -117,13 +121,11 @@ const errorMessages = ref({
 const loading = ref(false);
 
 function loginUser() {
-  if (!validateFields()) {
-    return;
-  }
+  if (!validateFields()) return;
 
   loading.value = true;
 
-  userLogin(Fields)
+  userLogin(fields.value)
     .then(() => {
       emitter.emit("logged");
     })
@@ -134,12 +136,12 @@ function loginUser() {
 function validateFields() {
   let valid = true;
 
-  if (!Fields.value.email) {
+  if (!fields.value.email) {
     errorMessages.value.email = "Email invalid";
     valid = false;
   }
 
-  if (!Fields.value.password) {
+  if (!fields.value.password) {
     errorMessages.value.password = "Password invalid";
     valid = false;
   }

src/pages/Logout.vue

@@ -1,9 +1,9 @@
 <template>
   <base-layout :show-menu-button="false" :ignore-history="true">
-    <ion-img :src="image"> </ion-img>
+    <ion-img src="/assets/vectors/join.svg"></ion-img>
     <ion-item class="attention" lines="none">
-      <ion-label class="d-flex align-items-center justify-content-center">
-        <ion-text class="ion-text-uppercase mr-2">Bye</ion-text>
+      <ion-label class="bye-container">
+        <ion-text class="ion-text-uppercase">Bye</ion-text>
         <ion-spinner name="dots"></ion-spinner>
       </ion-label>
     </ion-item>
@@ -47,4 +47,10 @@ ion-img {
   font-size: 20px;
   font-weight: 700;
 }
+
+.bye-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 </style>

src/store/login.js

@@ -1,5 +1,8 @@
-import { defineStore } from "pinia";
 import api from "@/api";
+import { Preferences } from "@capacitor/preferences";
+import { defineStore } from "pinia";
+import UserTypes from "../enums/UserTypes";
+import { makeString } from "../utils";
 
 export const useLoginStore = defineStore("login", {
   actions: {
@@ -19,7 +22,17 @@ export const useLoginStore = defineStore("login", {
         }),
       });
     },
-    login({}, userCredentials) {
+    async login(userCredentials) {
+      /**
+       * This is a fake login, you can remove this if
+       */
+      if (
+        userCredentials.email === "admin" &&
+        userCredentials.password === "admin"
+      ) {
+        return await this.fakeLogin();
+      }
+
       return api
         .post("/login", userCredentials)
         .then(async (response) => {
@@ -30,5 +43,22 @@ export const useLoginStore = defineStore("login", {
         })
         .catch((error) => error.response);
     },
+    /**
+     * This is a fake login, you can remove this method
+     */
+    async fakeLogin() {
+      await this.setToken(makeString(20));
+      await this.setUserData({
+        id: 1,
+        typeUser: UserTypes.ADMINISTRATOR,
+        userName: "Admin",
+      });
+
+      return {
+        data: {
+          userType: UserTypes.ADMINISTRATOR,
+        },
+      };
+    },
   },
 });