From 023867673d886def264b6430bbc26acb3e45346c Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sat, 20 Jul 2024 23:57:02 +0300
Subject: [PATCH 1/5] localization: members

---
 src/app/providers/router/index.ts             |  6 ++---
 .../members/leave-team/ui/LeaveButton.vue     |  9 ++++---
 src/pages/members/AllParticipants.vue         | 12 +++++----
 src/pages/members/Guests.vue                  | 15 ++++++-----
 src/pages/members/MembersOverview.vue         | 16 +++++++-----
 src/shared/lib/i18n/locales/en-US.ts          | 26 +++++++++++++++++++
 src/shared/lib/i18n/locales/ru-RU.ts          | 26 +++++++++++++++++++
 src/shared/lib/i18n/locales/zh-CN.ts          | 25 ++++++++++++++++++
 src/widgets/members/ui/MainWrapper.vue        | 13 ++++++----
 src/widgets/members/ui/MembersList.vue        |  5 +++-
 10 files changed, 122 insertions(+), 31 deletions(-)

diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index ea9c0fff..de989248 100644
--- 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/members/leave-team/ui/LeaveButton.vue b/src/features/members/leave-team/ui/LeaveButton.vue
index b6026da2..6c0bc7ac 100644
--- a/src/features/members/leave-team/ui/LeaveButton.vue
+++ b/src/features/members/leave-team/ui/LeaveButton.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { toast } from 'vue-sonner';
 import { RouteNames } from '@/shared/config/consts';
 import { UiButton } from '@/shared/ui';
 import { X } from 'lucide-vue-next';
