@ozdao/martyrs 0.2.585 → 0.2.586

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

@@ -1,157 +1,213 @@
 <template>
-	<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('auth.signUp.title')}}</h3>
-		
-		<!-- Select -->
-		<div 
-			v-if="availableTabs.length > 1" 
-			class="mn-b-small p-small uppercase fw-semi bg-light radius-small o-hidden"
-		>
-			<Tab 
-				v-model:selected="tabAuth"
-				:tabs="availableTabs"
-				classTab="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
-			/>
-		</div>
-
-		<!-- Form -->
-		<div class="pos-relative">
-		<!-- Phone -->
-			<transition name="slide-fade">
-				<div v-show="tabAuth === 'phone'" class="mn-b-semi radius-small">
-					<p class="mn-b-small t-transp">{{t('auth.signUp.smsNotice')}}</p>
-					<FieldPhone
-						@change="(event) => auth.state.user.phone = event" 	
-						:dropdownOptions="{
-							showDialCodeInSelection: true,
-							showFlags: true,
-							showDialCodeInList: true
-						}"
-						:validation="phoneValidation" 
-						mode="national"
-						:inputOptions="{placeholder: t('auth.signUp.phonePlaceholder')}"
-						class="bg-light h-4r pd-small radius-small mn-b-thin" 
-					/>
-					
-				</div>
-			</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('auth.signUp.emailNotice')}}</p>
-					<Field 
-						v-model:field="auth.state.user.email" 	
-						:placeholder="t('auth.signUp.emailPlaceholder')" 	
-						:validation="emailValidation"
-						class="bg-light h-4r pd-medium radius-small" 
-					/>
-				</div>
-			</transition>
-		</div>
-		
-		<!-- 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('auth.signUp.haveAccount')}}</router-link>
-		</div>
-
-	</section> 
+  <section class="t-left pd-medium">
+    <h3 class="mn-b-small">{{ t('auth.signUp.title') }}</h3>
+
+    <!-- Tab selector -->
+    <div
+      v-if="availableTabs.length > 1"
+      class="mn-b-small p-small uppercase fw-semi bg-light radius-small o-hidden"
+    >
+      <Tab
+        v-model:selected="tabAuth"
+        :tabs="availableTabs"
+        classTab="pd-small pd-r-medium pd-l-medium w-100 pd-small radius-small"
+      />
+    </div>
+
+    <!-- Form -->
+    <div class="pos-relative">
+      <!-- Phone -->
+      <transition name="slide-fade">
+        <div v-show="tabAuth === 'phone'" class="mn-b-semi radius-small">
+          <p class="mn-b-small t-transp">{{ t('auth.signUp.smsNotice') }}</p>
+          <FieldPhone
+            @change="(event) => phone = event"
+            :dropdownOptions="{
+              showDialCodeInSelection: true,
+              showFlags: true,
+              showDialCodeInList: true
+            }"
+            :validation="phoneValidation"
+            mode="national"
+            :inputOptions="{ placeholder: t('auth.signUp.phonePlaceholder') }"
+            class="bg-light h-4r pd-small radius-small mn-b-thin"
+          />
+        </div>
+      </transition>
+      <!-- Email -->
+      <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('auth.signUp.emailNotice') }}</p>
+          <Field
+            v-model:field="email"
+            :placeholder="t('auth.signUp.emailPlaceholder')"
+            :validation="emailValidation"
+            class="bg-light h-4r pd-medium radius-small"
+          />
+        </div>
+      </transition>
+    </div>
+
+    <!-- Password fields -->
+    <div class="mn-b-semi">
+      <Field
+        v-model:field="password"
+        type="password"
+        :placeholder="t('auth.enterPassword.passwordPlaceholder')"
+        :validation="passwordValidation"
+        class="bg-light pd-small radius-small mn-b-thin"
+      />
+      <Field
+        v-model:field="passwordRepeat"
+        type="password"
+        :placeholder="t('auth.enterPassword.repeatPasswordPlaceholder')"
+        class="bg-light pd-small radius-small"
+      />
+    </div>
+
+    <!-- EULA -->
+    <div class="p-regular fw-semi mn-b-semi">
+      By registering, you agree to our
+      <a class="t-grey" href="/legal/eula" target="_blank" rel="noopener noreferrer">End User License Agreement (EULA)</a>
+    </div>
+
+    <!-- Button -->
+    <Button :submit="onSubmit" class="w-100 bg-main mn-b-big">
+      {{ t('auth.enterPassword.registerBtn') }}
+    </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('auth.signUp.haveAccount') }}
+      </router-link>
+    </div>
+  </section>
 </template>
 
