add: register & recovery password

src/components/ui/CustomInput.vue

@@ -0,0 +1,47 @@
+<script setup>
+    defineProps({
+        field: {
+            type: String
+        },
+        label: {
+            type: String,
+            required: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        type: {
+            type: String,
+            default: 'text',
+        },
+        helpText: {
+            type: String,
+            default: '',
+        }
+    })
+
+    defineEmits(['update:field'])
+</script>
+
+<template>
+    <div class="d-flex flex-column gap-2 mb-4">
+        <label class="custom-label" :for="name">{{ label }}</label>
+        <input 
+            class="custom-input"
+            :type="type" 
+            :id="name"
+            :name="name" 
+            :value="field"
+            @input="$event => $emit('update:field', $event.target.value)">
+        <span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
+    </div>
+</template>
+
+<style scoped>
+    .help {
+        font-size: 12px;
+        font-weight: 300;
+        color: rgb(108, 92, 92);
+    }
+</style>

src/components/ui/Notification.vue

@@ -0,0 +1,85 @@
+<script setup>
+    import { useNotificationsStore } from '../../stores/notifications';
+    const notifications = useNotificationsStore();
+</script>
+<template>
+    <div class="noty-fixed">
+        <div class="content-noty" v-if="notifications.show">
+            <div class="body">
+                <i v-if="notifications.error === false" class="fa-regular fa-circle-check text-success icon-category"></i>
+                <i v-else class="fa-solid fa-circle-exclamation text-danger"></i>
+                <div>
+                    <h4 class="noty-title">Notificación</h4>
+                    <p class="noty-body">{{ notifications.text }}</p>
+                </div>
+                <i class="fa-solid fa-xmark close-icon" @click="notifications.show = false"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+    .noty-fixed {
+        position: fixed;
+        right: 100px;
+        top: 50px;
+    }
+    .content-noty {
+        width: 100%;
+        max-width: 500px;
+        padding: 14px 20px;
+        background-color: white;
+        border-radius: 8px;
+
+        box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
+        -webkit-box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
+        -moz-box-shadow: -5px 5px 9px -1px rgba(0,0,0,0.20);
+    }
+
+    .body {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+        /* align-content: center; */
+        justify-content: space-between;
+    }
+
+    .noty-title {
+        font-size: 1.2rem;
+        color: black;
+        margin: 0px;
+        margin-bottom: 4px;
+    }
+    .noty-body {
+        font-size: 1rem;
+        color: black;
+        margin: 0px;
+    }
+    .icon-category {
+        font-size: 24px;
+    }
+    .close-icon {
+        position: absolute;
+        right: 12px;
+        top: 10px;
+        font-size: 20px;
+        cursor: pointer;
+    }
+
+    @media (max-width: 768px) {
+        .noty-fixed {
+            right: 20px;
+            top: 30px;
+        }
+
+        .content-noty {
+            width: 100%;
+            max-width: 320px;
+            padding: 14px 16px;
+            background-color: white;
+            border-radius: 8px;
+        }
+    }
+</style>

src/components/ui/NotificationBadge.vue

@@ -0,0 +1,56 @@
+<script setup>
+    defineProps({
+        msg: {
+            type: String,
+            required: true,
+        },
+        isError: {
+            type: Boolean,
+            default: true,
+        },
+        showIcon: {
+            type: Boolean,
+            default: true,
+        }
+    })
+</script>
+
+<template>
+    <div class="badge" :class="[isError ? 'badge-error' : 'badge-success']">
+        <span>
+            <i v-if="showIcon && isError" class="fa-solid fa-circle-exclamation me-2"></i> 
+            <i v-if="showIcon && !isError" class="fa-solid fa-circle-check"></i>
+            {{ msg }}
+        </span>
+    </div>
+</template>
+
+<style scoped>
+    .badge {
+        display: flex;
+        width: 100%;
+        color: #FFF;
+        font-size: 1rem;
+        font-weight: 700;
+        border-radius: 8px;
+        justify-content: center;
+        padding: 10px 16px;
+        margin-bottom: 12px;
+    }
+    
+    .badge-error {
+        background-color: rgb(238, 101, 101);
+    }
+    .badge-success {
+        background-color: rgb(29, 162, 113);
+    }
+
+    @media (max-width: 768px) {
+        .badge {
+            font-size: 0.8rem;
+            font-weight: 400;
+            border-radius: 8px;
+            padding: 10px 12px;
+        }
+    }
+</style>

src/components/ui/Spiner.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="spinner">
+        <div class="bounce1"></div>
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
+    </div>
+</template>
+
+<style scoped>
+    .spinner {
+    margin: 20px auto 0;
+    width: 70px;
+    text-align: center;
+    }
+    .spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: #FBBA33;
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    }
+
+    .spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+    }
+
+    .spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+    }
+
+    @-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+    }
+
+    @keyframes sk-bouncedelay {
+    0%, 80%, 100% { 
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    } 40% { 
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+    }
+    }
+</style>