@ozdao/martyrs 0.2.481 → 0.2.483

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

@@ -1,189 +1,26 @@
 <template>
-	<div  v-if="show" class="for-transition w-100">
-   
-    <!-- <ProfileCompletion 
-      v-if="route.params._id === auth.state.user._id" 
-      :user="auth.state.user._id"
-      :target="users.state.current"
-      :cta="false"
-    /> -->
-
-    <div class="bg-white mn-b-thin pd-medium">
-      <h4 class="mn-b-small">Profile</h4>
-
-      <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
-         <UploadImage 
-            v-model:photo="users.state.current.profile.photo"
-            :uploadPath="'users/' + users.state.current._id + '/avatars'"
-            class="h-4r w-4r aspect-1x1 o-hidden bg-white mn-b-thin radius-extra" 
-          />
-          <h4>Upload userpic</h4>
+  <Popup 
+    :isPopupOpen="true" 
+    @close-popup="router.back()"
+    title="Edit Profile"
+    align="center center"
+    class="w-100 max-w-40r bg-white radius-medium pd-medium"
+  >
+    <div class="flex gap-medium">
+      <ProfileEditSidebar class="w-12r flex-shrink-0" />
+      
+      <div class="flex-grow">
+        <RouterView />
       </div>
-
-      <Field 
-        v-model:field="users.state.current.username"     
-        label="@"  
-        placeholder="Not specified" 
-        class="mn-b-thin w-100 bg-light pd-medium radius-small" 
-        :validation="organizationName" 
-      />
-
-      <p class="mn-b-semi">Your username will be used for URL of profile like {{API_URL}}/users/username</p>
-
-      <Field 
-        v-model:field="users.state.current.profile.name"     
-        label="Name"  
-        placeholder="Not specified" 
-        class="mn-b-thin bg-light pd-medium radius-small" 
-        :validation="organizationName" 
-      />
-
-      <Field 
-        v-model:field="users.state.current.profile.description"     
-        label="Description"  
-        placeholder="Not specified" 
-        class="mn-b-semi bg-light pd-medium radius-small" 
-        :validation="organizationName" 
-      />
-    </div>
-
-    <!-- <p class="mn-b-thin">Select your birthday if you want to receive your birthday gift.</p>
-    
-    <Field 
-      v-model:field="users.state.current.birthday"     
-      label="Birthday"  
-      type="date"
-      placeholder="Not specified" 
-      class="mn-b-semi bg-light pd-medium radius-small" 
-      :validation="organizationName" 
-    /> -->
-    <div class="bg-white mn-b-thin pd-medium">
-      <h3 class="mn-b-small">Socials</h3>
-      <p class="mn-b-thin">Please provide only the username for social media profiles, without full links.</p>
-
-      <Field 
-        v-model:field="users.state.current.socials.instagram"
-        label="Instagram"   
-        placeholder="" 
-        class="mn-b-thin bg-light pd-medium radius-small" 
-      />
-      <Field 
-        v-model:field="users.state.current.socials.twitter"
-        label="Twitter"   
-        placeholder="" 
-        class="mn-b-thin bg-light pd-medium radius-small" 
-      />
-      <Field 
-        v-model:field="users.state.current.socials.facebook"
-        label="Facebook"   
-        placeholder="" 
-        class="mn-b-thin bg-light pd-medium radius-small" 
-      />
-      <Field 
-        v-model:field="users.state.current.socials.telegram"
-        label="Telegram"   
-        placeholder="" 
-        class="mn-b-semi bg-light pd-medium radius-small" 
-      />
-    </div>
-
-    <ProfileEditCredentials class="bg-white mn-b-thin pd-medium"/>
-
-    <div class="bg-white mn-b-thin pd-medium">
-      <h3 class="mn-b-small">Settings</h3>
-      <Checkbox 
-        :label="'Darkmode'"
-        :radio="globals.state.theme.darkmode"
-        @update:radio="event => globals.actions.toggleTheme()"
-        class="w-100 bg-light t-black pd-medium radius-small"
-      />
     </div>
