Refactor Login and Logout components

.editorconfig

@@ -298,7 +298,7 @@ ij_typescript_spaces_within_brackets = false
 ij_typescript_spaces_within_catch_parentheses = false
 ij_typescript_spaces_within_for_parentheses = false
 ij_typescript_spaces_within_if_parentheses = false
-ij_typescript_spaces_within_imports = false
+ij_typescript_spaces_within_imports = true
 ij_typescript_spaces_within_interpolation_expressions = false
 ij_typescript_spaces_within_method_call_parentheses = false
 ij_typescript_spaces_within_method_parentheses = false
@@ -472,7 +472,7 @@ ij_javascript_spaces_within_brackets = false
 ij_javascript_spaces_within_catch_parentheses = false
 ij_javascript_spaces_within_for_parentheses = false
 ij_javascript_spaces_within_if_parentheses = false
-ij_javascript_spaces_within_imports = false
+ij_javascript_spaces_within_imports = true
 ij_javascript_spaces_within_interpolation_expressions = false
 ij_javascript_spaces_within_method_call_parentheses = false
 ij_javascript_spaces_within_method_parentheses = false

src/components/navbar/AvatarComponent.vue

@@ -28,23 +28,18 @@
     </div>
 </template>
 
-<script lang="ts">
-    import {defineComponent} from "vue";
-    import {useAuthStore} from "@/store/authStore";
-
-    export default defineComponent({
-        name: "AvatarComponent",
-        setup() {
-            const authStore = useAuthStore();
-            const currentUser = authStore.loggedUser;
-            return { currentUser };
-        },
-        methods: {
-            logout() {
-                this.$router.push('/logout');
-            }
-        }
-    });
+<script setup lang="ts">
+
+import { useAuth } from "@/composables/useAuth";
+import { useAuthStore } from "@/store/authStore";
+const auth = useAuth();
+const authStore = useAuthStore();
+
+const currentUser = authStore.loggedUser;
+
+const logout = async () => {
+    await auth.logout();
+};
 </script>
 
 <style scoped>

src/composables/useAuth.ts

@@ -0,0 +1,44 @@
+import { useAuthStore } from "@/store/authStore";
+import { notificationService } from "@/_services";
+import { LocationQuery, LocationQueryValue, useRouter } from "vue-router";
+
+/**
+ * Wrapper para authStore. Interactúa con el store de autenticación y además con el router, notificaciones etc.
+ */
+export function useAuth() {
+
+    const authStore = useAuthStore();
+    const router = useRouter();
+
+    const login = async (payload: { username: string, password: string }, redirectTo: LocationQueryValue | null) => {
+        try {
+            await authStore.login(payload);
+
+            notificationService.showNotification("¡Has iniciado sesión correctamente!");
+            if (redirectTo) {
+                // Enviar a la redirección
+                router.push(redirectTo as string);
+            } else {
+                // Redirigir al home en caso normal
+                router.push({name: "home"});
+            }
+        } catch (error: any) {
+            let message: string;
+            if (error.code === 600) {
+                message = "Fallo al iniciar sesión: Credenciales inválidas";
+            } else {
+                message = "Fallo al iniciar sesión: " + error.message;
+            }
+            notificationService.showNotification(message, 'error');
+            throw error;
+        }
+    }
+
+    const logout = async () => {
+        await authStore.signOut();
+        router.push({name: 'login'});
+        notificationService.showNotification('Has cerrado sesión correctamente');
+    }
+
+    return { login, logout };
+}

src/pages/auth/Login.vue

@@ -18,8 +18,8 @@
                                         <i class="fas fa-user"></i>
                                     </span>
 
-                                    <input v-model="username" type="text" autofocus required
-                                        class="input" :class="{ 'is-danger': submitted && !username }" />
+                                    <input v-model="form.username" type="text" autofocus required
+                                        class="input" :class="{ 'is-danger': form.submitted && !form.username }" />
 
                                 </div>
                             </div>
@@ -30,14 +30,14 @@
                                         <i class="fas fa-lock"></i>
                                     </span>
 
-                                    <input v-model="password" type="password" required
-                                        class="input" :class="{ 'is-danger': submitted && !password }" />
+                                    <input v-model="form.password" type="password" required
+                                        class="input" :class="{ 'is-danger': form.submitted && !form.password }" />
 
                                 </div>
                             </div>
                             <div class="field is-grouped">
                                 <div class="control">
-                                    <button type="submit" class="button is-link" :disabled="isLoggingIn">
+                                    <button type="submit" class="button is-link" :disabled="form.isLoggingIn">
                                         Acceder
                                     </button>
                                 </div>
@@ -46,10 +46,10 @@
                     </div>
                     <div class="card-footer">
                         <div class="card-footer-item">
-                            <router-link :to="{ name: 'register', query: { redirect: this.$route.query.redirect }}">Registrarse</router-link>
+                            <router-link :to="{ name: 'register', query: { redirect: redirectTo }}">Registrarse</router-link>
                         </div>
                         <div class="card-footer-item">
