localization: auth

mnenie · Jul 20, 2024 · 8f710a5 · 8f710a5
1 parent fc235b4
commit 8f710a5
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 54 deletions.
diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
@@ -81,7 +81,7 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: RouteNames.login });
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: RouteNames.login });
+  // }
 });
diff --git a/src/features/auth/ui/PrivacyPolicy.vue b/src/features/auth/ui/PrivacyPolicy.vue
@@ -1,15 +1,28 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { redirect } from '@/shared/lib/helpers';
+import { computed } from 'vue';
+
+const { tm, locale } = useI18n();
+
+// @ts-expect-error tm types
+const privacyItems = tm('authentication.privacy');
+
+const maxWidth = computed(() => {
+  return locale.value === 'ru-RU' ? '400px' : '320px';
+});
 </script>
 
 <template>
   <p :class="[$style.main_text, 'text-sm']">
-    By clicking continue, you agree to our
+    {{ privacyItems[0] }}
     <span :class="$style.inside" @click="redirect('https://github.com/mnenie/dizzo')">
-      Terms of Service
+      {{ privacyItems[1] }}
+    </span>
+    {{ privacyItems[2] }}
+    <span :class="$style.inside" @click="redirect('https://github.com/mnenie/dizzo')">
+      {{ privacyItems[3] }}
     </span>
-    and
-    <span :class="$style.inside" @click="redirect('https://github.com/mnenie/dizzo')"> Privacy Policy. </span>
   </p>
 </template>
 
@@ -18,7 +31,7 @@ import { redirect } from '@/shared/lib/helpers';
   padding: 10px 0px 0px 0px;
   text-align: center;
   color: #72717a;
-  max-width: 320px;
+  max-width: v-bind('maxWidth');
   margin: 0 auto;
 
   .inside {
@@ -33,13 +46,12 @@ import { redirect } from '@/shared/lib/helpers';
   }
 }
 