-
-    <Button 
-      :submit="onSubmit" 
-      :callback="redirectTo" 
-      class="mn-b-thin bg-main w-100"
-    > 
-      Save
-    </Button>
-
-		<Button
-      :submit="onSubmitDelete" 
-      :callback="a = () => {router.push({name: 'Sign In'})}" 
-      class="mn-b-thin w-100 bg-red t-white"
-    >
-      Delete Account
-    </Button>
-	</div>
+  </Popup>
 </template>
 
 <script setup>
-  // Import components
-  import Tab           from '@martyrs/src/components/Tab/Tab.vue'
-  import Field         from '@martyrs/src/components/Field/Field.vue'
-  import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
-  import Button        from '@martyrs/src/components/Button/Button.vue'
-  import UploadImage   from '@martyrs/src/components/UploadImage/UploadImage.vue';
-
-  import ProfileCompletion from '@martyrs/src/modules/auth/views/components/sections/ProfileCompletion.vue'
-  import ProfileEditCredentials from '@martyrs/src/modules/auth/views/components/sections/ProfileEditCredentials.vue'
-  // Import libs
-  import { computed, onMounted, ref, onBeforeMount } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
-  // Import state
-  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
-  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
-  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
-  // Import validation
-  import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
-  const passswordValidation = ref(null)
-  // Accessing router
-  const route = useRoute()
+  import Popup from '@martyrs/src/components/Popup/Popup.vue'
+  import ProfileEditSidebar from './ProfileEditSidebar.vue'
+  
+  import { useRouter } from 'vue-router'
+  
   const router = useRouter()