-                            <router-link :to="{ name: 'forgotpassword', query: { redirect: this.$route.query.redirect }}">He olvidado mi contraseña</router-link>
+                            <router-link :to="{ name: 'forgotpassword', query: { redirect: redirectTo }}">He olvidado mi contraseña</router-link>
                         </div>
                     </div>
                 </div>
@@ -58,71 +58,50 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue";
-import {useAuthStore} from "@/store/authStore";
-import {notificationService} from "@/_services";
+<script setup lang="ts">
+import { useAuthStore } from "@/store/authStore";
+import { LocationQueryValue, useRoute } from "vue-router";
+import { onMounted, reactive } from "vue";
+import { useAuth } from "@/composables/useAuth";
 
-export default defineComponent({
-    name: "Login",
-    setup() {
-        const authStore = useAuthStore();
+const authStore = useAuthStore();
+const route = useRoute();
+const auth = useAuth();
 
-        const login = authStore.login;
-        const registeredMail = authStore.mail;
-        return { login, registeredMail }
-    },
-    data() {
-        return {
-            username: "",
-            password: "",
-            submitted: false,
-            isLoggingIn: false,
-            redirectTo: this.$route.query.redirect
-        }
-    },
-    created() {
-        if (!!this.registeredMail) {
-            this.username = this.registeredMail;
-        }
-    },
-    methods: {
-        handleSubmit() {
-            // Prevenir multiples clicks en el login
-            if (this.isLoggingIn) return;
+const redirectTo = route.query.redirect as LocationQueryValue;
 
-            this.submitted = true;
-            this.isLoggingIn = true;
-            if (this.username && this.password) {
-                this.login({
-                    username: this.username,
-                    password: this.password,
-                }).then(
-                    () => {
-                        notificationService.showNotification("¡Has iniciado sesión correctamente!");
-
-                        if (this.redirectTo !== undefined) {
-                            // Enviar a la redirección
-                            this.$router.push(this.redirectTo as string);
-                        } else {
-                            // Redirigir al home en caso normal
-                            this.$router.push({name: "home"});
-                        }
-                    },
-                    (error: any) => {
-                        let message: string;
-                        if (error.code === 600) {
-                            message = "Fallo al iniciar sesión: Credenciales inválidas";
-                        } else {
-                            message = "Fallo al iniciar sesión: " + error.message;
-                        }
-                        this.isLoggingIn = false;
+const registeredMail = authStore.mail;
+const form = reactive({
+    username: "",
+    password: "",
+    submitted: false,
+    isLoggingIn: false,
+});
 
-                        notificationService.showNotification(message, 'error');
-                    }
-                );
-            }
-        }
+onMounted(() => {
+    if (!!registeredMail) {
+        form.username = registeredMail;
     }
 });
+
+const handleSubmit = async () => {
+    // Prevenir multiples clicks en el login
+    if (form.isLoggingIn) return;
+
+    form.submitted = true;
+    form.isLoggingIn = true;
+    if (!(form.username && form.password)) {
+        return;
+    }
+
+    try {
+        const payload = {
+            username: form.username,
+            password: form.password,
+        };
+        await auth.login(payload, redirectTo);
+    } catch (error: any) {
+        form.isLoggingIn = false;
+    }
+};
 </script>

src/pages/auth/Logout.vue

@@ -2,25 +2,13 @@
     <div id="logoutComponent"></div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {useAuthStore} from "@/store/authStore";
-import {defineComponent} from "vue";
-import {notificationService} from "@/_services";
+import { onMounted } from "vue";
+import { useAuth } from "@/composables/useAuth";
+const auth = useAuth();
 
-export default defineComponent({
-    name: "LogoutComponent",
-    setup() {
-        const authStore = useAuthStore();
-
-        const signOut = authStore.signOut;
-        return { signOut };
-    },
-    created() {
-        this.signOut().then(() => {
-            this.$router.push({name: 'login'});
-            notificationService.showNotification('Has cerrado sesión correctamente', 'info');
-        });
-    }
+onMounted(async() => {
+    await auth.logout();
 });
 </script>

src/pages/error/ErrorNotFound.vue

@@ -14,15 +14,11 @@
     </section>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue";
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+const router = useRouter();
 
-export default defineComponent({
-    name: "ErrorNotFound",
-    methods: {
-        back() {
-            this.$router.go(-1);
-        }
-    }
-});
+const back = () => {
+    router.go(-1);
+};
 </script>

src/pages/landing/LandingHome.vue

@@ -119,18 +119,15 @@
     </div>
 </template>
 
-<script lang="ts">
-import {defineComponent} from "vue";
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
 
-export default defineComponent({
-    name: "LandingHome",
-    methods: {
-        sendToRegister() {
-            window.scrollTo({ top: 0, left: 0, behavior: "smooth"});
-            this.$router.push({path: '/register'});
-        }
-    }
-});
+const router = useRouter();
+const sendToRegister = () => {
+    window.scrollTo({top: 0, left: 0, behavior: "smooth"});
+
+    router.push({path: '/register'});
+};
 </script>
 
 <style lang="scss" scoped>