feat(): Reset password + verify account + logout

docker-compose.yml

@@ -4,7 +4,9 @@ services:
       context: .
       dockerfile: ./docker/app/Dockerfile
     ports:
-      - "3000:3000"
+      - 3000:3000
+      - 24678:24678
+    restart: unless-stopped
     env_file:
       - .env
     volumes:
@@ -16,7 +18,7 @@ services:
   nginx:
     image: nginx:alpine
     ports:
-      - "80:80"
+      - 80:80
     volumes:
       - ./docker/nginx/nginx.conf:/etc/nginx/nginx.conf
     depends_on:

docker/app/Dockerfile

@@ -14,4 +14,6 @@ RUN yarn install
 
 EXPOSE 3000
 
-CMD ["yarn", "dev"]
+ENV CHOKIDAR_USEPOLLING=true
+
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

nuxt.config.ts

@@ -56,6 +56,11 @@ export default defineNuxtConfig({
 				usePolling: true,
 				interval: 100,
 			},
+			hmr: {
+				protocol: "ws",
+				host: "0.0.0.0",
+				port: 24678,
+			},
 		},
 	},
 	components: [

src/components/Header.vue

@@ -49,9 +49,9 @@ const applyNavBackground = computed(() => {
 				</button>
 
 				<NuxtLinkLocale class="hidden sm:block" to="/login">
-					<Button class="p-2" variant="primary">
+					<LandingButton>
 						{{ t('header.sign_in') }}
-					</Button>
+					</LandingButton>
 				</NuxtLinkLocale>
 			</div>
 
@@ -69,9 +69,9 @@ const applyNavBackground = computed(() => {
 				>
 					<li class="sm:inline-flex sm:w-auto w-full items-center justify-center">
 						<NuxtLinkLocale to="/login">
-							<Button class="p-2" variant="primary">
+							<LandingButton>
 								{{ t('header.sign_in') }}
-							</Button>
+							</LandingButton>
 						</NuxtLinkLocale>
 					</li>
 				</ul>

src/components/common/Button.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-defineProps<{
-	class: string;
-	variant: 'primary' | 'secondary';
+const {
+	type = 'button',
+	disable = false,
+	fetching = false,
+} = defineProps<{
+	type?: 'submit' | 'button';
+	disable?: boolean;
+	fetching?: boolean;
 }>();
 </script>
 
 <template>
 	<button
-		:class="`text-white text-shadow shadow shadow-black/70 border-2 rounded-md hover:bg-white/20 transition duration-300 ease-in-out ${$props.class}`"
+		:type="type"
+		:disable="fetching || disable"
+		class="w-full h-10 px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
 	>
-		<slot />
+		<Spinner v-if="fetching" />
+		<slot v-else />
 	</button>
 </template>

src/components/common/Input.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const model = defineModel();
+</script>
+
+<template>
+	<input
+		v-model="model"
+		class="shadow-sm block w-full h-10 sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
+	/>
+</template>

src/components/common/LandingButton.vue

@@ -0,0 +1,7 @@
+<template>
+	<button
+		class="text-white text-shadow shadow shadow-black/70 border-2 rounded-md hover:bg-white/20 transition duration-300 ease-in-out p-2"
+	>
+		<slot />
+	</button>
+</template>

src/components/common/Spinner.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="spinner flex justify-center items-center w-full h-full">
+		<div class="bounce1 bg-acebooks-green-100 w-2 h-2 inline-block rounded-full"></div>
+		<div class="bounce2 bg-acebooks-green-100 w-2 h-2 inline-block rounded-full mx-1"></div>
+		<div class="bounce3 bg-acebooks-green-100 w-2 h-2 inline-block rounded-full"></div>
+	</div>
+</template>
+
+<style scoped>
+.spinner > div {
+	-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>

src/error.vue

@@ -39,13 +39,9 @@ useHead({
 			<article class="flex flex-col items-center text-center">
 				<h1 class="text-9xl text-white text-opacity-60 mb-6 text-shadow shadow-black/40">{{ error.statusCode }}</h1>
 
-				<Button
-					variant="primary"
-					@click="handleError"
-					class="text-white px-4 py-3 border-2 rounded-md uppercase bg-white bg-opacity-0 hover:bg-opacity-20 transition duration-300 ease-in-out"
-				>
+				<LandingButton @click="handleError">
 					{{ t('error.button') }}
-				</Button>
+				</LandingButton>
 			</article>
 
 			<NuxtImg src="/images/bg.webp" placeholder preload loading="lazy" class="absolute top-0 left-0 -z-10 w-full h-full object-cover" />

src/i18n/en/reset.json

@@ -6,5 +6,8 @@
 	"login": "Log in",
 	"register": "Sign up",
 	"question_1": "Remember your password?",
-	"question_2": "Don’t you have an account?"
+	"question_2": "Don’t you have an account?",
+	"toast_error_429": "Too many requests. Try again later",
+	"toast_error": "An error occurred. Try again later",
+	"toast_success": "Email sent successfully"
 }

src/i18n/es/reset.json

@@ -6,5 +6,8 @@
 	"login": "Iniciar sesión",
 	"register": "Registrarme",
 	"question_1": "¿Recuerdas tu contraseña?",
-	"question_2": "¿No tienes una cuenta?"
+	"question_2": "¿No tienes una cuenta?",
+	"toast_error_429": "Has realizado demasiados intentos. Prueba de nuevo más tarde",
+	"toast_error": "Ups... Ha ocurrido un error. Prueba de nuevo más tarde",
+	"toast_success": "Email enviado correctamente"
 }

src/pages/auth/login.vue

@@ -31,6 +31,7 @@ const loginForm = ref({
 	email: '',
 	password: '',
 });
+const fetching = ref(false);
 const showLoginError = ref(false);
 
 const readyForSubmit = computed(() => {
@@ -40,8 +41,9 @@ const readyForSubmit = computed(() => {
 const submitForm = async (event: Event) => {
 	event.preventDefault();
 
-	if (!readyForSubmit.value) return;
+	if (!readyForSubmit.value || fetching.value) return;
 
+	fetching.value = true;
 	showLoginError.value = false;
 
 	const response = await $fetch<SessionSuccessResponse | LoginErrorResponse>(config.public.frontendUrl + '/api/auth/login', {
@@ -52,13 +54,18 @@ const submitForm = async (event: Event) => {
 
 	if ('data' in response && response.data.statusCode === 401) {
 		showLoginError.value = true;
+		fetching.value = false;
+
 		return;
 	}
 
 	if ('data' in response && response.data.statusCode !== 200) {
 		useNuxtApp().$toast.error(t('login.toast_error'), {
 			position: useNuxtApp().$toast.POSITION.TOP_CENTER,
 		});
+
+		fetching.value = false;
+
 		return;
 	}
 
@@ -68,6 +75,8 @@ const submitForm = async (event: Event) => {
 	const libraryPath = libraryRoute != null ? libraryRoute.path : '/';
 
 	await navigateTo(libraryPath);
+
+	fetching.value = false;
 };
 </script>
 
@@ -87,31 +96,28 @@ const submitForm = async (event: Event) => {
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('login.email') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="loginForm.email"
 							type="email"
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 						/>
 					</div>
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('login.password') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="loginForm.password"
 							type="password"
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 						/>
 
 						<div v-if="showLoginError" class="text-sm text-red-500 pt-1">{{ t('login.error') }}</div>
 					</div>
 
-					<button
+					<Button
 						type="submit"
-						class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 enabled:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-60 disabled:cursor-default"
 						:disabled="!readyForSubmit"
 					>
 						{{ t('login.login') }}
-					</button>
+					</Button>
 
 					<div class="mt-1.5">
 						<span class="text-sm mr-1">{{ t('login.question_1') }}</span>

src/pages/auth/register.vue

@@ -32,7 +32,7 @@ const registerForm = ref({
 	password: '',
 	repeatPassword: '',
 });
-
+const fetching = ref(false);
 const emailErrors = ref<string[]>([]);
 const passwordErrors = ref<string[]>([]);
 
@@ -58,8 +58,9 @@ const readyForSubmit = computed(() => {
 const submitForm = async (event: Event) => {
 	event.preventDefault();
 
-	if (!readyForSubmit.value) return;
+	if (!readyForSubmit.value || fetching.value) return;
 
+	fetching.value = true;
 	emailErrors.value = [];
 	passwordErrors.value = [];
 
@@ -72,6 +73,7 @@ const submitForm = async (event: Event) => {
 	if ('data' in response && response.data.statusCode === 400) {
 		emailErrors.value = response.data.message.filter((message) => message.includes('email'));
 		passwordErrors.value = response.data.message.filter((message) => !message.includes('email'));
+		fetching.value = false;
 
 		return;
 	}
@@ -80,6 +82,9 @@ const submitForm = async (event: Event) => {
 		useNuxtApp().$toast.error(t('register.toast_error'), {
 			position: useNuxtApp().$toast.POSITION.TOP_CENTER,
 		});
+
+		fetching.value = false;
+
 		return;
 	}
 
@@ -89,6 +94,8 @@ const submitForm = async (event: Event) => {
 	const libraryPath = libraryRoute != null ? libraryRoute.path : '/';
 
 	await navigateTo(libraryPath);
+
+	fetching.value = false;
 };
 </script>
 
@@ -108,10 +115,9 @@ const submitForm = async (event: Event) => {
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('register.email') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="registerForm.email"
 							type="email"
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 							required
 						/>
 
@@ -120,10 +126,9 @@ const submitForm = async (event: Event) => {
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('register.password') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="registerForm.password"
 							type="password"
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 							required
 						/>
 
@@ -139,10 +144,9 @@ const submitForm = async (event: Event) => {
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('register.repeat_password') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="registerForm.repeatPassword"
 							type="password"
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 							required
 						/>
 
@@ -171,13 +175,12 @@ const submitForm = async (event: Event) => {
 						</template>
 					</i18n-t>
 
-					<button
+					<Button
 						type="submit"
-						class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 enabled:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-60 disabled:cursor-default"
 						:disabled="!readyForSubmit"
 					>
 						{{ t('register.register') }}
-					</button>
+					</Button>
 
 					<div class="mt-1.5">
 						<span class="text-sm mr-1">{{ t('register.question') }}</span>