merge pull request #13 from mnenie/dev

localization: some parts, fix: bugs

.husky/pre-commit

@@ -1,2 +1 @@
-
 yarn lint-staged

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);
       }
     }

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>

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);
         }
       }

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>

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>
 

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>

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);

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);
     }

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);