-	<script setup>
-	// Import components
-	import Tab           from '@martyrs/src/components/Tab/Tab.vue'
-	import Field         from '@martyrs/src/components/Field/Field.vue'
-	import FieldPhone    from '@martyrs/src/components/FieldPhone/FieldPhone.vue'
-	import Button        from '@martyrs/src/components/Button/Button.vue'
-	// Import libs
-	import { computed, onMounted, ref } from 'vue'
-	import { useRoute, useRouter } from 'vue-router'
-	import { useI18n } from 'vue-i18n'
-	// Import store
-	import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-	// Import validation
-	import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
-	
-	// Get store
-	const store = useStore()
-	const auth = store.auth || { state: {}, actions: {} }
-	const twofa = store.twofa || { state: {}, actions: {}, sendCode: () => {} }
-	const core = store.core || { state: {}, actions: {} }
-	// Localization
-	const { t } = useI18n({
-		useScope: 'global', 
-	})
-	// Validation
-	const phoneValidation = ref(null)
-	const emailValidation = ref(null)
-	// Accessing router
-	const route = useRoute()
-	const router = useRouter()
-	// Accessing state
-	const availableTabs = computed(() => {
-	    const tabs = [
-	        { name: t('auth.signUp.phone'), value: 'phone' },
-	        { name: t('auth.signUp.email'), value: 'email' }
-	    ];
-	    const excludeMethods = core.state?.options?.auth?.authMethodsExclude || [];
-	    return tabs.filter(tab => !excludeMethods.includes(tab.value));
-	});
-
-	const tabAuth = ref(availableTabs.value.length ? availableTabs.value[0].value : '');
-	// Methods
-	async function onSubmit() {
-		try {
-		  if (tabAuth.value === 'phone') await inputsValidation.validateInputs(
-				phoneValidation, 
-				inputsValidation.validatePhone, 
-				auth.state.user.phone, 
-				'Некорректный телефон'
-			)
-			if (tabAuth.value === 'email') await inputsValidation.validateInputs(
-				emailValidation, 
-				inputsValidation.validateEmail, 
-				auth.state.user.email, 
-				'Некорректный email'
-			)
-		} catch (error) {
-			throw new Error
-		}
-		try {
-	  	await twofa.sendCode(auth.state.user, 'signup', tabAuth.value)
-	  } catch (error) {
-			throw new Error
-		}
-	}
-
-	function redirectTo () {
-		router.push({ name: 'Enter Code', query: { returnUrl: route.query.returnUrl}})
-	}
-</script>
+<script setup>
+import Tab from '@martyrs/src/components/Tab/Tab.vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import FieldPhone from '@martyrs/src/components/FieldPhone/FieldPhone.vue'
+import Button from '@martyrs/src/components/Button/Button.vue'
 
-<style lang="scss">
-	.slide-fade-enter-active {
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	}
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
+import { setError } from '@martyrs/src/modules/core/views/store/core.store.js'
+import { withOtp } from '@martyrs/src/modules/auth/views/plugins/otp.plugin.js'
+import $axios from '@martyrs/src/modules/core/views/utils/axios-instance.js'
+import * as inputsValidation from '@martyrs/src/modules/auth/views/validations/inputs.validation'
+
+const store = useStore()
+const core = store.core || { state: {} }
+const auth = store.auth
 
-	.slide-fade-leave-active {
-	  transition: all  0.3s cubic-bezier(0.4, 0, 0.2, 1);
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n({ useScope: 'global' })
 
-	}
+const email = ref('')
+const phone = ref('')
+const password = ref('')
+const passwordRepeat = ref('')
 
-	.slide-fade-enter-from,
-	.slide-fade-leave-to {
-		position: absolute;
-	  transform: translateX(20px);
-	  opacity: 0;
-	  left: 0;
-	  top: 0;
-	}
+const phoneValidation = ref(null)
+const emailValidation = ref(null)
+const passwordValidation = ref(null)
 