-import { useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
 
 const router = useRouter();
+const { t } = useI18n();
+
 const leaveTeam = () => {
   toast.info('You left the team', {
     description: 'Find suitable or become an admin of new team'
@@ -17,6 +20,6 @@ const leaveTeam = () => {
 <template>
   <UiButton :variant="'destructive'" @click="leaveTeam">
     <X :size="17" style="margin-right: 6px" />
-    Leave...
+    {{ t('members.btns.leave') }}...
   </UiButton>
 </template>
diff --git a/src/pages/members/AllParticipants.vue b/src/pages/members/AllParticipants.vue
index c7bcbb2b..ac6ad031 100644
--- a/src/pages/members/AllParticipants.vue
+++ b/src/pages/members/AllParticipants.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { MembersList } from '@/widgets/members';
 import type { UserType } from '@/entities/user/model';
 
+const { t } = useI18n();
+
 const members = reactive<UserType[]>([
   { _id: '0', photoUrl: 'https://www.shadcn-vue.com/avatars/02.png', email: 'Alex Peshkov', role: 'admin' },
   { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
@@ -13,10 +16,9 @@ const members = reactive<UserType[]>([
 <template>
   <div style="width: 100%">
     <div v-once :class="$style.about">
-      <h4 class="heading-4">Invite users</h4>
+      <h4 class="heading-4">{{ t('members.content.all.title') }}</h4>
       <p class="text-sm">
-        Anyone who has an invitation link can join this free workspace. The link can be disabled and recreated
-        at any time. Pending invitations count towards a limit of 10 participants.
+        {{ t('members.content.all.description') }}
       </p>
     </div>
     <MembersList :members />
@@ -34,11 +36,11 @@ const members = reactive<UserType[]>([
 
   & p {
     color: var(--zinc-500);
-    max-width: 540px;
+    max-width: 560px;
   }
 }
 
-:global(html.dark){
+:global(html.dark) {
   .about {
     & p {
       color: var(--zinc-300);
diff --git a/src/pages/members/Guests.vue b/src/pages/members/Guests.vue
index 24f9f05e..3c7a061b 100644
--- a/src/pages/members/Guests.vue
+++ b/src/pages/members/Guests.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { MembersList } from '@/widgets/members';
 import type { UserType } from '@/entities/user/model';
 
+const { t } = useI18n();
+
 const members = reactive<UserType[]>([
   { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
   { _id: '2', photoUrl: 'https://www.shadcn-vue.com/avatars/04.png', email: 'Emily Johnson', role: 'member' }
@@ -11,11 +14,9 @@ const members = reactive<UserType[]>([
 
 <template>
   <div style="width: 100%">
-    <div v-once :class="$style.about">
-      <h4 class="heading-4">Guests</h4>
-      <p class="text-sm">
-        Guests can only view and edit the boards they have been added to.
-      </p>
+    <div :class="$style.about">
+      <h4 class="heading-4">{{ t('members.content.guests.title') }}</h4>
+      <p class="text-sm">{{ t('members.content.guests.description') }}</p>
     </div>
     <MembersList :members />
   </div>
@@ -36,8 +37,8 @@ const members = reactive<UserType[]>([
   }
 }
 
-:global(html.dark){
-  .about{
+:global(html.dark) {
+  .about {
     & p {
       color: var(--zinc-300);
     }
diff --git a/src/pages/members/MembersOverview.vue b/src/pages/members/MembersOverview.vue
index 3e545fca..c65c4614 100644
--- a/src/pages/members/MembersOverview.vue
+++ b/src/pages/members/MembersOverview.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
+import { useI18n } from 'vue-i18n';
 import { MainWrapper } from '@/widgets/members';
 
 useHead({
   title: 'Jenda | Members'
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.members">
     <div :class="$style.top">
-      <h4 class="heading-4">Workspace participants (1)</h4>
-      <p v-once class="text-sm">
-        Members can view and join whiteboards for the workspace, as well as create new whiteboards in that
-        space.
+      <h4 class="heading-4">{{ t('members.title') }} (1)</h4>
+      <p class="text-sm">
+        {{ t('members.description') }}
       </p>
     </div>
     <MainWrapper>
@@ -42,9 +44,9 @@ useHead({
   }
 }
 
-:global(html.dark){
-  .members{
-    .top{
+:global(html.dark) {
+  .members {
+    .top {
       border-color: var(--zinc-600);
       & > p {
         color: var(--zinc-300);
diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
index 418f03b0..96a70700 100644
--- a/src/shared/lib/i18n/locales/en-US.ts
+++ b/src/shared/lib/i18n/locales/en-US.ts
@@ -61,6 +61,32 @@ export default {
       }
     ]
   },
+  members: {
+    title: 'Workspace participants',
+    description:
+      'Members can view and join whiteboards for the workspace, as well as create new whiteboards in that space.',
+    content: {
+      all: {
+        title: 'Invite users',
+        description:
+          'Anyone who has an invitation link can join this free workspace. The link can be disabled and recreated at any time. Pending invitations count towards a limit of 10 participants.',
+        btn: 'All participants'
+      },
+      guests: {
+        title: 'Guests',
+        description: 'Guests can only view and edit the boards they have been added to.',
+        btn: 'Guests'
+      }
+    },
+    role: {
+      member: 'member',
+      admin: 'admin'
+    },
+    btns: {
+      leave: 'Leave',
+      view: 'View the boards'
+    }
+  },
   sheet: {
     title: 'Create board',
     description: 'The new board will allow you to create tasks for solving them.',
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
index e1a8fe34..2e113242 100644
--- a/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -61,6 +61,32 @@ export default {
       }
     ]
   },
+  members: {
+    title: 'Участники рабочего пространства',
+    description:
+      'Участники могут просматривать и присоединяться к доскам рабочего пространства, а также создавать новые доски в этом пространстве.',
+    content: {
+      all: {
+        title: 'Пригласить пользователей',
+        description:
+          'Каждый, у кого есть ссылка-приглашение, может присоединиться к этому бесплатному рабочему пространству. Ссылка может быть отключена и в любой момент воссоздана. Ожидающие приглашения учитываются в лимите в 10 участников.',
+        btn: 'Все участники'
+      },
+      guests: {
+        title: 'Гости',
+        description: 'Гости могут только просматривать и редактировать доски, к которым они были добавлены.',
+        btn: 'Гости'
+      }
+    },
+    role: {
+      member: 'участник',
+      admin: 'админ'
+    },
+    btns: {
+      leave: 'Покинуть',
+      view: 'Просмотреть доски'
+    }
+  },
   sheet: {
     title: 'Создать доску',
     description: 'Новая доска позволит вам создавать задачи для их решения.',
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
index 5a798af9..a165e6f5 100644
--- a/src/shared/lib/i18n/locales/zh-CN.ts
+++ b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -61,6 +61,31 @@ export default {
       }
     ]
   },
+  members: {
+    title: '工作区参与者',
+    description: '成员可以查看和加入工作区的白板，并在该空间中创建新的白板。',
+    content: {
+      all: {
+        title: '邀请用户',
+        description:
+          '任何拥有邀请链接的人都可以加入这个免费的工作区。链接可以在任何时候被禁用和重新创建。待处理的邀请计入10名参与者的限制。',
+        btn: '所有参与者'
+      },
+      guests: {
+        title: '访客',
+        description: '访客只能查看和编辑他们被添加的板。',
+        btn: '访客'
+      }
+    },
+    role: {
+      member: '成员',
+      admin: '管理员'
+    },
+    btns: {
+      leave: '离开',
+      view: '查看白板'
+    }
+  },
   sheet: {
     title: '创建看板',
     description: '新看板将允许你创建任务以进行解决。',
diff --git a/src/widgets/members/ui/MainWrapper.vue b/src/widgets/members/ui/MainWrapper.vue
index 9edcd524..ddcc1a55 100644
--- a/src/widgets/members/ui/MainWrapper.vue
+++ b/src/widgets/members/ui/MainWrapper.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { UiButton } from '@/shared/ui';
 import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { UiButton } from '@/shared/ui';
 import { RouteNames } from '@/shared/config/consts';
 import { LeaveButton } from '@/features/members/leave-team';
 
+const { t } = useI18n();
+
 const links = reactive([
-  { id: '0', title: 'All participants', pathName: RouteNames.members + '.all' },
-  { id: '1', title: 'Guests', pathName: RouteNames.members + '.guests' }
+  { id: '0', title: 'All participants', pathName: RouteNames.members + '.all', i18nKey: 'all.btn' },
+  { id: '1', title: 'Guests', pathName: RouteNames.members + '.guests', i18nKey: 'guests.btn' }
 ]);
 </script>
 <template>
@@ -17,7 +20,7 @@ const links = reactive([
           :variant="$route.name === link.pathName ? 'outline' : 'ghost'"
           :class="{ [$style.ghost_exception]: $route.name !== link.pathName }"
         >
-          <span class="text-sm">{{ link.title }}</span>
+          <span class="text-sm">{{ t(`members.content.${link.i18nKey}`) }}</span>
         </UiButton>
       </RouterLink>
     </div>
@@ -26,7 +29,7 @@ const links = reactive([
       <div :class="$style.btns_section">
         <LeaveButton />
         <UiButton :variant="'outline'" @click="$router.push({ name: RouteNames.boards })">
-          View the boards (3)
+          {{ t('members.btns.view') }} (3)
         </UiButton>
       </div>
     </div>
diff --git a/src/widgets/members/ui/MembersList.vue b/src/widgets/members/ui/MembersList.vue
index 2f4900c4..6e1d7db2 100644
--- a/src/widgets/members/ui/MembersList.vue
+++ b/src/widgets/members/ui/MembersList.vue
@@ -2,10 +2,13 @@
 import { UserAvatar } from '@/entities/user';
 import type { UserType } from '@/entities/user/model';
 import { UiBadge } from '@/shared/ui';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
   members: UserType[];
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -17,7 +20,7 @@ defineProps<{
         </UserAvatar>
         <p class="text-sm">{{ member.email }}</p>
       </div>
-      <UiBadge :variant="'secondary'">{{ member.role }}</UiBadge>
+      <UiBadge :variant="'secondary'">{{ t(`members.role.${member.role}`) }}</UiBadge>
     </li>
   </ul>
 </template>

From 56d277b89613fb9f860a2f0a572ab8ce513d1179 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sat, 20 Jul 2024 23:57:35 +0300
Subject: [PATCH 2/5] fix: husky

---
 .husky/pre-commit | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 35b91f06..37236231 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1 @@
-
 yarn lint-staged

From fc235b4f109e59e5d90ecc85e29f93c11956433a Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sun, 21 Jul 2024 00:21:25 +0300
Subject: [PATCH 3/5] localization: settings

---
 src/app/providers/router/index.ts              |  6 +++---
 .../theme-switcher/ui/ThemeSwitcher.vue        |  6 ++++--
 src/pages/Settings.vue                         |  9 ++++++---
 src/shared/lib/i18n/locales/en-US.ts           | 18 ++++++++++++++++++
 src/shared/lib/i18n/locales/ru-RU.ts           | 18 ++++++++++++++++++
 src/shared/lib/i18n/locales/zh-CN.ts           | 18 ++++++++++++++++++
 src/widgets/settings/ui/SettingsElements.vue   | 11 +++++++----
 7 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index de989248..ea9c0fff 100644
--- 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/settings/theme-switcher/ui/ThemeSwitcher.vue b/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
index b9a90324..8e23e991 100644
--- a/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
+++ b/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue';
 import { useColorMode } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 import useTheme from '../lib/composables/useTheme';
 import type { ThemeBlock } from '../model';
 import { UiButton, UiRadioGroupContainer } from '@/shared/ui';
@@ -16,6 +17,7 @@ const themeBlocks = shallowRef<ThemeBlock[]>([
   { id: 2, item: SystemBlock, active: store.value === 'auto', value: 'auto' }
 ]);
 const { onNewPreferences, changeActiveTheme } = useTheme(themeBlocks);
+const { t } = useI18n();
 
 const themeAbout = computed(() => {
   return (value: string) => {
@@ -39,10 +41,10 @@ const themeAbout = computed(() => {
           :class="{ [$style.active]: theme.active }"
           @click="changeActiveTheme(theme.id)"
         />
-        <span class="text-xs">{{ themeAbout(theme.value) }}</span>
+        <span class="text-xs">{{ themeAbout(t(`settings.theme.variants.${theme.value}`)) }}</span>
       </div>
     </UiRadioGroupContainer>
-    <UiButton variant="outline" type="submit">Update Preferences</UiButton>
+    <UiButton variant="outline" type="submit">{{ t('settings.theme.btn') }}</UiButton>
   </form>
 </template>
 
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 19cb918a..b6644363 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
+import { useI18n } from 'vue-i18n';
 import { SettingsElements } from '@/widgets/settings';
 
 useHead({
   title: 'Jenda | Settings'
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
-  <div v-once :class="$style.settings">
-    <h4 class="heading-4">Settings</h4>
-    <p class="text-sm">Manage your account settings and set some preferences.</p>
+  <div :class="$style.settings">
+    <h4 class="heading-4">{{ t('settings.title') }}</h4>
+    <p class="text-sm">{{ t('settings.description') }}</p>
   </div>
   <SettingsElements />
 </template>
diff --git a/src/shared/lib/i18n/locales/en-US.ts b/src/shared/lib/i18n/locales/en-US.ts
index 96a70700..6154891a 100644
--- a/src/shared/lib/i18n/locales/en-US.ts
+++ b/src/shared/lib/i18n/locales/en-US.ts
@@ -87,6 +87,24 @@ export default {
       view: 'View the boards'
     }
   },
+  settings: {
+    title: 'Settings',
+    description: 'Manage your account settings and set some preferences.',
+    lang: {
+      label: 'Language',
+      about: 'This is the language that will be used in the dashboard.'
+    },
+    theme: {
+      label: 'Theme',
+      about: 'Select the theme for the dashboard.',
+      variants: {
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'System'
+      },
+      btn: 'Update preferences'
+    }
+  },
   sheet: {
     title: 'Create board',
     description: 'The new board will allow you to create tasks for solving them.',
diff --git a/src/shared/lib/i18n/locales/ru-RU.ts b/src/shared/lib/i18n/locales/ru-RU.ts
index 2e113242..c4ea1189 100644
--- a/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/src/shared/lib/i18n/locales/ru-RU.ts
@@ -87,6 +87,24 @@ export default {
       view: 'Просмотреть доски'
     }
   },
+  settings: {
+    title: 'Настройки',
+    description: 'Управляйте настройками своей учетной записи и установите предпочтения.',
+    lang: {
+      label: 'Язык',
+      about: 'Это язык, который будет использоваться в панели инструментов.'
+    },
+    theme: {
+      label: 'Тема',
+      about: 'Выберите тему для панели инструментов.',
+      variants: {
+        light: 'Светлая',
+        dark: 'Темная',
+        auto: 'Системная'
+      },
+      btn: 'Обновить настройки'
+    }
+  },
   sheet: {
     title: 'Создать доску',
     description: 'Новая доска позволит вам создавать задачи для их решения.',
diff --git a/src/shared/lib/i18n/locales/zh-CN.ts b/src/shared/lib/i18n/locales/zh-CN.ts
index a165e6f5..b5ecb013 100644
--- a/src/shared/lib/i18n/locales/zh-CN.ts
+++ b/src/shared/lib/i18n/locales/zh-CN.ts
@@ -86,6 +86,24 @@ export default {
       view: '查看白板'
     }
   },
+  settings: {
+    title: '设置',
+    description: '管理您的帐户设置和设定一些偏好。',
+    lang: {
+      label: '语言',
+      about: '这是将在仪表板中使用的语言。'
+    },
+    theme: {
+      label: '主题',
+      about: '选择仪表板的主题。',
+      variants: {
+        light: '浅色',
+        dark: '深色',
+        auto: '系统'
+      },
+      btn: '更新偏好设置'
+    }
+  },
   sheet: {
     title: '创建看板',
     description: '新看板将允许你创建任务以进行解决。',
diff --git a/src/widgets/settings/ui/SettingsElements.vue b/src/widgets/settings/ui/SettingsElements.vue
index 7fe222e5..3e77c257 100644
--- a/src/widgets/settings/ui/SettingsElements.vue
+++ b/src/widgets/settings/ui/SettingsElements.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import { ThemeSwitcher } from '@/features/settings/theme-switcher';
 import { LanguageSwitcher } from '@/features/settings/lang-switcher';
+
+const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.lang">
-    <p class="text-sm" style="font-weight: 500">Language</p>
+    <p class="text-sm" style="font-weight: 500">{{ t('settings.lang.label') }}</p>
     <LanguageSwitcher />
-    <span class="text-xs"> This is the language that will be used in the dashboard. </span>
+    <span class="text-xs"> {{ t('settings.lang.about') }} </span>
   </div>
   <div :class="$style.theme">
     <div :class="$style.text">
-      <p class="text-sm" style="font-weight: 500">Theme</p>
-      <span class="text-xs">Select the theme for the dashboard.</span>
+      <p class="text-sm" style="font-weight: 500">{{ t('settings.theme.label') }}</p>
+      <span class="text-xs">{{ t('settings.theme.about') }}</span>
     </div>
     <ThemeSwitcher />
   </div>

From 8f710a58a9080cb4be5a621d4e60dcacb79537a0 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sun, 21 Jul 2024 01:02:53 +0300
Subject: [PATCH 4/5] localization: auth

---
 src/app/providers/router/index.ts      |  6 ++--
 src/features/auth/ui/PrivacyPolicy.vue | 32 ++++++++++++------
 src/features/auth/ui/SignInForm.vue    | 18 ++++++-----
 src/features/auth/ui/SignUpForm.vue    | 27 ++++++++--------
 src/shared/lib/i18n/locales/en-US.ts   | 22 +++++++++++++
 src/shared/lib/i18n/locales/ru-RU.ts   | 27 ++++++++++++++++
 src/shared/lib/i18n/locales/zh-CN.ts   | 22 +++++++++++++
 src/widgets/auth/ui/AuthContainer.vue  | 45 ++++++++++++++------------
 8 files changed, 145 insertions(+), 54 deletions(-)

diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index ea9c0fff..de989248 100644
--- 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
index 7d66afb2..e53f0ba6 100644
--- 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
index e30de518..d09bced0 100644
--- 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="'user@example.com'" :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
index 5cfc7fb2..102c3e75 100644
--- 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="'user@example.com'" :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
index 6154891a..b5bf6af0 100644
--- 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
index c4ea1189..f254e127 100644
--- 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
index b5ecb013..6e425266 100644
--- 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
index 047faae3..f05fa840 100644
--- a/src/widgets/auth/ui/AuthContainer.vue
+++ b/src/widgets/auth/ui/AuthContainer.vue
@@ -1,15 +1,25 @@
 <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>
 
@@ -17,20 +27,16 @@ const info = computed(() => {
   <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);
           }
         }

From aef4822a75dd89115d7f6b761f9c34542e4eea43 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sun, 21 Jul 2024 01:03:54 +0300
Subject: [PATCH 5/5] feat: route block

---
 src/app/providers/router/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index de989248..ea9c0fff 100644
--- 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 });
+  }
 });