add: completed register view

src/assets/main.css

@@ -7,6 +7,10 @@ body {
     width: 45%;
 }
 
+.bg-body {
+    background-color: #fdfcfc !important;
+}
+
 .radius-1 {
     border-radius: 1rem !important;
 }
@@ -43,7 +47,7 @@ body {
     color: #FFF;
     padding: 12px 30px;
     border: none;
-    border-radius: 25px;
+    border-radius: 13px;
     font-size: 18px;
     text-decoration: none;
     font-weight: 900;
@@ -94,14 +98,15 @@ body {
     border: none;
     border-radius: 13px;
     display: flex;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
     margin-bottom: 12px;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
 }
 
 .card-info h2{
-    font-size: 1.5rem;
-    font-weight: 800;
+    font-size: 1.4rem;
+    font-weight: 700;
     color: #323030;
+    margin-bottom: 1rem;
 }
 
 .card-info p{
@@ -141,6 +146,16 @@ td {
     font-size: 1rem;
 }
 
+.custom-input-light {
+    background-color: transparent;
+    border-radius: 8px;
+    border-width: 1px !important;
+    border-color: rgb(226, 214, 214) !important;
+    border-style: solid !important;
+    padding: 10px 12px;
+    font-size: 1rem;
+}
+
 .custom-input:enabled{
     border: none;
 }
@@ -185,7 +200,7 @@ td {
     .btn-primary-lg {
         padding: 8px 15px;
         border: none;
-        border-radius: 25px;
+        border-radius: 13px;
         font-size: 16px;
         font-weight: 700;
     }

src/components/ui/Cities.vue

@@ -0,0 +1,60 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchcities } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+    
+    // defineProps(['selectedCities', 'multiple']);
+    defineProps({
+        selectedCities: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedCities', 'clear-option'])
+
+    const searchState = async(query) => {
+        isLoading.value = true;
+        const resp = await searchcities(query);
+        options.value = resp;
+        isLoading.value = false;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedCities"
+        @input="$event => $emit('update:selectedCities', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchState"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por ciudad"
+        label="city_name"
+        track-by="city_name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Escriba para obtener lista.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/CustomInput.vue

@@ -7,6 +7,11 @@
             type: String,
             required: false,
         },
+        filled: {
+            type: Boolean,
+            required: false,
+            default: true,
+        },
         name: {
             type: String,
             required: true,
@@ -29,6 +34,7 @@
         <label class="custom-label" :for="name">{{ label }}</label>
         <input 
             class="custom-input"
+            :class="[!filled ? 'custom-input-light' : '']"
             :type="type" 
             :id="name"
             :name="name" 

src/components/ui/CustomRadioInput.vue

@@ -0,0 +1,101 @@
+<script setup>
+    defineProps({
+        typeselected: {
+            type: String
+        },
+        checked: {
+            type: Boolean
+        },
+        value: {
+            type: String
+        },
+        label: {
+            type: String,
+            required: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        }
+    })
+
+    defineEmits(['update:typeselected'])
+</script>
+
+<template>
+    <label class="container">{{label}}
+    <input 
+        type="radio"
+        :checked="typeselected === value ? true : false"
+        :name="name" 
+        :value="value" 
+        @input="$event => $emit('update:typeselected', $event.target.value)"
+    >
+    <span class="checkmark"></span>
+    </label>
+</template>
+
+<style scoped>
+    .container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 20px;
+    -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>

src/components/ui/Segments.vue

@@ -0,0 +1,61 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchcategories } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedCategory']);
+    defineProps({
+        selectedCategory: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedCategory', 'clear-option'])
+
+    const searchCategory = async(query) => {
+        isLoading.value = true;
+        const resp = await searchcategories(query);
+        options.value = resp;
+        isLoading.value = false;
+        // truckTypes.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedCategory"
+        @input="$event => $emit('update:selectedCategory', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchCategory"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por segmento"
+        label="name"
+        track-by="name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/States.vue

@@ -0,0 +1,63 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { searchstates } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+    
+    // defineProps(['selectedState', 'multiple']);
+    defineProps({
+        selectedState: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedState', 'clear-option'])
+
+    const searchState = async(query) => {
+        isLoading.value = true;
+        const resp = await searchstates(query);
+        options.value = resp;
+        isLoading.value = false;
+    }
+
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedState"
+        @input="$event => $emit('update:selectedState', $event.target.value)"
+        id="states"
+        :options="options"
+        :multiple="multiple"
+        :searchable="true"
+        :loading="isLoading"
+        :close-on-select="true"
+        @search-change="searchState"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por estado"
+        label="state_name"
+        track-by="state_name"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Escriba para obtener lista.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/components/ui/TruckTypes.vue

@@ -0,0 +1,64 @@
+<script setup>
+    import { ref } from 'vue';
+    import VueMultiselect from 'vue-multiselect'
+    import { getSettingsQuery } from '../../services/public';
+
+    const options = ref([]);
+    const isLoading = ref(false);
+
+    // defineProps(['selectedTruckType']);
+    defineProps({
+        selectedTruckType: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    });
+    defineEmits(['update:selectedTruckType', 'clear-option'])
+
+    const getTruckTypesQuery = async(query) => {
+        isLoading.value = true;
+        let filter = {
+            meta_key:'truck_type',
+            query: query
+        }
+        const resp = await getSettingsQuery(filter);
+        isLoading.value = false;
+        options.value = resp;
+    }
+</script>
+
+<template>
+    <VueMultiselect
+        :value="selectedTruckType"
+        @input="$event => $emit('update:selectedTruckType', $event.target.value)"
+        :options="options"
+        :multiple="multiple"
+        :loading="isLoading"
+        :searchable="true"
+        :close-on-select="true"
+        @search-change="getTruckTypesQuery"
+        @remove="$emit('clear-option')"
+        placeholder="Busca por tipo de transporte"
+        label="meta_value"
+        track-by="meta_value"
+        selectLabel="Presione para seleccionar"
+        selectedLabel="Selecionado"
+        deselectLabel="Presione para remover selecion"
+    >
+        <template #noResult>
+            Oops! No se encontro coincidencias.
+        </template>
+        <template #noOptions>
+            Lista vacia.
+        </template>
+    </VueMultiselect>
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+
+<style scoped>
+
+</style>

src/helpers/validations.js

@@ -6,6 +6,17 @@ export const validateEmail = (email) => {
       );
   };
 
+export const validRFC = (rfc, type) => {
+
+  const size = type === 'fisica' ? 13 : 12;
+  
+  if( rfc.trim().length !== size ) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
 export const messagesError = (msg) =>  {
     switch (msg) {
       case 'Invalid credentials':

src/layouts/AuthLayout.vue

@@ -8,13 +8,7 @@
 <template>
     <Header/>
     <div class="auth-layout">
-        <!-- <div class="img-auth">
-            <img src="/images/auth.png" class="img" alt="fondo">
-        </div> -->
-        <!-- <div class="auth-view"> -->
-            <!-- <img src="/images/logo.png" width="150"/> -->
-            <RouterView/>
-        <!-- </div> -->
+        <RouterView/>
     </div>
     <Footer/>
 </template>
@@ -34,35 +28,23 @@
         justify-content: center;
         align-items: center;
         align-content: center;
-        width: 50%;
+        /* background-color: red; */
+        width: 55%;
         margin: 0px auto !important;
-        padding: 0px 0px !important;
+        padding: 0px 5px !important;
         overflow: hidden;
         min-height: 700px;
     }
-    .img-auth {
-        width: 50%;
-        /* object-fit: cover; */
-        margin: 24px 50px;
-        /* padding: 24p */
+
+    @media (max-width: 1024px) {
+        .auth-layout {
+            width: 70%;
+        }
     }
 
-    .img {
-        width: 100%;
-        /* max-height: 80vh; */
-        border-radius: 13px;
-        /* object-fit: cover; */
-        /* padding: 24px; */
-    }
-
-    .auth-view {
-        display: flex;
-        width: 50%;
-        margin: 0px 0px;
-        padding: 0px 0px;
-        /* background-color: red; */
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+    @media (max-width: 768px) {
+        .auth-layout {
+            width: 90%;
+        }
     }
 </style>

src/services/public.js

@@ -1,3 +1,5 @@
+import api from "../lib/axios";
+
 export const getLoadDirectories = async(filterStr) => {
     try {
         const endpoint = `/public-loads${filterStr}`;

src/stores/auth.js

@@ -19,20 +19,23 @@ export const useAuthStore = defineStore('auth', () => {
     });
 
     const checkSession = async() => {
-        checking.value = true;
-        const resp = await renewToken();
-        if(resp.msg === 'success') {
-            localStorage.setItem('session', resp.data.session_token);
-            sesion.value = resp.data.session_token;
-            token.value = resp.data.accessToken;
-            user.value = resp.data.user;
-            checking.value = false;
-        } else {
-            noty.show = true;
-            noty.text = 'Sesión ha expirado, ingresa nuevamente';
-            noty.error = true;
-            checking.value = false;
-            router.push({name: 'login'});
+        const session = localStorage.getItem('session');
+        if(session) {
+            checking.value = true;
+            const resp = await renewToken();
+            if(resp.msg === 'success') {
+                localStorage.setItem('session', resp.data.session_token);
+                sesion.value = resp.data.session_token;
+                token.value = resp.data.accessToken;
+                user.value = resp.data.user;
+                checking.value = false;
+            } else {
+                noty.show = true;
+                noty.text = 'Sesión ha expirado, ingresa nuevamente';
+                noty.error = true;
+                checking.value = false;
+                router.push({name: 'login'});
+            }
         }
     }
 

src/views/CompleteRegisterView.vue

@@ -1,94 +1,307 @@
 <script setup>
+    import { reactive, ref } from 'vue';
+    import CustomRadioInput from '../components/ui/CustomRadioInput.vue';
+    import Custominput from '../components/ui/CustomInput.vue'
+    import Segments from '../components/ui/Segments.vue';
+    import States from '../components/ui/States.vue';
+    import Cities from '../components/ui/Cities.vue';
+    import TruckTypes from '../components/ui/TruckTypes.vue';
+    import NotificationBadge from '../components/ui/NotificationBadge.vue';
+    import {validRFC} from '../helpers/validations';
+    import { useRouter } from 'vue-router';
+    import { useNotificationsStore } from '../stores/notifications';
+    import { useAuthStore } from '../stores/auth';
+
+    const notifications = useNotificationsStore();
+    const auth = useAuthStore();
+    const router = useRouter();
+    const step = ref(1);
+    const loading = ref(false);
+    const msgError = ref('');
+    const msgSuccess = ref('');
+
+    const typeCompany = reactive({
+        typeCompany: 'shipper',
+        typeRFC: 'fisica'
+    });
+
+    const company = reactive({
+        name: '',
+        rfc: 'USAL950402D96',
+        segments: [],
+        states: [],
+        cities: [],
+        truckTypes: [],
+        description: '',
+    });
+
+    const user = reactive({
+        name: '',
+        lastName: '',
+        phone1: '',
+        phone2: '',
+    })
+
+    const handleSelectedTypeCompany = () => {
+        if(typeCompany.typeCompany === null || typeCompany.typeRFC === null) {
+            msgError.value = 'Todos los campos con obligatorios';
+            clearMessages();
+            return;
+        }
+        console.log(typeCompany);
+        step.value = 2;
+    }
+
+    const handleDataCompany = () => {
+        const error = validatiosCompany();
+        if(error != '') {
+            msgError.value = error;
+            clearMessages();
+            return;
+        }
+        step.value = 3;
+        console.log(company);
+    }
+
+    const handleSendRegister = () => {
+        const error = validatiosUser();
+        if(error != '') {
+            msgError.value = error;
+            clearMessages();
+            return;
+        }
+        console.log(user);
+        /////// Datos debug ///////
+        notifications.show = true;
+        notifications.text = 'Los datos se llenaron correctamente';
+        localStorage.setItem('session', 'jssksksksk2skskkskskkskss');
+        auth.$patch({
+            sesion: 'jssksksksk2skskkskskkskss',
+            token: 'jkdkdkdkeoee00kelldd',
+            user: {
+                first_name: user.name,
+                last_name: user.lastName
+            },
+        })
+        router.push({name: 'home'});
+        ///////////////////////////
+    }
+
+    const handleBack = (val) => {
+        step.value = val;
+    }
+
+    const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+
+   const validatiosCompany = () => {
+        if(company.name.trim().length <= 2) {
+            return 'Ingresa nombre de empresa valido';
+        } else if(!validRFC(company.rfc, typeCompany.typeRFC)) {
+            return 'Ingresa RFC valido';
+        } else if(company.segments.length === 0) {
+            return 'Selecciona al menos un segmento';
+        } else if(company.states.length === 0) {
+            return 'Selecciona al menos un estado';
+        } else if(company.cities.length === 0) {
+            return 'Selecciona al menos un municipio'; 
+        } else if(company.truckTypes.length === 0) {
+            return 'Selecciona al menos un tipo de transporte';
+        } 
+        else {
+            return '';
+        }
+   }
+
+   const validatiosUser = () => {
+        if(user.name.trim().length < 3) {
+            return 'Ingresa nombre(s) valido';
+        } else if(user.lastName.trim().length < 2) {
+            return 'Ingresa apellido(s) valido';
+        } else if(user.phone1.trim().length < 10) {
+            return 'Ingresa teléfono valido';
+        } else {
+            return '';
+        }
+   }
 
 </script>
 
 <template>
-    <h2 class="title">Complete su registro</h2>
+    <h2 class="title my-5">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 class="card-info flex-column justify-content-center align-items-center mb-5">
+        <form @submit.prevent="handleSelectedTypeCompany" v-if="step === 1" class="form-view">
+            <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+            <h2 class="mt-4">¿Como te quieres registrar?*</h2>
+            <CustomRadioInput
+                value="shipper" 
+                label="Embarcador"
+                name="type-company"
+                v-model:typeselected="typeCompany.typeCompany"
+            />
+            <CustomRadioInput
+                value="carrier" 
+                label="Transportista"
+                name="type-company"
+                v-model:typeselected="typeCompany.typeCompany"
+            />
+            <CustomRadioInput
+                value="b-shipper" 
+                label="Broker (Embarcador)"
+                name="type-company"
+                v-model:typeselected="typeCompany.typeCompany"
+            />
+            <CustomRadioInput
+                value="b-carrier" 
+                label="Broker (Transportista)"
+                name="type-company"
+                v-model:typeselected="typeCompany.typeCompany"
+            />
+
+            <h2 class="mt-5">¿Como trabajas?*</h2>
+            <CustomRadioInput
+                value="fisica" 
+                label="Persona fisica"
+                name="type-rfc"
+                v-model:typeselected="typeCompany.typeRFC"
+            />
+            <CustomRadioInput
+                value="moral" 
+                label="Persona moral"
+                name="type-rfc"
+                v-model:typeselected="typeCompany.typeRFC"
+            />
+
+            <input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
+        </form>
+        <form @submit.prevent="handleDataCompany" v-if="step === 2">
+            <div class="d-flex justify-content-center align-items-center my-4">
+                <a  
+                    @click="handleBack(1)"
+                    class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
+            </div>
+            <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+            <h2>Datos de la empresa</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <Custominput
+                label="¿Cuál es el nombre de la empresa? *"
+                type="text"
+                name="name"
+                :filled="false"
+                v-model:field="company.name"
+            />
+            <Custominput
+                label="¿Cuál es el RFC de la empresa? *"
+                type="text"
+                name="rfc"
+                :filled="false"
+                v-model:field="company.rfc"
+            />
+            <div class="mb-4">
+                <label class="custom-label">¿A que segmentos pertenece la empresa? *</label>
+                <Segments 
+                    v-model="company.segments" 
+                    :multiple="true"
+                />
+            </div>
+            <div class="mb-4">
+                <label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por estado? *</label>
+                <States 
+                    v-model="company.states"
+                    :multiple="true"
+                />
+            </div>
+            <div class="mb-4">
+                <label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por municipio? *</label>
+                <Cities 
+                    v-model="company.cities"
+                    :multiple="true"
+                />
+            </div>
+            <div class="mb-4">
+                <label class="custom-label">¿Qué tipo de transportes utiliza la empresa? *</label>
+                <TruckTypes 
+                    v-model="company.truckTypes"
+                    :multiple="true"
+                />
+            </div>
+            <Custominput
+                label="Información adicional de la empresa:"
+                type="text"
+                name="description"
+                :filled="false"
+                v-model:field="company.description"
+            />
+
+            <input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
+        </form>
+        <form @submit.prevent="handleSendRegister" v-if="step === 3" class="form-view">
+            <div class="d-flex justify-content-center align-items-center mb-4">
+                <a  
+                    @click="handleBack(2)"
+                    class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
+            </div>
+            <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+            <h2>Información personal</h2>
+            <div class="divider mt-2 mb-4"></div>
+            <Custominput
+                label="Nombres(s):"
+                type="text"
+                name="name"
+                :filled="false"
+                v-model:field="user.name"
+            />
+            <Custominput
+                label="Apellidos(s):"
+                type="text"
+                name="lastname"
+                :filled="false"
+                v-model:field="user.lastName"
+            />
+            <div class="content-phone">
+                <Custominput
+                    label="Teléfono 1: *"
+                    type="number"
+                    name="phone1"
+                    :filled="false"
+                    v-model:field="user.phone1"
+                />
+                <Custominput
+                    label="Teléfono 2:"
+                    type="number"
+                    name="phone2"
+                    :filled="false"
+                    v-model:field="user.phone2"
+                />
+            </div>
+
+            <input type="submit" value="Guardar" class="btn-primary-lg btn-lg-block my-4">
+        </form>
     </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;
-    }
+  .content-phone{
+    display: flex;
+    flex-direction: row;
+    gap: 5rem;
+  }
 
-    /* Hide the browser's default radio button */
-    .container input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    }
+  .form-view {
+    min-width: 300px;
+  }
 
-    /* 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;
+  @media (max-width: 568px) {
+    .content-phone{
+        flex-direction: column;
+        gap: 1rem
     }
+  }
 </style>
 
 

src/views/LoginView.vue

@@ -10,8 +10,8 @@
 
 
     const form = reactive({
-        email: 'alexandro.uc.santos@gmail.com',
-        password: 'Password0',
+        email: 'julio_alex@etaviaporte.com',
+        password: 'Password1',
     });
 
     const router = useRouter();
@@ -80,7 +80,7 @@
 <template>
     <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>
+        <p class="subtitle mt-4 mb-5 text-center">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 != ''"/>