@ozdao/martyrs 0.2.483 → 0.2.485

package/src/modules/auth/locales/ru.js

@@ -0,0 +1,76 @@
+// @martyrs/src/modules/auth/locales/ru.js
+export default {
+  auth: {
+    signIn: {
+      title: "Приветствуем вас,",
+      subtitle: "Войдите для продолжения",
+      signup: "Нет аккаунта?",
+      phone: "Телефон",
+      email: "Email",
+      phonePlaceholder: "Введите ваш телефон",
+      emailPlaceholder: "Введите ваш email",
+      haveAccount: "Нет аккаунта? Зарегистрироваться",
+      passwordPlaceholder: "Введите ваш пароль",
+      forgotPassword: "Забыли пароль?",
+      signin: "Войти",
+      signin_apple: "Войти через Apple",
+      soon: "СКОРО"
+    },
+    signUp: {
+      title: "Новая учетная запись",
+      description: "Выберите удобный способ регистрации через телефон или email:",
+      phone: "Телефон",
+      email: "Email",
+      phonePlaceholder: "Введите ваш телефон",
+      emailPlaceholder: "Введите ваш email",
+      emailNotice: "Мы отправим вам электронное письмо с кодом подтверждения, который вы должны будете ввести в следующем шаге.",
+      smsNotice: "Мы вышлем вам SMS с кодом подтверждения, который вы должны будете ввести в следующем шаге.",
+      sendCode: "Отправить код",
+      haveAccount: "У вас уже есть аккаунт?"
+    },
+    enterCode: {
+      verifyNumberTitle: "Подтвердите номер",
+      instructions: "Мы отправили код регистрации на ваш номер телефона. Введите его в поле ниже:",
+      resendCode: "Отправить код еще раз",
+      secondsResend: "секунд до возможности отправить код еще раз."
+    },
+    resetPassword: {
+      forgotPasswordTitle: "Забыли пароль?",
+      instructions: "Чтобы сбросить пароль, укажите телефон или email, использованные при регистрации.",
+      smsInfo: "Мы вышлем вам SMS с кодом подтверждения для сброса пароля, который вы должны будете ввести в следующем шаге.",
+      emailInfo: "Мы отправим вам электронное письмо с кодом подтверждения  для сброса пароля, который вы должны будете ввести в следующем шаге.",
+      phone: "Телефон",
+      email: "Email",
+      phonePlaceholder: "Введите ваш телефон",
+      emailPlaceholder: "Введите ваш email",
+      sendCode: "Отправить код"
+    },
+    enterPassword: {
+      almostDone: "Почти все!",
+      newPasswordPrompt: "Пожалуйста, укажите новый пароль.",
+      registrationPasswordPrompt: "Пожалуйста, укажите пароль, на этом регистрация будет закончена.",
+      passwordPlaceholder: "Пароль",
+      repeatPasswordPlaceholder: "Повторите пароль",
+      changePasswordBtn: "Поменять пароль",
+      registerBtn: "Зарегистрироваться"
+    },
+    features: [
+      {
+        title: "Что такое токен Weeder, Бро?",
+        description: "WDT - это как основа нашего крутого сообщества. Это деньги, это власть, это инвестиции. Круто, а?"
+      },
+      {
+        title: "Зажигай и Развивайся",
+        description: "Закажи шмали, курни и зарабатывай токены Weeder. Чем больше курнешь, тем больше кэша у тебя в кармане, чувак."
+      },
+      {
+        title: "Веселись с Нашим Сообществом",
+        description: "Найди самые крутые сорта и начни шмалить на девятом облаке вместе с нами."
+      },
+      {
+        title: "Покупайте, Когда Накурились",
+        description: "Закажи премиумную бошку и крутые аксессуары за пару кликов, чувак. Прямо к твоей двери!"
+      }
+    ]
+  }
+};

package/src/modules/auth/views/components/layouts/Auth.vue

@@ -2,7 +2,6 @@
   <div 
   	class="cols-2-1_2 gap-small pd-small"
   >
-
     <router-view
     	class="pd-big mobile:pd-medium w-m-66r t-center" 
     	v-slot="{ Component, route }"
@@ -19,57 +18,16 @@
       </transition>
     </router-view>
 
