From b979040511778a6a675cb0b335ca8c2c48690440 Mon Sep 17 00:00:00 2001
From: Alejandro Leal <aleaberm12@gmail.com>
Date: Fri, 11 Oct 2024 14:52:04 +0200
Subject: [PATCH 1/2] reset password (wip)

---
 src/pages/auth/reset.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/pages/auth/reset.vue b/src/pages/auth/reset.vue
index 3240d3a..018b7c9 100644
--- a/src/pages/auth/reset.vue
+++ b/src/pages/auth/reset.vue
@@ -21,6 +21,15 @@ useHead({
 		},
 	],
 });
+
+const resetForm = ref({
+	email: '',
+});
+
+const submitForm = async (event: Event) => {
+	event.preventDefault();
+	console.log(resetForm.value.email);
+}
 </script>
 
 <template>
@@ -31,7 +40,7 @@ useHead({
 			</div>
 
 			<div class="flex flex-row items-center lg:px-8 w-full min-h-svh sm:w-1/2 md:w-2/5 xl:w-2/6 bg-white">
-				<form class="w-full px-6 py-4">
+				<form class="w-full px-6 py-4" @submit="submitForm">
 					<NuxtLinkLocale to="/" class="flex flex-col items-center mb-4 xl:mb-5">
 						<nuxt-icon name="logo" class="w-1/3" />
 						<p class="mt-3 logo">Ace Books</p>
@@ -40,7 +49,9 @@ useHead({
 					<label class="block text-sm font-medium text-gray-700">{{ t('reset.email') }}</label>
 					<div class="mt-1 mb-4">
 						<input
+							v-model="resetForm.email"
 							type="email"
+							required
 							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 						/>
 					</div>

From a482d255a6836342d284623f078fcc5ec6066114 Mon Sep 17 00:00:00 2001
From: Alejandro Leal <aleaberm12@gmail.com>
Date: Sat, 9 Nov 2024 18:44:37 +0100
Subject: [PATCH 2/2] spinner, input, button, landingButton, fix docker, reset,
 add feedback in buttons

---
 docker-compose.yml                      |  6 ++-
 docker/app/Dockerfile                   |  4 +-
 nuxt.config.ts                          |  5 +++
 src/components/Header.vue               |  8 ++--
 src/components/common/Button.vue        | 18 ++++++---
 src/components/common/Input.vue         | 10 +++++
 src/components/common/LandingButton.vue |  7 ++++
 src/components/common/Spinner.vue       | 50 ++++++++++++++++++++++++
 src/error.vue                           |  8 +---
 src/i18n/en/reset.json                  |  5 ++-
 src/i18n/es/reset.json                  |  5 ++-
 src/pages/auth/login.vue                | 22 +++++++----
 src/pages/auth/register.vue             | 25 ++++++------
 src/pages/auth/reset.vue                | 52 ++++++++++++++++++++++---
 src/pages/index.vue                     |  6 +--
 15 files changed, 183 insertions(+), 48 deletions(-)
 create mode 100644 src/components/common/Input.vue
 create mode 100644 src/components/common/LandingButton.vue
 create mode 100644 src/components/common/Spinner.vue

diff --git a/docker-compose.yml b/docker-compose.yml
index 48ddbaa..d4db1a3 100644
--- a/docker-compose.yml
+++ b/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:
diff --git a/docker/app/Dockerfile b/docker/app/Dockerfile
index 5f16ded..5358bd4 100644
--- a/docker/app/Dockerfile
+++ b/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"]
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 59db52b..6e276b1 100644
--- a/nuxt.config.ts
+++ b/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: [
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9565daa..6a46a30 100644
--- a/src/components/Header.vue
+++ b/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>
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
index 2b77a3f..5494040 100644
--- a/src/components/common/Button.vue
+++ b/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>
diff --git a/src/components/common/Input.vue b/src/components/common/Input.vue
new file mode 100644
index 0000000..299485a
--- /dev/null
+++ b/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>
diff --git a/src/components/common/LandingButton.vue b/src/components/common/LandingButton.vue
new file mode 100644
index 0000000..c218b3f
--- /dev/null
+++ b/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>
diff --git a/src/components/common/Spinner.vue b/src/components/common/Spinner.vue
new file mode 100644
index 0000000..075a418
--- /dev/null
+++ b/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>
diff --git a/src/error.vue b/src/error.vue
index 527ae06..b89aee4 100644
--- a/src/error.vue
+++ b/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" />
diff --git a/src/i18n/en/reset.json b/src/i18n/en/reset.json
index 1fd969e..a19a62b 100644
--- a/src/i18n/en/reset.json
+++ b/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"
 }
diff --git a/src/i18n/es/reset.json b/src/i18n/es/reset.json
index 15c08f5..12eb7db 100644
--- a/src/i18n/es/reset.json
+++ b/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"
 }
diff --git a/src/pages/auth/login.vue b/src/pages/auth/login.vue
index 9cea5c0..3f21303 100644
--- a/src/pages/auth/login.vue
+++ b/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,6 +54,8 @@ const submitForm = async (event: Event) => {
 
 	if ('data' in response && response.data.statusCode === 401) {
 		showLoginError.value = true;
+		fetching.value = false;
+
 		return;
 	}
 
@@ -59,6 +63,9 @@ const submitForm = async (event: Event) => {
 		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>
diff --git a/src/pages/auth/register.vue b/src/pages/auth/register.vue
index 51fed61..3c5fead 100644
--- a/src/pages/auth/register.vue
+++ b/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>
diff --git a/src/pages/auth/reset.vue b/src/pages/auth/reset.vue
index 018b7c9..a7f7374 100644
--- a/src/pages/auth/reset.vue
+++ b/src/pages/auth/reset.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n();
+const config = useRuntimeConfig();
 
 defineI18nRoute({
 	paths: {
@@ -25,10 +26,46 @@ useHead({
 const resetForm = ref({
 	email: '',
 });
+const fetching = ref(false);
 
 const submitForm = async (event: Event) => {
 	event.preventDefault();
-	console.log(resetForm.value.email);
+
+	if (fetching.value) return;
+
+	fetching.value = true;
+
+	const response = await $fetch<any>(config.public.backendUrl + '/emails/reset-password', {
+		method: 'POST',
+		body: resetForm.value,
+		ignoreResponseError: true,
+	});
+
+	if ('statusCode' in response && response.statusCode === 429) {
+		useNuxtApp().$toast.error(t('reset.toast_error_429'), {
+			position: useNuxtApp().$toast.POSITION.TOP_CENTER,
+		});
+
+		fetching.value = false;
+
+		return;
+	}
+
+	if ('statusCode' in response && response.statusCode !== 200) {
+		useNuxtApp().$toast.error(t('reset.toast_error'), {
+			position: useNuxtApp().$toast.POSITION.TOP_CENTER,
+		});
+
+		fetching.value = false;
+
+		return;
+	}
+
+	useNuxtApp().$toast.success(t('reset.toast_success'), {
+		position: useNuxtApp().$toast.POSITION.TOP_CENTER,
+	});
+
+	fetching.value = false;
 }
 </script>
 
@@ -48,17 +85,20 @@ const submitForm = async (event: Event) => {
 
 					<label class="block text-sm font-medium text-gray-700">{{ t('reset.email') }}</label>
 					<div class="mt-1 mb-4">
-						<input
+						<Input
 							v-model="resetForm.email"
 							type="email"
 							required
-							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md focus:ring-green-500 focus:border-green-500"
 						/>
 					</div>
 
-					<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 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
-						{{ t('reset.reset') }}
-					</button>
+					<Button
+						type="submit"
+						:disable="fetching"
+					>
+						<Spinner v-if="fetching" />
+						<span v-else>{{ t('reset.reset') }}</span>
+					</Button>
 
 					<div class="mt-1.5">
 						<span class="text-sm mr-1">{{ t('reset.question_1') }}</span>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7e650e3..8c1decb 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -31,9 +31,9 @@ useHead({
 				<p class="text-sm mt-2 mb-6 text-shadow shadow-black/75">{{ t('home.p') }}</p>
 
 				<NuxtLinkLocale to="/register">
-					<Button class="px-4 py-3 uppercase" variant="primary">
-						{{ t('home.button') }}
-					</Button>
+					<LandingButton>
+						<div class="px-2 py-1 uppercase">{{ t('home.button') }}</div>
+					</LandingButton>
 				</NuxtLinkLocale>
 
 				<NuxtImg src="/images/bg.webp" placeholder preload loading="lazy" class="absolute top-0 left-0 -z-10 w-full h-full object-cover" />