Merge pull request #6 from HF6-PROJECT/kbi-1

feat: i18n
HF6-PROJECT · Oct 2, 2023 · 975b42c · 975b42c
2 parents f2cf474 + 13bda9c
commit 975b42c
Show file tree

Hide file tree

Showing 19 changed files with 1,422 additions and 340 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/ColorModeSwitcher.astro b/src/components/ColorModeSwitcher.astro
@@ -1,3 +1,7 @@
+---
+import { t } from '@lib/i18n';
+---
+
 <button
 	id="theme-toggle"
 	data-tooltip-target="tooltip-toggle"
@@ -29,7 +33,7 @@
 	role="tooltip"
 	class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300"
 >
-	Toggle dark mode
+	{t('layout.action.toggleThemeMode', Astro.locals.currentLocale)}
 	<div class="tooltip-arrow" data-popper-arrow></div>
 </div>
 

diff --git a/src/components/FormForgotPassword.astro b/src/components/FormForgotPassword.astro
@@ -1,5 +1,6 @@
 ---
 import { asset } from '@lib/helpers';
+import { t } from '@lib/i18n';
 ---
 
 <div
@@ -14,49 +15,30 @@ import { asset } from '@lib/helpers';
 	<!-- Card -->
 	<div class="w-full rounded-lg bg-white shadow dark:bg-gray-800 sm:max-w-md md:mt-0 xl:p-0">
 		<div class="w-full p-6 sm:p-8">
-			<h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Forgot your password?</h2>
+			<h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
+				{t('auth.forgotPassword.header', Astro.locals.currentLocale)}
+			</h2>
 			<p class="text-base font-normal text-gray-500 dark:text-gray-400">
-				Don't fret! Just type in your email and we will send you a code to reset your password!
+				{t('auth.forgotPassword.description', Astro.locals.currentLocale)}
 			</p>
 			<form class="mt-8 space-y-6" action="#">
 				<div>
 					<label for="email" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-						>Your email</label
+						>{t('auth.field.email', Astro.locals.currentLocale)}</label
 					>
 					<input
 						type="email"
 						name="email"
 						id="email"
 						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm"
-						placeholder="[email protected]"
+						placeholder={t('auth.field.emailPlaceholder', Astro.locals.currentLocale)}
 						required
 					/>
 				</div>
-				<div class="flex items-start">
-					<div class="flex h-5 items-center">
-						<input
-							id="remember"
-							aria-describedby="remember"
-							name="remember"
-							type="checkbox"
-							class="focus:ring-3 h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
-							required
-						/>
-					</div>
-					<div class="ml-3 text-sm">
-						<label for="remember" class="font-medium text-gray-900 dark:text-white"
-							>I accept the <a
-								href="#"
-								class="text-primary-700 hover:underline dark:text-primary-500"
-								>Terms and Conditions</a
-							></label
-						>
-					</div>
-				</div>
 				<button
 					type="submit"
 					class="w-full rounded-lg bg-primary-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto"
-					>Reset password</button
+					>{t('auth.forgotPassword.submit', Astro.locals.currentLocale)}</button
 				>
 			</form>
 		</div>

diff --git a/src/components/FormResetPassword.astro b/src/components/FormResetPassword.astro
@@ -1,5 +1,6 @@
 ---
 import { asset } from '@lib/helpers';
+import { t } from '@lib/i18n';
 ---
 
 <div
@@ -14,30 +15,32 @@ import { asset } from '@lib/helpers';
 
 	<!-- Card -->
 	<div class="w-full max-w-xl space-y-8 rounded-lg bg-white p-6 shadow dark:bg-gray-800 sm:p-8">
-		<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Reset your password</h2>
+		<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+			{t('auth.resetPassword.header', Astro.locals.currentLocale)}
+		</h2>
 		<form class="mt-8 space-y-6" action="#">
 			<div>
 				<label for="email" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-					>Your email</label
+					>{t('auth.field.email', Astro.locals.currentLocale)}</label
 				>
 				<input
 					type="email"
 					name="email"
 					id="email"
 					class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm"
-					placeholder="[email protected]"
+					placeholder={t('auth.field.emailPlaceholder', Astro.locals.currentLocale)}
 					required
 				/>
 			</div>
 			<div>
 				<label for="password" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-					>New password</label
+					>{t('auth.field.passwordNew', Astro.locals.currentLocale)}</label
 				>
 				<input
 					type="password"
 					name="password"
 					id="password"
-					placeholder="••••••••"
+					placeholder={t('auth.field.passwordNewPlaceholder', Astro.locals.currentLocale)}
 					class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm"
 					required
 				/>
@@ -46,40 +49,21 @@ import { asset } from '@lib/helpers';
 				<label
 					for="confirm-password"
 					class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-					>Confirm New Password</label
+					>{t('auth.field.passwordNewConfirm', Astro.locals.currentLocale)}</label
 				>
 				<input
 					type="password"
 					name="confirm-password"
 					id="confirm-password"
