add: guard in router

src/views/CalendarView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Calendario</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/CompleteRegisterView.vue

@@ -0,0 +1,99 @@
+<script setup>
+
+</script>
+
+<template>
+    <h2 class="title">Complete su registro</h2>
+
+    <div class="card-info flex-column">
+        <p>¿Como te quieres registrar?</p>
+        <label class="container">Embarcador
+        <input type="radio" checked="checked" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Transportista
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Broker (Embarcador)
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+        <label class="container">Broker (Transportista)
+        <input type="radio" name="radio">
+        <span class="checkmark"></span>
+        </label>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+   .container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 22px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+
+    /* Hide the browser's default radio button */
+    .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    }
+
+    /* Create a custom radio button */
+    .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+    border-radius: 50%;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark {
+    background-color: #ccc;
+    }
+
+    /* When the radio button is checked, add a blue background */
+    .container input:checked ~ .checkmark {
+    background-color: #2196F3;
+    }
+
+    /* Create the indicator (the dot/circle - hidden when not checked) */
+    .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+    }
+
+    /* Show the indicator (dot/circle) when checked */
+    .container input:checked ~ .checkmark:after {
+    display: block;
+    }
+
+    /* Style the indicator (dot/circle) */
+    .container .checkmark:after {
+        top: 9px;
+        left: 9px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: white;
+    }
+</style>
+
+
+<!-- ¿Como te quieres registrar? (Opciones a elegir)
+1 - Embarcador
+2 - Transportista
+3 - Broker (Embarcador)
+4 - Broker (Transportista) -->

src/views/LoadsView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Cargas</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/LoginView.vue

@@ -4,14 +4,19 @@
     import NotificationBadge from '../components/ui/NotificationBadge.vue';
     import {validateEmail} from '../helpers/validations';
     import Spiner from '../components/ui/Spiner.vue';
-import { RouterLink } from 'vue-router';
+    import { login } from '../services/auth';
+    import { RouterLink, useRouter } from 'vue-router';
+    import { useAuthStore } from '../stores/auth';
 
 
     const form = reactive({
-        email: '',
-        password: '',
+        email: 'alexandro.uc.santos@gmail.com',
+        password: 'Password0',
     });
 
+    const router = useRouter();
+    const auth = useAuthStore();
+
     const loading = ref(false);
     const msgError = ref('');
     const msgSuccess = ref('');
@@ -31,7 +36,24 @@ import { RouterLink } from 'vue-router';
                 email: form.email,
                 password: form.password
             }
-            console.log(data);
+            const resp = await login(data);
+            if(resp.msg === 'success') {
+                console.log(resp.data.user);
+                if(resp.data.user.first_name && resp.data.user.last_name) {
+                    localStorage.setItem('session', resp.data.session_token);
+                    router.push({name: 'home'});
+                    auth.$patch({
+                        sesion: resp.data.session_token,
+                        token: resp.data.accessToken,
+                        user: resp.data.user,
+                    })
+                } else {
+                    router.push({name: 'company'});
+                }
+            } else {
+                msgError.value = resp.msg;
+            }
+            clearMessages();
             loading.value = false;
         }
     }
@@ -59,29 +81,29 @@ import { RouterLink } from 'vue-router';
     <div class="d-flex flex-column my-5 justify-content-center align-items-center">
         <h2 class="title">Iniciar sesión</h2>
         <p class="subtitle mt-4 mb-5">Bienvenido de vuelta! Ingresa tu email y contraseña</p>
-            <form  @submit.prevent="handleLogin" class="form-content">
-                <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
-                <NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
-                <CustomInput 
-                    label="Ingresa tu correo electrónico"
-                    name="email"
-                    type="email"
-                    v-model:field="form.email"
-                />
-                <CustomInput 
-                    label="Contraseña"
-                    name="password"
-                    type="password"
-                    v-model:field="form.password"
-                />
-                <Spiner v-if="loading" class="mt-5"/>
-                <input 
-                    v-else
-                    type="submit" 
-                    class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Ingresar">
-                </form>
-                <p class="mt-3 fs-6">¿Olvidaste tu contreseña? <RouterLink class="btn-text" :to="{name: 'recovery'}">Ingresa aqui</RouterLink></p>
-                <p class="mt-5 fs-6">¿No tienes una cuenta? <RouterLink class="btn-text" :to="{name: 'register'}">Registrate aqui</RouterLink></p>
+        <form  @submit.prevent="handleLogin" class="form-content">
+            <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+            <NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
+            <CustomInput 
+                label="Ingresa tu correo electrónico"
+                name="email"
+                type="email"
+                v-model:field="form.email"
+            />
+            <CustomInput 
+                label="Contraseña"
+                name="password"
+                type="password"
+                v-model:field="form.password"
+            />
+            <Spiner v-if="loading" class="mt-5"/>
+            <input 
+                v-else
+                type="submit" 
+                class="btn-primary-lg btn-lg-block radius-1 mt-5" value="Ingresar">
+        </form>
+        <p class="mt-3 fs-6">¿Olvidaste tu contreseña? <RouterLink class="btn-text" :to="{name: 'recovery'}">Ingresa aqui</RouterLink></p>
+        <p class="mt-5 fs-6">¿No tienes una cuenta? <RouterLink class="btn-text" :to="{name: 'register'}">Registrate aqui</RouterLink></p>
                 
     </div>
 </template>

src/views/UsersView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Usuarios</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/VehiclesView.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <h2 class="title">Vehiculos</h2>
+    </div>
+</template>
+
+<style scoped>
+
+</style>