-
-  const user = ref(null)
-  const show = ref(false)
-
-
-  onMounted(async () => {
-    await users.actions.read({ _id: route.params._id, user: auth.state.user._id });
-    show.value = true
-  })
-  // Methods
-
-  async function onSubmit() {
-    await users.actions.update(users.state.current)
-  }
-
-  // Добавляем редирект после сохранения
-async function handleSave() {
-  await onSubmit()
-  router.replace({ name: 'User Profile', params: { _id: users.state.current._id }})
-}
-
-  async function onSubmitDelete() {
-    const confirmation = window.confirm("Are you sure you want to delete your account? Restoration will be possible only with the help of an administrator.");
-    
-    if (!confirmation) {
-        return;
-    }
-
-    users.state.current.status = 'removed'
-    await users.actions.update(users.state.current)
-    auth.actions.logout()
-  }
-  function redirectTo () {
-    router.replace({ name: 'User Profile', params: { _id: users.state.current._id }});
-  }
-
-  defineExpose({
-    onSubmit,
-    redirectTo
-  })
-</script>
-
-<style lang="scss">
-	#header {
-		// height: 3rem;
-	}
-</style>
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="show" class="for-transition w-100">
+    <ProfileEditCredentials class="bg-white mn-b-thin pd-medium"/>
+
+    <div class="bg-white mn-b-thin pd-medium">
+      <h3 class="mn-b-small">Settings</h3>
+      <Checkbox 
+        :label="'Darkmode'"
+        :radio="globals.state.theme.darkmode"
+        @update:radio="event => globals.actions.toggleTheme()"
+        class="w-100 bg-light t-black pd-medium radius-small"
+      />
+    </div>
+
+    <Button 
+      :submit="onSubmit" 
+      :callback="redirectTo" 
+      class="mn-b-thin bg-main w-100"
+    > 
+      Save
+    </Button>
+
+    <Button
+      :submit="onSubmitDelete" 
+      :callback="() => router.push({name: 'Sign In'})" 
+      class="mn-b-thin w-100 bg-red t-white"
+    >
+      Delete Account
+    </Button>
+  </div>
+</template>
+
+<script setup>
+  import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
+  import Button from '@martyrs/src/components/Button/Button.vue'
+  import ProfileEditCredentials from '@martyrs/src/modules/auth/views/components/sections/ProfileEditCredentials.vue'
+  
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
+  import * as globals from '@martyrs/src/modules/globals/views/store/globals.js'
+  
+  const route = useRoute()
+  const router = useRouter()
+  const show = ref(false)
+  
+  onMounted(async () => {
+    const userId = route.params._id || auth.state.user._id
+    await users.actions.read({ _id: userId, user: auth.state.user._id })
+    show.value = true
+  })
+  
+  async function onSubmit() {
+    await users.actions.update(users.state.current)
+  }
+  
+  async function onSubmitDelete() {
+    const confirmation = window.confirm("Are you sure you want to delete your account? Restoration will be possible only with the help of an administrator.")
+    
+    if (!confirmation) return
+    
+    users.state.current.status = 'removed'
+    await users.actions.update(users.state.current)
+    auth.actions.logout()
+  }
+  
+  function redirectTo() {
+    router.back()
+  }
+</script>

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

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="show" class="for-transition w-100">
+    <div class="bg-white mn-b-thin pd-medium">
+      <h4 class="mn-b-small">Profile</h4>
+
+      <div class="mn-b-thin radius-small w-100 h-10r bg-light flex-center flex-column flex">
+        <UploadImage 
+          v-model:photo="users.state.current.profile.photo"
+          :uploadPath="'users/' + users.state.current._id + '/avatars'"
+          class="h-4r w-4r aspect-1x1 o-hidden bg-white mn-b-thin radius-extra" 
+        />
+        <h4>Upload userpic</h4>
+      </div>
+
+      <Field 
+        v-model:field="users.state.current.username"     
+        label="@"  
+        placeholder="Not specified" 
+        class="mn-b-thin w-100 bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+
+      <p class="mn-b-semi">Your username will be used for URL of profile like {{API_URL}}/users/username</p>
+
+      <Field 
+        v-model:field="users.state.current.profile.name"     
+        label="Name"  
+        placeholder="Not specified" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+
+      <Field 
+        v-model:field="users.state.current.profile.description"     
+        label="Description"  
+        placeholder="Not specified" 
+        class="mn-b-semi bg-light pd-medium radius-small" 
+        :validation="organizationName" 
+      />
+    </div>
+
+    <div class="bg-white mn-b-thin pd-medium">
+      <h3 class="mn-b-small">Socials</h3>
+      <p class="mn-b-thin">Please provide only the username for social media profiles, without full links.</p>
+
+      <Field 
+        v-model:field="users.state.current.socials.instagram"
+        label="Instagram"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.twitter"
+        label="Twitter"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.facebook"
+        label="Facebook"   
+        placeholder="" 
+        class="mn-b-thin bg-light pd-medium radius-small" 
+      />
+      <Field 
+        v-model:field="users.state.current.socials.telegram"
+        label="Telegram"   
+        placeholder="" 
+        class="mn-b-semi bg-light pd-medium radius-small" 
+      />
+    </div>
+
+    <Button 
+      :submit="onSubmit" 
+      :callback="redirectTo" 
+      class="mn-b-thin bg-main w-100"
+    > 
+      Save
+    </Button>
+  </div>
+</template>
+
+<script setup>
+  import Field from '@martyrs/src/components/Field/Field.vue'
+  import Button from '@martyrs/src/components/Button/Button.vue'
+  import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue'
+  
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+  import * as users from '@martyrs/src/modules/auth/views/store/users.js'
+  
+  const route = useRoute()
+  const router = useRouter()
+  const show = ref(false)
+  
+  onMounted(async () => {
+    const userId = route.params._id || auth.state.user._id
+    await users.actions.read({ _id: userId, user: auth.state.user._id })
+    show.value = true
+  })
+  
+  async function onSubmit() {
+    await users.actions.update(users.state.current)
+  }
+  
+  function redirectTo() {
+    router.back()
+  }
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <nav class="bg-light pd-medium radius-small">
+    <RouterLink 
+      :to="{ name: 'Profile Edit Profile', params: { _id: userId } }"
+      class="flex items-center pd-small mn-b-thin radius-small hover:bg-white"
+      :class="{ 'bg-white': route.name === 'Profile Edit Profile' }"
+    >
+      <span>Profile</span>
+    </RouterLink>
+    
+    <RouterLink 
+      :to="{ name: 'Profile Edit Account', params: { _id: userId } }"
+      class="flex items-center pd-small radius-small hover:bg-white"
+      :class="{ 'bg-white': route.name === 'Profile Edit Account' }"
+    >
+      <span>Account</span>
+    </RouterLink>
+  </nav>
+</template>
+
+<script setup>
+  import { computed } from 'vue'
+  import { useRoute } from 'vue-router'
+  import * as auth from '@martyrs/src/modules/auth/views/store/auth.js'
+  
+  const route = useRoute()
+  const userId = computed(() => route.params._id || auth.state.user._id)
+</script>

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