-					placeholder="••••••••"
+					placeholder={t('auth.field.passwordNewConfirmPlaceholder', Astro.locals.currentLocale)}
 					class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm"
 					required
 				/>
 			</div>
-			<div class="flex items-start">
-				<div class="flex h-5 items-center">
-					<input
-						id="remember"
-						aria-describedby="remember"
-						name="remember"
-						type="checkbox"
-						class="focus:ring-3 h-4 w-4 rounded border-gray-300 bg-gray-50 focus:ring-primary-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary-600"
-						required
-					/>
-				</div>
-				<div class="ml-3 text-sm">
-					<label for="remember" class="font-medium text-gray-900 dark:text-white"
-						>I accept the <a href="#" class="text-primary-700 hover:underline dark:text-primary-500"
-							>Terms and Conditions</a
-						></label
-					>
-				</div>
-			</div>
 			<button
 				type="submit"
 				class="w-full rounded-lg bg-primary-700 px-5 py-3 text-center text-base font-medium text-white hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto"
-				>Reset password</button
+				>{t('auth.resetPassword.submit', Astro.locals.currentLocale)}</button
 			>
 		</form>
 	</div>

diff --git a/src/components/FormSignIn.vue b/src/components/FormSignIn.vue
@@ -10,39 +10,45 @@
 		</a>
 		<!-- Card -->
 		<div class="w-full max-w-xl space-y-8 rounded-lg bg-white p-6 shadow dark:bg-gray-800 sm:p-8">
-			<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Sign in to platform</h2>
+			<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+				{{ t('auth.login.header') }}
+			</h2>
 			<form class="mt-8 space-y-6" @submit.prevent="onSubmit" ref="form">
 				<BaseInput
 					v-model="formFields.email"
 					type="email"
 					id="email"
-					placeholder="[email protected]"
+					:placeholder="t('auth.field.emailPlaceholder')"
 					required
-					>Your email</BaseInput
+					:errors="errorObject?.errors.email"
+					>{{ t('auth.field.email') }}</BaseInput
 				>
 				<BaseInput
 					v-model="formFields.password"
 					type="password"
 					id="password"
-					placeholder="••••••••"
+					:placeholder="t('auth.field.passwordPlaceholder')"
 					required
-					>Your password</BaseInput
+					:errors="errorObject?.errors.password"
+					>{{ t('auth.field.password') }}</BaseInput
 				>
 				<div class="flex flex-wrap items-start">
 					<a
 						:href="url('auth/forgot-password')"
 						class="mt-4 text-left text-sm text-primary-700 hover:underline dark:text-primary-500"
-						>Lost Password?</a
+						>{{ t('auth.link.forgotPassword') }}</a
 					>
 				</div>
-				<BaseButton type="submit" :color="ButtonColor.Primary">Login to your account</BaseButton>
-				<BaseAlert v-if="errorMessage" :type="AlertType.Danger">{{ errorMessage }}</BaseAlert>
+				<BaseButton type="submit" :color="ButtonColor.Primary">{{
+					t('auth.login.submit')
+				}}</BaseButton>
+				<ErrorAlert v-if="errorObject" :errorObject="errorObject"></ErrorAlert>
 				<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
-					Not registered?
+					{{ t('auth.link.notRegistered') }}
 					<a
 						:href="url('auth/register')"
 						class="text-primary-700 hover:underline dark:text-primary-500"
-						>Create account</a
+						>{{ t('auth.link.createAccount') }}</a
 					>
 				</div>
 			</form>
@@ -53,9 +59,14 @@
 <script setup lang="ts">
 import BaseInput from './base/input.vue';
 import BaseButton, { ButtonColor } from './base/button.vue';
-import BaseAlert, { AlertType } from './base/alert.vue';
+import ErrorAlert, {
+	type ErrorObject,
+	isDeprecatedErrorObject,
+	convertDeprecatedErrorObject,
+} from './base/errorAlert.vue';
 
 import { asset, api, url } from '@lib/helpers';
+import { t } from '@lib/i18n';
 import { ref } from 'vue';
 
 const form = ref<HTMLFormElement>();
@@ -64,10 +75,10 @@ const formFields = ref({
 	password: '',
 });
 
-const errorMessage = ref<null | string>(null);
+const errorObject = ref<null | ErrorObject>(null);
 
 function onSubmit() {
-	errorMessage.value = null;
+	errorObject.value = null;
 
 	fetch(api('auth/login'), {
 		method: 'POST',
@@ -79,11 +90,17 @@ function onSubmit() {
 	})
 		.then(async (response) => {
 			if (!response.ok) {
-				if (response.status === 401 || response.status === 400) {
+				if (response.status >= 400 && response.status < 500) {
 					const json = await response.json();
-					errorMessage.value = json.message;
 
-					throw new Error(json);
+					// Somebody didn't update the backend to return ErrorObjects..
+					if (isDeprecatedErrorObject(json)) {
+						errorObject.value = convertDeprecatedErrorObject(json);
+					} else {
+						errorObject.value = json as ErrorObject;
+					}
+
+					throw new Error(json.error);
 				}
 
 				throw new Error(await response.text());