-	.slide-fade-leave-to {
+const availableTabs = computed(() => {
+  const tabs = [
+    { name: t('auth.signUp.phone'), value: 'phone' },
+    { name: t('auth.signUp.email'), value: 'email' }
+  ]
+  const excludeMethods = core.state?.options?.auth?.authMethodsExclude || []
+  return tabs.filter(tab => !excludeMethods.includes(tab.value))
+})
+
+const tabAuth = ref(availableTabs.value.length ? availableTabs.value[0].value : '')
+
+async function onSubmit() {
+  // Validate identifier
+  if (tabAuth.value === 'phone') {
+    await inputsValidation.validateInputs(
+      phoneValidation,
+      inputsValidation.validatePhone,
+      phone.value,
+      'Некорректный телефон'
+    )
+  }
+  if (tabAuth.value === 'email') {
+    await inputsValidation.validateInputs(
+      emailValidation,
+      inputsValidation.validateEmail,
+      email.value,
+      'Некорректный email'
+    )
+  }
+
+  // Validate password
+  await inputsValidation.validateInputs(
+    passwordValidation,
+    inputsValidation.validatePassword,
+    password.value,
+    'Некорректный пароль'
+  )
+
+  if (password.value !== passwordRepeat.value) {
+    setError({ response: { data: { errorCode: 'PASSWORDS_DO_NOT_MATCH' } } })
+    throw new Error('PASSWORDS_DO_NOT_MATCH')
+  }
+
+  // Signup with OTP verification
+  try {
+    const result = await withOtp(
+      (data) => $axios.post('/api/auth/signup', data),
+      {
+        email: tabAuth.value === 'email' ? email.value : undefined,
+        phone: tabAuth.value === 'phone' ? phone.value : undefined,
+        password: password.value,
+        type: tabAuth.value,
+        inviteCode: route.query.invite
+      }
+    )
+
+    // Success - save token and redirect
+    if (result.data?.accessToken) {
+      const Cookies = (await import('js-cookie')).default
+      Cookies.set('user', JSON.stringify(result.data), { path: '/', expires: 7 })
+      await auth.actions.initialize()
+
+      if (route.query.returnUrl) {
+        router.push({ path: route.query.returnUrl, query: { afterAuth: 'true' } })
+      } else {
+        router.push({ name: 'User Profile', params: { _id: result.data._id }, query: { afterAuth: 'true' } })
+      }
+    }
+  } catch (error) {
+    setError(error)
+    throw error
+  }
+}
+</script>
+
+<style lang="scss">
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-	}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  position: absolute;
+  transform: translateX(20px);
+  opacity: 0;
+  left: 0;
+  top: 0;
+}
 </style>

package/src/modules/auth/views/plugins/otp.plugin.js

@@ -0,0 +1,104 @@
+import { h, reactive, render, defineAsyncComponent } from 'vue';
+
+const OtpDialog = defineAsyncComponent(() =>
+  import('@martyrs/src/modules/auth/views/components/blocks/OtpDialog.vue')
+);
+
+const state = reactive({
+  visible: false,
+  mode: 'single', // 'single' или 'dual'
+  challenge: null,
+  challenges: null,
+  resolve: null,
+  reject: null
+});
+
+export function showOtp(challenge) {
+  if (state.visible) {
+    return Promise.reject(new Error('OTP dialog already open'));
+  }
+
+  return new Promise((resolve, reject) => {
+    state.resolve = resolve;
+    state.reject = reject;
+    state.challenge = challenge;
+    state.mode = 'single';
+    state.visible = true;
+  });
+}
+
+export function showDualOtp(challenges) {
+  if (state.visible) {
+    return Promise.reject(new Error('OTP dialog already open'));
+  }
+
+  return new Promise((resolve, reject) => {
+    state.resolve = resolve;
+    state.reject = reject;
+    state.challenges = challenges;
+    state.mode = 'dual';
+    state.visible = true;
+  });
+}
+
+export function closeOtp(code) {
+  state.visible = false;
+  state.resolve?.(code);
+  state.resolve = state.reject = null;
+}
+
+export function closeDualOtp(codes) {
+  state.visible = false;
+  state.resolve?.(codes);
+  state.resolve = state.reject = null;
+}
+
+export function cancelOtp() {
+  state.visible = false;
+  state.reject?.(new Error('OTP cancelled'));
+  state.resolve = state.reject = null;
+}
+
+export async function withOtp(makeRequest, data) {
+  const result = await makeRequest(data);
+
+  if (result.data?.status === 'requires_otp') {
+    if (result.data.mode === 'dual') {
+      const codes = await showDualOtp(result.data.challenges);
+      return makeRequest({
+        ...data,
+        challenges: [
+          { challengeId: result.data.challenges[0].challengeId, code: codes[0] },
+          { challengeId: result.data.challenges[1].challengeId, code: codes[1] }
+        ]
+      });
+    } else {
+      const code = await showOtp(result.data.challenge);
+      return makeRequest({
+        ...data,
+        challengeId: result.data.challenge.challengeId,
+        otp: code
+      });
+    }
+  }
+
+  return result;
+}
+
+export default {
+  install(app) {
+    app.config.globalProperties.$showOtp = showOtp;
+    app.config.globalProperties.$showDualOtp = showDualOtp;
+
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      const container = document.createElement('div');
+      container.id = 'otp-dialog-host';
+      container.className = 'z-index-7';
+      document.body.appendChild(container);
+
+      const vnode = h(OtpDialog, { otpState: state, closeOtp, closeDualOtp, cancelOtp });
+      vnode.appContext = app._context;
+      render(vnode, container);
+    }
+  }
+};

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