@@ -1,9 +1,7 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-
-import emblaCarouselVue from 'embla-carousel-vue';
-import Autoplay from 'embla-carousel-autoplay'
+import Slider from '@martyrs/src/components/Slider/Slider.vue'
 
 const text = {
   messages: {
@@ -37,7 +35,6 @@ const text = {
           title: "Зажигай и Развивайся",
           description: "Закажи шмали, курни и зарабатывай токены Weeder. Чем больше курнешь, тем больше кэша у тебя в кармане, чувак.", 
         },
-        
         {
           title: "Веселись с Нашим Сообществом",
           description: "Найди самые крутые сорта и начни шмалить на девятом облаке вместе с нами.", 
@@ -51,86 +48,23 @@ const text = {
   }
 }
 
-const { tm,rt } = useI18n(text)
-
-
-
-
-const selectedIndex = ref(0);
-const scrollSnaps = ref([]);
-
-const autoplayOptions = {
-  delay: 2000,
-  jump: false,
-  stopOnInteraction: false,
-  stopOnMouseEnter: false,
-  stopOnFocusIn: true,
-  stopOnLastSnap: false,
-  rootNode: (emblaRoot) => emblaRoot.parentElement
-}
-
-const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay(autoplayOptions)])
-
-const scrollTo = (index) => emblaApi.value && emblaApi.value.scrollTo(index);
-const onInit = (embla) =>  scrollSnaps.value = emblaApi.value.scrollSnapList();
-const onSelect = (embla) => selectedIndex.value = emblaApi.value.selectedScrollSnap();
-
-onMounted(async() => {
-  onInit(emblaApi);
-  onSelect(emblaApi);
-
-  emblaApi.value.on('reInit', onInit);
-  emblaApi.value.on('reInit', onSelect);
-  emblaApi.value.on('select', onSelect);
-});
+const { tm } = useI18n(text)
+const features = computed(() => tm('features'))
 </script>
 
 <template>
-  <div class="embla" ref="emblaNode">
-    <div class="embla__container">
-      <div class="embla__slide pd-nano" v-for="(feature, index) in tm('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>
-        </div>
+  <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>
       </div>
     </div>
-  </div>
+  </Slider>
 </template>
 
 <style lang="scss">