-    <section class="w-100 desktop-only o-hidden radius-big bg-grad-main">
+    <section class="w-100 desktop-only o-hidden radius-big bg-black t-white">
       <SliderFeatures/>  
     </section>
   </div>
 </template>
 
 <script setup>
-// Import components
-import Tab from '@martyrs/src/components/Tab/Tab.vue'
-import Field from '@martyrs/src/components/Field/Field.vue'
-import Button from '@martyrs/src/components/Button/Button.vue'
-// Import blocks
 import SliderFeatures from '@martyrs/src/modules/auth/views/components/sections/SliderFeatures.vue'
-// Import libs
-import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-// Import state
-import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
-// Import validation
-import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
 
-const phoneValidation = ref(null)
-const passswordValidation = ref(null)
-const emailValidation = ref(null)
-// Accessing router
-const route = useRoute()
-const router = useRouter()
-// Accessing state
-const tabAuth = ref('email')
-// Methods
-async function onSubmit() {
-  try {
-    await inputsValidation.validateInputs(
-      emailValidation,
-      inputsValidation.validateEmail,
-      auth.state.user.email,
-      'Некорректный email'
-    )
-    await inputsValidation.validateInputs(
-      passswordValidation,
-      inputsValidation.validatePassword,
-      auth.state.user.password,
-      'Некорректный пароль'
-    )
-  } catch (error) {
-    throw new Error
-  }
-  await auth.actions.login(auth.state.user, tabAuth.value)
-}
+import { useRoute } from 'vue-router'
 
-function redirectTo() {
-  router.push({ name: 'Account' })
-}
+const route = useRoute()
 </script>

package/src/modules/auth/views/components/pages/EnterCode.vue

@@ -3,10 +3,10 @@
 		<!-- <img loading="lazy" src="@/assets/icons/message1.png" class="i-extra mn-b-small"> -->
 
 		<h3 class="mn-b-medium">
-			{{ t('verifyNumberTitle') }}
+			{{ t('auth.enterCode.verifyNumberTitle') }}
 		</h3>
 
-		<p class="mn-b-big t-transp">{{ t('instructions') }}</p>
+		<p class="mn-b-big t-transp">{{ t('auth.enterCode.instructions') }}</p>
 
 		<div class="w-100 mn-b-big flex-nowrap flex">
       		<input 
@@ -49,18 +49,18 @@
     	</div>
 
 		<a v-if="resendTimer < 1" @click="sendAgain" class="t-blue">
-			{{ t('resendCode') }}
+			{{ t('auth.enterCode.resendCode') }}
 		</a>
 
 		<span v-else>
-			{{resendTimer}} {{ t('secondsResend') }}
+			{{resendTimer}} {{ t('auth.enterCode.secondsResend') }}
 		</span>
 	</section>
 </template>
 
 <script setup>
 	// Import components
-	import Field         from '@martyrs/src/components/Field/Field.vue'
+	import Field from '@martyrs/src/components/Field/Field.vue'
 	// Import libs
 	import { computed,reactive,ref, onMounted, onBeforeMount, watch } from 'vue'
 	import { useRoute,useRouter } from 'vue-router'
@@ -74,11 +74,9 @@
 	const router = useRouter()
 
 	// Localization