-:global(html.dark){
-  .main_text{
+:global(html.dark) {
+  .main_text {
     color: var(--zinc-300);
 
-    .inside{
-
-      &:hover{
+    .inside {
+      &:hover {
         color: var(--zinc-400);
       }
     }

diff --git a/src/features/auth/ui/SignInForm.vue b/src/features/auth/ui/SignInForm.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useField, useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
-import { toTypedSchema } from '@vee-validate/zod';
 import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
-import { useField, useForm } from 'vee-validate';
-import { toast } from 'vue-sonner';
 
 const validationSchema = toTypedSchema(validationRules);
+const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -26,12 +28,12 @@ const onLogin = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">Email</label>
+          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'[email protected]'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">Password</label>
+          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -44,12 +46,12 @@ const onLogin = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          Sign In with Email
+          {{ t('authentication.login.btn') }}
         </UiButton>
         <p :class="[$style.login, 'text-sm']">
-          Don't have an account?
+          {{ t('authentication.login.proposal') }}
           <span :class="$style.login_route" @click="$router.push({ name: RouteNames.registration })">
-            Sign Up Now
+            {{ t('authentication.login.route') }}
           </span>
         </p>
       </div>

diff --git a/src/features/auth/ui/SignUpForm.vue b/src/features/auth/ui/SignUpForm.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useField, useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton, UiInput } from '@/shared/ui';
-import { toTypedSchema } from '@vee-validate/zod';
 import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
-import { useField, useForm } from 'vee-validate';
-import { toast } from 'vue-sonner';
 
 const validationSchema = toTypedSchema(validationRules);
+const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -26,12 +28,12 @@ const onRegistration = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">Email</label>
+          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'[email protected]'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">Password</label>
+          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -44,12 +46,12 @@ const onRegistration = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          Sign Up with Email
+          {{ t('authentication.registration.btn') }}
         </UiButton>
         <p :class="[$style.reg, 'text-sm']">
-          Have an account?
+          {{ t('authentication.registration.proposal') }}
           <span :class="$style.reg_route" @click="$router.push({ name: RouteNames.login })">
-            Sign In Now
+            {{ t('authentication.registration.route') }}
           </span>
         </p>
       </div>
@@ -116,7 +118,6 @@ const onRegistration = handleSubmit((values) => {
 
 :global(html.dark) {
   .form_container {
-
     .form_fields {
       .field {
         & label {
@@ -125,12 +126,12 @@ const onRegistration = handleSubmit((values) => {
       }
     }
 
-    .choose_block{
-      .reg{
+    .choose_block {
+      .reg {
         color: var(--zinc-200);
       }
-      .reg_route{
-        &:hover{
+      .reg_route {
+        &:hover {
           color: var(--zinc-300);
         }
       }

diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
@@ -119,5 +119,27 @@ export default {
       },
       submit: 'Create board'
     }
+  },
+  authentication: {
+    login: {
+      title: 'Welcome back',
+      description: 'Enter your info below to sign in your account',
+      btn: 'Sign In with Email',
+      proposal: "Don't have an account?",
+      route: 'Sign Up Now'
+    },
+    registration: {
+      title: 'Get started',
+      description: 'Enter your info below to create your account',
+      btn: 'Sign Up with Email',
+      proposal: 'Have an account?',
+      route: 'Sign In Now'
+    },
+    form: {
+      email: 'Email',
+      password: 'Password'
+    },
+    line: 'Or continue with',
+    privacy: ['By clicking continue, you agree to our', 'Terms of Service', 'and', 'Privacy Policy.']
   }
 };
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -119,5 +119,32 @@ export default {
       },
       submit: 'Создать доску'
     }
+  },
+  authentication: {
+    login: {
+      title: 'С возвращением',
+      description: 'Введите свои данные ниже, чтобы войти в свой аккаунт',
+      btn: 'Войти',
+      proposal: 'Ещё нет аккаунта?',
+      route: 'Зарегистрируйтесь'
+    },
+    registration: {
+      title: 'Создайте аккаунт',
+      description: 'Введите свои данные ниже, чтобы создать аккаунт',
+      btn: 'Зарегистрироваться',
+      proposal: 'Уже есть аккаунт?',
+      route: 'Войдите'
+    },
+    form: {
+      email: 'Почта',
+      password: 'Пароль'
+    },
+    line: 'Или продолжите с',
+    privacy: [
+      'Нажав продолжить, вы соглашаетесь с нашими',
+      'Условиями предоставления услуг',
+      'и',
+      'Политикой конфиденциальности.'
+    ]
   }
 };
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -118,5 +118,27 @@ export default {
       },
       submit: '创建看板'
     }
+  },
+  authentication: {
+    login: {
+      title: '欢迎回来',
+      description: '请输入下面的信息以登录您的帐户',
+      btn: '用电子邮件登录',
+      proposal: '还没有帐户？',
+      route: '立即注册'
+    },
+    registration: {
+      title: '开始使用',
+      description: '请输入下面的信息以创建您的帐户',
+      btn: '用电子邮件注册',
+      proposal: '已有帐户？',
+      route: '立即登录'
+    },
+    form: {
+      email: '电子邮件',
+      password: '密码'
+    },
+    line: '或继续使用',
+    privacy: ['点击继续即表示您同意我们的', '服务条款', '和', '隐私政策。']
   }
 };
diff --git a/src/widgets/auth/ui/AuthContainer.vue b/src/widgets/auth/ui/AuthContainer.vue
@@ -1,36 +1,42 @@
 <script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { useDark } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import { GoogleOauth, PrivacyPolicy } from '@/features/auth';
 import { RouteNames } from '@/shared/config/consts';
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 
 const route = useRoute();
+const { t } = useI18n();
+
+const isDark = useDark();
 
+const title = computed(() => {
+  return route.name === RouteNames.login
+    ? t('authentication.login.title')
+    : t('authentication.registration.title');
+});
 const info = computed(() => {
   return route.name === RouteNames.login
-    ? 'Enter your info below to sign in your account'
-    : 'Enter your info below to create your account';
+    ? t('authentication.login.description')
+    : t('authentication.registration.description');
 });
 </script>
 
 <template>
   <div :class="$style.container">
     <div :class="$style.container_inside">
       <div :class="$style.top_part" @click="$router.push({ name: RouteNames.boards })">
-        <img src="/icons/kanban.png" />
+        <img :src="isDark ? '/icons/kanban-dark.png' : '/icons/kanban.png'" />
         <h3 class="text-xl">Jenda</h3>
       </div>
       <div :class="$style.form_wrapper">
-        <h2 class="heading-2">
-          {{ route.name === RouteNames.login ? 'Welcome back' : 'Get started' }}
-        </h2>
-        <p :class="[$style.info_text, 'text-sm']">
-          {{ info }}
-        </p>
+        <h2 class="heading-2">{{ title }}</h2>
+        <p :class="[$style.info_text, 'text-sm']">{{ info }}</p>
         <slot />
         <div :class="[$style.line_container, 'text-xs']">
           <div :class="$style.line" />
-          <span>Or continue with</span>
+          <span>{{ t('authentication.line') }}</span>
           <div :class="$style.line" />
         </div>
         <GoogleOauth />
@@ -117,22 +123,21 @@ const info = computed(() => {
   }
 }
 
-:global(html.dark){
-  .container{
+:global(html.dark) {
+  .container {
     background-color: var(--zinc-800);
 
-    .container_inside{
-      .form_wrapper{
-
-        .info_text{
+    .container_inside {
+      .form_wrapper {
+        .info_text {
           color: var(--zinc-300);
         }
 
-        .line_container{
-          .line{
+        .line_container {
+          .line {
             background-color: var(--zinc-600);
           }
-          & span{
+          & span {
             color: var(--zinc-300);
           }
         }