-.carousel__track {
-    height: 100%;
-  }
-.carousel-controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.carousel-indicators {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.carousel-indicators li {
-  list-style: none;
-  margin: 0 5px;
-  width: 10px;
-  height: 10px;
-  background: gray;
-  border-radius: 50%;
-}
-
-.carousel-indicators li.active {
-  background: white;
-}
-
 .parent-div {
   display: flex;
   flex-direction: column;
@@ -139,6 +73,6 @@ onMounted(async() => {
 }
 
 .background-div {
-  flex-grow: 1 // Занимает все оставшееся пространство
+  flex-grow: 1; // Занимает все оставшееся пространство
 }
-</style>
+</style>

package/src/modules/auth/views/localization/EnterCode.json

@@ -1,12 +1,12 @@
 {
   "messages": {
-    "en-default": {
+    "en": {
       "verifyNumberTitle": "Verify Number",
       "instructions": "We have sent a registration code to your phone number. Please enter it in the field below:",
       "resendCode": "Send the code again",
       "secondsResend": "seconds to the possibility of sending the code again."
     },
-    "ru-default": {
+    "ru": {
       "verifyNumberTitle": "Подтвердите номер",
       "instructions": "Мы отправили код регистрации на ваш номер телефона. Введите его в поле ниже:",
       "resendCode": "Отправить код еще раз",

package/src/modules/auth/views/localization/EnterPassword.json

@@ -1,6 +1,6 @@
 {
   "messages": {
-    "en-default": {
+    "en": {
       "almostDone": "Almost there!",
       "newPasswordPrompt": "Please, set a new password.",
       "registrationPasswordPrompt": "Please, set your password to complete the registration.",
@@ -9,7 +9,7 @@
       "changePasswordBtn": "Change Password",
       "registerBtn": "Register"
     },
-    "ru-default": {
+    "ru": {
       "almostDone": "Почти все!",
       "newPasswordPrompt": "Пожалуйста, укажите новый пароль.",
       "registrationPasswordPrompt": "Пожалуйста, укажите пароль, на этом регистрация будет закончена.",

package/src/modules/auth/views/localization/ResetPassword.json

@@ -1,6 +1,6 @@
 {
   "messages": {
-    "en-default": {
+    "en": {
       "forgotPasswordTitle": "Forgot Password?",
       "instructions": "To reset your password, specify the phone or email used during registration.",
       "smsInfo": "We will send you an SMS with a confirmation code to reset your password, which you will need to enter in the next step.",
@@ -11,7 +11,7 @@
       "emailPlaceholder": "Enter your email",
       "sendCode": "Send code"
     },
-    "ru-default": {
+    "ru": {
       "forgotPasswordTitle": "Забыли пароль?",
       "instructions": "Чтобы сбросить пароль, укажите телефон или email, использованные при регистрации.",
       "smsInfo": "Мы вышлем вам SMS с кодом подтверждения для сброса пароля, который вы должны будете ввести в следующем шаге.",

package/src/modules/auth/views/localization/SignIn.json

@@ -1,6 +1,6 @@
 {
   "messages": {
-    "en-default": {
+    "en": {
       "title": "Welcome to OZ DAO,",
       "subtitle": "Sign In to Continue",
       "signup": "Don't have an account?",
@@ -15,7 +15,7 @@
       "signin_apple": "Sign In with Apple",
       "soon": "SOON"
     },
-    "ru-default": {
+    "ru": {
       "title": "Приветствуем вас,",
       "subtitle": "Войдите для продолжения",
       "signup": "Нет аккаунта?",

package/src/modules/auth/views/localization/SignUp.json

@@ -1,6 +1,6 @@
 {
   "messages": {
-    "en-default": {
+    "en": {
       "title": "Sign Up",
       "description": "Choose a convenient way to register via phone or email:",
       "phone": "Phone",
@@ -12,7 +12,7 @@
       "sendCode": "Send Code",
       "haveAccount": "Already have an account?"
     },
-    "ru-default": {
+    "ru": {
       "title": "Новая учетная запись",
       "description": "Выберите удобный способ регистрации через телефон или email:",
       "phone": "Телефон",

package/src/modules/auth/views/router/users.js

@@ -35,18 +35,29 @@ const users = {
             hideNavigationBar: route => route.params._id === auth.state.user._id,
           },
           component: () => import(/* webpackChunkName: "profile" */ '../components/pages/Profile.vue'),
-        },
-        {
-          path: 'edit',
-          name: 'User Edit Profile',
-          beforeEnter: [validationAuth.requiresAuth],
-          meta: {
-            title: {
-              en: 'Edit Profile',
-              ru: 'Редактировать Профиль',
-            },
-          },
-          component: () => import(/* webpackChunkName: "profile" */ '../components/pages/ProfileEdit.vue'),
+          children: [
+            {
+              path: 'edit',
+              name: 'User Edit Profile',
+              component: () => import('../components/pages/ProfileEdit.vue'),
+              children: [
+                {
+                  path: '',
+                  redirect: { name: 'Profile Edit Profile' }
+                },
+                {
+                  path: 'profile',
+                  name: 'Profile Edit Profile',
+                  component: () => import('../components/pages/ProfileEditProfile.vue')
+                },
+                {
+                  path: 'account', 
+                  name: 'Profile Edit Account',
+                  component: () => import('../components/pages/ProfileEditAccount.vue')
+                }
+              ]
+            }
+          ]
         },
         {
           path: 'blogposts',