new loading indicator, new design in login, register and reset

.env.example

@@ -1,4 +1,5 @@
 NODE_ENV=development
+NUXT_SESSION_PASSWORD=
 
 BACKEND_URL=http://localhost:8080
 

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+	compatibilityDate: '2024-07-20',
 	srcDir: 'src/',
 	css: ['~/assets/css/main.css'],
 	postcss: {
@@ -22,6 +23,7 @@ export default defineNuxtConfig({
 	runtimeConfig: {
 		// Private keys are only available on the server
 		nodeEnv: process.env.NODE_ENV,
+		nuxtSessionPassword: process.env.NUXT_SESSION_PASSWORD,
 		backendUrl: process.env.BACKEND_URL,
 
 		// Public keys that are exposed to the client
@@ -43,7 +45,13 @@ export default defineNuxtConfig({
 			pathPrefix: false,
 		},
 	],
-	modules: ["nuxt-icons", "@nuxtjs/i18n", "@nuxtjs/mdc", "@nuxt/image"],
+	modules: [
+        "nuxt-icons",
+        "@nuxtjs/i18n",
+        "@nuxtjs/mdc",
+        "@nuxt/image",
+        "nuxt-auth-utils"
+    ],
 	i18n: {
 		vueI18n: './src/i18n/i18n.config.ts',
 		locales: [
@@ -64,4 +72,4 @@ export default defineNuxtConfig({
 			alwaysRedirect: true,
 		},
 	},
-});
+});

package.json

@@ -25,6 +25,7 @@
 		"@vueuse/components": "^10.11.0",
 		"@vueuse/core": "^10.11.0",
 		"nuxt": "^3.12.4",
+		"nuxt-auth-utils": "^0.2.0",
 		"nuxt-icons": "^3.2.1",
 		"vue": "^3.4.32",
 		"vue-router": "^4.4.0",

src/app.vue

@@ -1,6 +1,10 @@
 <template>
 	<NuxtLayout>
-		<NuxtLoadingIndicator />
+		<NuxtLoadingIndicator
+			:height="4"
+			color="#22c55e"
+			error-color="#ef4444"
+		/>
 		<NuxtPage />
 	</NuxtLayout>
 </template>

src/components/Footer.vue

@@ -38,7 +38,7 @@ const currentLocale = computed({
 							<NuxtLinkLocale to="/legal/faqs">{{ t('footer.faqs') }}</NuxtLinkLocale>
 						</li>
 						<li class="hover:text-white">
-							<a :href="`mailto:${$config.public.mailUsername}`">{{ t('footer.contact') }}</a>
+							<a :href="`mailto:${config.public.mailUsername}`">{{ t('footer.contact') }}</a>
 						</li>
 					</ul>
 				</div>
@@ -47,7 +47,7 @@ const currentLocale = computed({
 
 		<div class="bg-black px-2 py-4">
 			<div class="mx-auto md:w-3/4 flex flex-col-reverse md:flex-row items-center">
-				<div class="w-full md:w-4/5 mt-4 md:mt-0 text-center md:text-left">Copyright &copy; {{ new Date().getFullYear() }} Ace Books. {{ $t('footer.copyright') }}</div>
+				<div class="w-full md:w-4/5 mt-4 md:mt-0 text-center md:text-left">Copyright &copy; {{ new Date().getFullYear() }} Ace Books. {{ t('footer.copyright') }}</div>
 
 				<div class="w-full md:w-1/5 flex flex-row justify-center md:justify-end">
 					<Dropdown v-model="currentLocale" :items="locales.map(localeObj => ({ text: localeObj.name || localeObj.code, value: localeObj.code }))">

src/components/Header.vue

@@ -2,10 +2,12 @@
 import { useBreakpoints, breakpointsTailwind, useScroll, useElementSize } from '@vueuse/core';
 
 const body = ref<HTMLElement | null>(null);
+
 const { height: windowHeight } = useElementSize(body);
 const { y: topScroll } = useScroll(document);
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isResponsiveMenu = breakpoints.smaller('sm');
+const { t } = useI18n();
 
 const navActive = ref(false);
 
@@ -72,7 +74,7 @@ onBeforeMount(() => {
 						<li class="sm:inline-flex sm:w-auto w-full items-center justify-center">
 							<NuxtLinkLocale to="/login">
 								<MainButton class="p-2">
-									{{ $t('header.sign_in') }}
+									{{ t('header.sign_in') }}
 								</MainButton>
 							</NuxtLinkLocale>
 						</li>

src/components/RenderMarkdown.vue

@@ -30,7 +30,7 @@ defineProps<{
 				tr: h('tr', {}, h('slot')),
 				th: h('th', { class: 'py-2 px-3' }, h('slot')),
 				td: h('td', { class: 'py-2 px-3 border-t border-gray-300' }, h('slot')),
-				a: h('a', { class: 'text-blue-600 underline' }, h('slot')),
+				a: h('a', { class: 'text-blue-600 underline', target: '_blank' }, h('slot')),
 				img: h('img', { class: 'w-full' }),
 				em: h('em', {}, h('slot')),
 				strong: h('strong', {}, h('slot')),

src/error.vue

@@ -43,7 +43,7 @@ useHead({
 					@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"
 				>
-					{{ $t('error.button') }}
+					{{ t('error.button') }}
 				</MainButton>
 			</article>
 

src/i18n/en/login.json

@@ -1,10 +1,12 @@
 {
-	"title": "Login",
+	"title": "Log in",
 	"description": "Please enter your email and password to login",
-	"login": "Login",
-	"register": "Register",
+	"login": "Log in",
+	"register": "Sign up",
 	"email": "Email",
 	"password": "Password",
 	"error": "The email or password are incorrect",
-	"forgot_password": "Forgot password"
+	"forgot_password": "Forgot password",
+	"question_1": "Don’t you have an account?",
+	"question_2": "Forgot your password?"
 }

src/i18n/en/register.json

@@ -1,8 +1,8 @@
 {
-	"title": "Register",
-	"description_en": "Register to start reading wherever you are.",
-	"login": "Login",
-	"register": "Register",
+	"title": "Sign up",
+	"description_en": "Sign up to start reading wherever you are.",
+	"login": "Log in",
+	"register": "Sign up",
 	"email": "Email",
 	"email_error": "This email is not valid.",
 	"password": "Password",
@@ -13,5 +13,9 @@
 	"password_validation_4": "One number",
 	"password_validation_5": "One special character",
 	"repeat_password": "Repeat password",
-	"repeat_password_error": "Passwords do not match."
+	"repeat_password_error": "Passwords do not match.",
+	"question": "Already have an account?",
+	"warning": "By continuing, you agree to Ace Books {terms-of-use} and {privacy-policy}.",
+	"terms-of-use": "Terms of Use",
+	"privacy-policy": "Privacy Policy"
 }

src/i18n/en/reset.json

@@ -2,5 +2,5 @@
 	"title": "Reset password",
 	"description": "Enter your email address and we will send you a link to reset your password",
 	"email": "Email",
-	"next": "Next"
+	"reset": "Reset password"
 }

src/i18n/es/login.json

@@ -6,5 +6,7 @@
 	"email": "Email",
 	"password": "Contraseña",
 	"error": "El email o la contraseña son incorrectos",
-	"forgot_password": "Recuperar contraseña"
+	"forgot_password": "Recuperar contraseña",
+	"question_1": "¿No tienes una cuenta?",
+	"question_2": "¿Olvidaste tu contraseña?"
 }

src/i18n/es/register.json

@@ -13,5 +13,9 @@
 	"password_validation_4": "Un número",
 	"password_validation_5": "Un carácter especial",
 	"repeat_password": "Repetir contraseña",
-	"repeat_password_error": "Las contraseñas no coinciden."
+	"repeat_password_error": "Las contraseñas no coinciden.",
+	"question": "¿Ya tienes una cuenta?",
+	"warning": "Al continuar, acepta los {terms-of-use} y la {privacy-policy} de Ace Books.",
+	"terms-of-use": "Términos de uso",
+	"privacy-policy": "Política de privacidad"
 }

src/i18n/es/reset.json

@@ -2,5 +2,5 @@
 	"title": "Restaurar contraseña",
 	"description": "Introduce tu email y te enviaremos un enlace para restaurar tu contraseña",
 	"email": "Email",
-	"next": "Siguiente"
+	"reset": "Restaurar contraseña"
 }

src/pages/auth/login.vue

@@ -20,76 +20,63 @@ useHead({
 </script>
 
 <template>
-	<div class="flex flex-col justify-center min-h-screen">
-		<div class="m-6 sm:mx-auto sm:w-full sm:max-w-md">
-			<NuxtLinkLocale
-				to="/"
-				class="flex justify-center mb-4 text-shadow shadow-black/75 text-center text-4xl cursor-pointer text-white"
-			>
-				Ace Books
-			</NuxtLinkLocale>
+	<div class="h-screen flex flex-col">
+		<div class="flex flex-row justify-end">
+			<div class="hidden sm:block min-h-svh flex-1 relative">
+				<NuxtImg src="/images/bg.webp" placeholder preload loading="lazy" class="absolute top-0 left-0 -z-10 w-full h-full object-cover" />
+			</div>
 
-			<div class="flex flex-row relative">
-				<NuxtLinkLocale
-					class="flex justify-center items-center z-10 w-1/2 text-gray-700 bg-white text-xl font-semibold px-6 py-4 rounded-tl-md focus:outline-none text-center"
-					to="/login"
-				>
-					<div>{{ $t('register.login') }}</div>
-				</NuxtLinkLocale>
+			<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">
+					<NuxtLinkLocale to="/">
+						<nuxt-icon name="logo" class="flex w-1/3 mx-auto mb-4 xl:mb-5" />
+					</NuxtLinkLocale>
 
-				<NuxtLinkLocale
-					class="flex justify-center items-center z-10 w-1/2 text-gray-700 bg-white text-xl font-semibold px-6 py-4 rounded-tr-md focus:outline-none text-center shadow-inner-full bg-opacity-85"
-					to="/register"
-				>
-					<div>{{ $t('register.register') }}</div>
-				</NuxtLinkLocale>
+					<label class="block text-sm font-medium text-gray-700">{{ t('login.email') }}</label>
+					<div class="mt-1 mb-4">
+						<input
+							type="email"
+							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md"
+						/>
+					</div>
 
-				<div class="w-full hidden sm:flex justify-end sm:ml-14 absolute z-0">
-					<NuxtLinkLocale
-						to="/"
-						class="p-3 rounded-md hover:bg-white text-white hover:shadow-inner-full hover:bg-opacity-50 transition duration-300 ease-in-out cursor-pointer focus:outline-none"
-					>
-						<nuxt-icon name="close" class="flex w-6 h-6" />
-					</NuxtLinkLocale>
-				</div>
-			</div>
+					<label class="block text-sm font-medium text-gray-700">{{ t('login.password') }}</label>
+					<div class="mt-1 mb-4">
+						<input
+							type="password"
+							class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md"
+						/>
 
-			<form
-				class="px-6 py-8 lg:px-8 bg-white rounded-b-md"
-			>
-				<label class="block text-sm font-medium text-gray-700">{{ $t('login.email') }}</label>
-				<div class="mt-1 mb-4">
-					<input
-						type="email"
-						class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md"
-					/>
-				</div>
+						<div class="text-sm text-red-500 pt-1">{{ t('login.error') }}</div>
+					</div>
 
-				<label class="block text-sm font-medium text-gray-700">{{ $t('login.password') }}</label>
-				<div class="mt-1 mb-4">
-					<input
-						type="password"
-						class="shadow-sm block w-full sm:text-sm border-gray-300 rounded-md"
-					/>
+					<button type="submit" class="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+						{{ t('login.login') }}
+					</button>
 
-					<div class="text-sm text-red-500 pt-1">{{ $t('login.error') }}</div>
-				</div>
+					<div class="mt-1.5">
+						<span class="text-sm mr-1">{{ t('login.question_1') }}</span>
 
-				<div class="flex items-center justify-start my-4">
-					<NuxtLinkLocale
-						to="/reset"
-						class="text-sm font-medium text-blue-600 hover:text-blue-500"
-					>
-						{{ $t('login.forgot_password') }}
-					</NuxtLinkLocale>
-				</div>
+						<NuxtLinkLocale
+							to="/register"
+							class="text-sm font-medium text-blue-600 hover:text-blue-500"
+						>
+							{{ t('login.register') }}
+						</NuxtLinkLocale>
+					</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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-					{{ $t('login.login') }}
-				</button>
-			</form>
+					<div class="flex items-center justify-start mt-1.5">
+						<span class="text-sm mr-1">{{ t('login.question_2') }}</span>
 
-			<Footer />
+						<NuxtLinkLocale
+							to="/reset"
+							class="text-sm font-medium text-blue-600 hover:text-blue-500"
+						>
+							{{ t('login.forgot_password') }}
+						</NuxtLinkLocale>
+					</div>
+				</form>
+			</div>
 		</div>
 	</div>
 </template>