-	import text from '@martyrs/src/modules/auth/views/localization/EnterCode.json'
 	// Localization
 	const { t } = useI18n({
 		useScope: 'global', 
-		...text
 	})
 	
 	const state = reactive({

package/src/modules/auth/views/components/pages/EnterPassword.vue

@@ -2,9 +2,9 @@
 	<section class="t-left pd-medium">
 		<!-- Header -->
 		<!-- <img loading="lazy" src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
-		<h3 class="mn-b-small">{{ t('almostDone') }}</h3>
-		<p v-if="route.query.method === 'reset-password'" class="mn-b-semi t-transp">{{ t('newPasswordPrompt') }}</p>
-		<p v-else class="mn-b-semi t-transp">{{ t('registrationPasswordPrompt') }}</p>
+		<h3 class="mn-b-small">{{ t('auth.enterPassword.almostDone') }}</h3>
+		<p v-if="route.query.method === 'reset-password'" class="mn-b-semi t-transp">{{ t('auth.enterPassword.newPasswordPrompt') }}</p>
+		<p v-else class="mn-b-semi t-transp">{{ t('auth.enterPassword.registrationPasswordPrompt') }}</p>
 	
 		<!-- Form -->
 		<div class="mn-b-semi radius-small o-hidden">
@@ -12,13 +12,13 @@
 				v-model:field="auth.state.user.password"
 				type="password" 	
 				:validation="passswordValidation" 
-				:placeholder="t('passwordPlaceholder')"		
+				:placeholder="t('auth.enterPassword.passwordPlaceholder')"		
 				class="bg-light pd-small radius-small mn-b-thin"
 			/>
 			<Field 
 				v-model:field="auth.state.user.passwordRepeat"
 				type="password" 	
-				:placeholder="t('repeatPasswordPlaceholder')"
+				:placeholder="t('auth.enterPassword.repeatPasswordPlaceholder')"
 				class="bg-light pd-small radius-small mn-b-thin"
 			/>
 		</div>
@@ -30,8 +30,8 @@
 		</div>
 		<!-- Button -->
 		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main mn-b-big">
-			<span  v-if="route.query.method === 'reset-password'">{{ t('changePasswordBtn') }}</span>
-			<span v-else>{{ t('registerBtn') }}</span>
+			<span  v-if="route.query.method === 'reset-password'">{{ t('auth.enterPassword.changePasswordBtn') }}</span>
+			<span v-else>{{ t('auth.enterPassword.registerBtn') }}</span>
 		</Button>
 	</section> 
 </template>
@@ -51,11 +51,8 @@ import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
 const passswordValidation = ref(null)
 // Localization
-import text from '@martyrs/src/modules/auth/views/localization/EnterPassword.json'
-// Localization
 const { t } = useI18n({
 	useScope: 'global', 
-	...text
 })
 // Accessing router
 const route = useRoute()

package/src/modules/auth/views/components/pages/ResetPassword.vue

@@ -2,8 +2,8 @@
 	<section class="t-left pd-medium">
 		<!-- <img loading="lazy" src="@/assets/icons/password.png" class="i-extra mn-b-small"> -->
 		<!-- Header -->
-		<h3 class="mn-b-small">{{ t('forgotPasswordTitle') }}</h3>
-		<p class="mn-b-small t-transp">{{ t('instructions') }}</p>
+		<h3 class="mn-b-small">{{ t('auth.resetPassword.forgotPasswordTitle') }}</h3>
+		<p class="mn-b-small t-transp">{{ t('auth.resetPassword.instructions') }}</p>
 		
 		<!-- Select -->
 		<div 
@@ -22,7 +22,7 @@
 		<!-- Phone -->
 			<transition name="slide-fade">
 				<div v-if="tabAuth === 'phone'" class="mn-b-semi radius-small">
-					<p class="mn-b-small t-transp">{{ t('smsInfo') }}</p>
+					<p class="mn-b-small t-transp">{{ t('auth.resetPassword.smsInfo') }}</p>
 					<FieldPhone
 						@change="(event) => auth.state.user.phone = event" 	
 						:dropdownOptions="{
@@ -32,7 +32,7 @@
 						}"
 						:validation="phoneValidation" 
 						mode="national"
-						:inputOptions="{placeholder: t('phonePlaceholder')}"
+						:inputOptions="{placeholder: t('auth.resetPassword.phonePlaceholder')}"
 						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 				</div>
@@ -40,10 +40,10 @@
 			<!-- Email -->
 			<transition name="slide-fade">
 				<div v-if="tabAuth === 'email'" class="mn-b-semi radius-small o-hidden">
-					<p class="mn-b-small t-transp">{{ t('emailInfo') }}</p>
+					<p class="mn-b-small t-transp">{{ t('auth.resetPassword.emailInfo') }}</p>
 					<Field 
 						v-model:field="auth.state.user.email" 		
-						:placeholder="t('emailPlaceholder')" 	
+						:placeholder="t('auth.resetPassword.emailPlaceholder')" 	
 						:validation="emailValidation" 
 						class="bg-light h-4r pd-medium radius-small" 
 					/>
@@ -51,7 +51,7 @@
 			</transition>
 		</div>
 		<!-- Button -->
-		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main">{{ t('sendCode') }}</Button>
+		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main">{{ t('auth.resetPassword.sendCode') }}</Button>
 	</section> 
 </template>
 
@@ -65,8 +65,6 @@ import Button        from '@martyrs/src/components/Button/Button.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-// Localization
-import text from '@martyrs/src/modules/auth/views/localization/ResetPassword.json'
 // Import state
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 import * as twofa from '@martyrs/src/modules/auth/views/store/twofa.js'
@@ -76,7 +74,6 @@ import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/i
 // Localization
 const { t } = useI18n({
 	useScope: 'global', 
-	...text
 })
 // Validation
 const phoneValidation = ref(null)
@@ -87,8 +84,8 @@ const router = useRouter()
 // Accessing state
 const availableTabs = computed(() => {
     const tabs = [
-        { name: t('phone'), value: 'phone' },
-        { name: t('email'), value: 'email' }
+        { name: t('auth.resetPassword.phone'), value: 'phone' },
+        { name: t('auth.resetPassword.email'), value: 'email' }
     ];
     return tabs.filter(tab => !globals.state.options.auth.authMethodsExclude.includes(tab.value));
 });

package/src/modules/auth/views/components/pages/SignIn.vue

@@ -4,13 +4,13 @@
 		<img loading="lazy" :src="'/logo/logo.svg'" class="i-extra radius-small mn-b-small">
 
 		<h3 class="mn-b-medium">
-			{{ t('title') }}
+			{{ t('auth.signIn.title') }}
 			<br>
-			<span class="t-semi">{{ t('subtitle') }}</span>
+			<span class="t-semi">{{ t('auth.signIn.subtitle') }}</span>
 		</h3>
 
 		<p class="mn-b-big">
-			<router-link :to="{name: 'Sign Up', query: { returnUrl: route.query?.returnUrl}}" class="underline t-second">{{ t('signup') }}</router-link>
+			<router-link :to="{name: 'Sign Up', query: { returnUrl: route.query?.returnUrl}}" class="underline t-second">{{ t('auth.signIn.signup') }}</router-link>
 		</p>
 		
 		<!-- Select -->
@@ -40,7 +40,7 @@
 						:validCharactersOnly="true"
 						:validation="phoneValidation" 
 						mode="national"
-						:inputOptions="{placeholder: t('phonePlaceholder'), type: 'tel'}"
+						:inputOptions="{placeholder: t('auth.signIn.phonePlaceholder'), type: 'tel'}"
 						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 					
@@ -50,7 +50,7 @@
 				<div v-show="tabAuth === 'email'" class="mn-b-thin radius-small o-hidden">
 					<Field 
 						v-model:field="auth.state.user.email" 	
-						:placeholder="t('emailPlaceholder')" 	
+						:placeholder="t('auth.signIn.emailPlaceholder')" 	
 						:validation="emailValidation"
 						:tabIndex="-1"
 						class="bg-light h-4r pd-medium radius-small" 
@@ -64,7 +64,7 @@
 			v-model:field="auth.state.user.password"
 			type="password" 	
 			:validation="passswordValidation" 
-			:placeholder="t('passwordPlaceholder')" 
+			:placeholder="t('auth.signIn.passwordPlaceholder')" 
 			class="
         bg-light
         pd-medium
@@ -79,7 +79,7 @@
 				:to="{name: 'Reset Password', query: { returnUrl: route.query?.returnUrl}}"
 				class="underline d-block t-blue"
 			>
-				{{ t('forgotPassword') }}
+				{{ t('auth.signIn.forgotPassword') }}
 			</router-link>
 		</div>
 		<!-- Button -->
@@ -88,7 +88,7 @@
 			:callback="redirectTo" 
 			class="w-100 bg-main"
 		>
-			{{ t('signin') }}
+			{{ t('auth.signIn.signin') }}
 		</Button>
 		
 		<!-- <Button 
@@ -96,7 +96,7 @@
 			:callback="redirectTo" 
 			class="mn-b-thin bg-black t-white"
 		>
-			{{ t('signin_apple') }}
+			{{ t('auth.signIn.signin_apple') }}
 		</Button> -->
 	</section> 
 </template>
@@ -111,8 +111,6 @@ import Button        from '@martyrs/src/components/Button/Button.vue'
 import { computed, onMounted, ref, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-// Import localization
-import text from '@martyrs/src/modules/auth/views/localization/SignIn.json'
 // Import state
 import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
@@ -127,14 +125,13 @@ const route = useRoute()
 const router = useRouter()
 // Localization
 const { t } = useI18n({
-	useScope: 'global', 
-	...text
+	useScope: 'global'
 })
 // Accessing state
 const availableTabs = computed(() => {
     const tabs = [
-        { name: t('phone'), value: 'phone' },
-        { name: t('email'), value: 'email' }
+        { name: t('auth.signIn.phone'), value: 'phone' },
+        { name: t('auth.signIn.email'), value: 'email' }
     ];
     return tabs.filter(tab => !globals.state.options.auth.authMethodsExclude.includes(tab.value));
 });

package/src/modules/auth/views/components/pages/SignUp.vue

@@ -2,7 +2,7 @@
 	<section class="t-left pd-medium">
 		<!-- Header -->
 		<!-- <img loading="lazy" src="@/assets/images/logo.svg" class="i-extra mn-b-small"> -->
-		<h3 class="mn-b-small">{{t('title')}}</h3>
+		<h3 class="mn-b-small">{{t('auth.signUp.title')}}</h3>
 		
 		<!-- Select -->
 		<div 
@@ -21,7 +21,7 @@
 		<!-- Phone -->
 			<transition name="slide-fade">
 				<div v-show="tabAuth === 'phone'" class="mn-b-semi radius-small">
-					<p class="mn-b-small t-transp">{{t('smsNotice')}}</p>
+					<p class="mn-b-small t-transp">{{t('auth.signUp.smsNotice')}}</p>
 					<FieldPhone
 						@change="(event) => auth.state.user.phone = event" 	
 						:dropdownOptions="{
@@ -31,7 +31,7 @@
 						}"
 						:validation="phoneValidation" 
 						mode="national"
-						:inputOptions="{placeholder: t('phonePlaceholder')}"
+						:inputOptions="{placeholder: t('auth.signUp.phonePlaceholder')}"
 						class="bg-light h-4r pd-small radius-small mn-b-thin" 
 					/>
 					
@@ -39,10 +39,10 @@
 			</transition>
 			<transition name="slide-fade">
 				<div v-show="tabAuth === 'email'" class="mn-b-semi radius-small o-hidden">
-					<p class="mn-b-small t-transp">{{t('emailNotice')}}</p>
+					<p class="mn-b-small t-transp">{{t('auth.signUp.emailNotice')}}</p>
 					<Field 
 						v-model:field="auth.state.user.email" 	
-						:placeholder="t('emailPlaceholder')" 	
+						:placeholder="t('auth.signUp.emailPlaceholder')" 	
 						:validation="emailValidation"
 						class="bg-light h-4r pd-medium radius-small" 
 					/>
@@ -51,11 +51,11 @@
 		</div>
 		
 		<!-- Button -->
-		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main mn-b-big">{{t('sendCode')}}</Button>
+		<Button :submit="onSubmit" :callback="redirectTo" class="w-100 bg-main mn-b-big">{{t('auth.signUp.sendCode')}}</Button>
 			
 		<!-- Links -->
 		<div class="w-100">
-			<router-link :to="{name: 'Sign In', query: { returnUrl: route.query.returnUrl}}" class="underline mn-b-medium d-block t-blue">{{t('haveAccount')}}</router-link>
+			<router-link :to="{name: 'Sign In', query: { returnUrl: route.query.returnUrl}}" class="underline mn-b-medium d-block t-blue">{{t('auth.signUp.haveAccount')}}</router-link>
 		</div>
 
 	</section> 
@@ -71,8 +71,6 @@
 	import { computed, onMounted, ref } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
-	// Import localization
-	import text from '@martyrs/src/modules/auth/views/localization/SignUp.json'
 	// Import state
 	import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
 	import * as twofa from '@martyrs/src/modules/auth/views/store/twofa.js'
@@ -82,7 +80,6 @@
 	// Localization
 	const { t } = useI18n({
 		useScope: 'global', 
-		...text
 	})
 	// Validation
 	const phoneValidation = ref(null)
@@ -94,8 +91,8 @@
 	// Accessing state
 	const availableTabs = computed(() => {
 	    const tabs = [
-	        { name: t('phone'), value: 'phone' },
-	        { name: t('email'), value: 'email' }
+	        { name: t('auth.signUp.phone'), value: 'phone' },
+	        { name: t('auth.signUp.email'), value: 'email' }
 	    ];
 	    return tabs.filter(tab => !globals.state.options.auth.authMethodsExclude.includes(tab.value));
 	});

package/src/modules/auth/views/components/sections/SliderFeatures.vue

@@ -1,75 +1,50 @@
 <script setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import Slider from '@martyrs/src/components/Slider/Slider.vue'
 
-const text = {
-  messages: {
-    en: {
-      features: [
-        {
-          title: "What's the Weeder Token, Dude?",
-          description: "WDT is like, the backbone of our rad community. It's cash, it's power, it's an investment. Groovy, right?", 
-        },
-        {
-          title: "Light Up and Level Up",
-          description: "Order up, light up, and earn Weeder tokens. More tokes, more cash in your pocket, man.", 
-        },
-        {
-          title: "Hang Ten with Our Community",
-          description: "Find the dopest strains and start floating on cloud 9 with us!", 
-        },
-        {
-          title: "Shop 'Til You Drop... Into Your Couch",
-          description: "Score primo bud and gear with just a few clicks. Delivered right to your pad!", 
-        },
-      ]
-    },
-    ru: {
-      features: [
-        {
-          title: "Что такое токен Weeder, Бро?",
-          description: "WDT - это как основа нашего крутого сообщества. Это деньги, это власть, это инвестиции. Круто, а?", 
-        },
-        {
-          title: "Зажигай и Развивайся",
-          description: "Закажи шмали, курни и зарабатывай токены Weeder. Чем больше курнешь, тем больше кэша у тебя в кармане, чувак.", 
-        },
-        {
-          title: "Веселись с Нашим Сообществом",
-          description: "Найди самые крутые сорта и начни шмалить на девятом облаке вместе с нами.", 
-        },
-        {
-          title: "Покупайте, Когда Накурились",
-          description: "Закажи премиумную бошку и крутые аксессуары за пару кликов, чувак. Прямо к твоей двери!",
-        },
-      ]
-    }
-  }
-}
+import Slider from '@martyrs/src/components/Slider/Slider.vue'
 
-const { tm } = useI18n(text)
-const features = computed(() => tm('features'))
+const { tm } = useI18n({
+  useScope: 'global'
+})
+const features = computed(() => tm('auth.features'))
 </script>
 
 <template>
-  <Slider :showDots="true" :slideCount="features.length">
-    <div class="carousel__slide pd-nano" v-for="(feature, index) in features" :key="index">
-      <div class="parent-div" :style="`background-image: url(/assets/images/features/${index}.png); background-size:cover; background-position: center center;`">
-        <div class="background-div"></div>
-        <h4 class="mn-b-small">{{ feature.title }}</h4>
-        <p class='mn-b-big mn-r-small mn-l-small'>{{ feature.description }}</p>
+  <Slider :showDots="true" :slideCount="features.length" class="auth_slider h-100">
+    <div class="carousel__slide" v-for="(feature, index) in features" :key="index">
+      <div class="parent-div flex flex-h-center" >
+        <div class="background-div" :style="`background-image: url(/features/${index}.png);`"></div>
+        <div class="pd-big">
+          <h5 class="t-center w-100 mn-b-regular">{{ feature.title }}</h5>
+          <p class='t-center t-transp w-100'>{{ feature.description }}</p>
+        </div>
       </div>
     </div>
   </Slider>
 </template>
 
 <style lang="scss">
+.auth_slider .carousel {
+  height: 100%;
+}
+
+.auth_slider .carousel__container {
+  height: 100%;
+}
+
 .parent-div {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
+  object-fit: contain;
+}
+
+.background-div {
+  background-size:cover; 
+  background-position: center center; 
+  background-repeat: no-repeat;
 }
 
 .background-div {

package/src/modules/globals/globals.client.js

@@ -136,6 +136,7 @@ export {
   mixins,
   scrollBehavior,
   store,
+  i18nManager,
   // Store
   storeGlobals,
   websockets,