@@ -10,6 +10,7 @@ export function getAuthRoutes(options = {}) {
       basePath: 'auth',
       component: () => import(/* webpackChunkName: "auth-layout" */ '../components/layouts/Auth.vue'),
       meta: {
+        layoutKey: 'auth',
         title: {
           en: 'Аутентификация',
           ru: 'Authentication',
@@ -52,30 +53,6 @@ export function getAuthRoutes(options = {}) {
           },
           component: () => import(/* webpackChunkName: "signup" */ '../components/pages/SignUp.vue'),
         },
-        {
-          path: 'enter-code',
-          name: 'Enter Code',
-          beforeEnter: [requiresNoAuth, checkUser],
-          meta: {
-            title: {
-              en: 'Enter Code',
-              ru: 'Введите Код',
-            },
-          },
-          component: () => import(/* webpackChunkName: "signup" */ '../components/pages/EnterCode.vue'),
-        },
-        {
-          path: 'enter-password',
-          name: 'Enter Password',
-          beforeEnter: [requiresNoAuth, checkUser],
-          meta: {
-            title: {
-              en: 'Enter Password',
-              ru: 'Введите Пароль',
-            },
-          },
-          component: () => import(/* webpackChunkName: "signup" */ '../components/pages/EnterPassword.vue'),
-        },
         {
           path: 'invite',
           name: 'Invite',

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

@@ -133,18 +133,7 @@ export function getUsersRoutes(options = {}) {
               },
               component: () => import(/* webpackChunkName: "profile" */ '@martyrs/src/modules/organizations/components/pages/Organizations.vue'),
             },
-            {
-              path: 'wallet',
-              name: 'User Wallet',
-              meta: {
-                title: {
-                  en: 'Wallet',
-                  ru: 'Кошелек',
-                },
-              },
-              component: () => import(/* webpackChunkName: "profile" */ '@martyrs/src/modules/wallet/views/components/pages/Wallet.vue'),
-            },
-          ],
+            ],
         },
       ],
     }

package/src/modules/auth/views/store/auth.js

@@ -8,8 +8,6 @@ import { reactive, watch } from 'vue';
 // Globals
 import { useSession, setError } from '@martyrs/src/modules/core/views/store/core.store.js';
 import wsManager from '@martyrs/src/modules/core/views/classes/ws.manager.js';
-// State
-import * as twofa from './twofa.js';
 
 // State
 const state = reactive({
@@ -203,72 +201,6 @@ const actions = {
     console.log('[AUTH] Disconnecting WebSocket on logout');
     wsManager.disconnect();
   },
-
-  async resetPassword(user, type) {
-    try {
-      const response = await $axios.post('/api/auth/reset-password', {
-        email: user.email,
-        phone: user.phone,
-        type,
-      });
-
-      Object.assign(twofa.state.code, {
-        ...response.data,
-        isSended: true,
-      });
-
-      return response.data;
-    } catch (error) {
-      setError(error);
-      return Promise.reject(error);
-    }
-  },
-
-  async updatePassword(user, type) {
-    const { password, passwordRepeat } = state.user;
-
-    if (password !== passwordRepeat) {
-      const error = {
-        response: {
-          data: { errorCode: 'PASSWORDS_DO_NOT_MATCH' },
-        },
-      };
-      setError(error);
-      throw new Error(error.response.status);
-    }
-
-    try {
-      const response = await $axios.post('/api/auth/update-password', {
-        email: user.email,
-        phone: user.phone,
-        password: user.password,
-        passwordRepeat: user.passwordRepeat,
-        type,
-      });
-
-      if (response.data.accessToken) {
-        setCookie('user', response.data);
-      }
-
-      Object.assign(state.user, {
-        ...response.data,
-      });
-
-      Object.assign(state.access, {
-        token: response.data.accessToken,
-        status: true,
-      });
-
-      session.set(response.data);
-
-      return response.data;
-    } catch (error) {
-      // Make sure cookie is removed on password update error
-      await removeCookie('user');
-      setError(error);
-      return Promise.reject(error);
-    }
-  },
 };
 
 // Cookies

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

@@ -2,6 +2,7 @@ import $axios from '@martyrs/src/modules/core/views/utils/axios-instance.js';
 import { reactive } from 'vue';
 // Add import for global error handler
 import { setError } from '@martyrs/src/modules/core/views/store/core.store.js';
+import { withOtp } from '../plugins/otp.plugin.js';
 
 const state = reactive({
   all: [],
@@ -57,11 +58,14 @@ const actions = {
 
   async update(user) {
     try {
-      const response = await $axios.put(`/api/users/${user._id}`, user);
+      const response = await withOtp(
+        (data) => $axios.put(`/api/users/${data._id}`, data),
+        user
+      );
       mutations.set(response.data, 'current');
       return Promise.resolve(response.data);
     } catch (error) {
-      setError(error); // Add global error handling
+      setError(error);
       return Promise.reject(error);
     }
   },