@ozdao/martyrs 0.2.585 → 0.2.586

package/src/modules/auth/controllers/services/users.service.js

@@ -2,14 +2,17 @@ import addMembersQuantity from '@martyrs/src/modules/organizations/controllers/u
 import addUserStatusFields from '@martyrs/src/modules/organizations/controllers/utils/addUserStatusFields.js';
 import { Types } from 'mongoose';
 const ObjectId = { Types }.Types.ObjectId;
+
 const controllerFactory = db => {
   const User = db.user;
+
   const read = async (req, res) => {
     let query = [];
     let match = {};
     let skip = parseInt(req.query.skip) || 0;
     let limit = parseInt(req.query.limit) || 10;
     let matchConditions = [];
+
     // Модифицированная проверка _id
     if (req.query._id) {
       // Проверяем, является ли _id валидным ObjectId
@@ -21,7 +24,9 @@ const controllerFactory = db => {
         matchConditions.push({ username: req.query._id });
       }
     }
+
     let search = req.query.search;
+
     if (search) {
       let regexPattern = '';
       // Экранирование специальных символов в строке поиска
@@ -47,7 +52,9 @@ const controllerFactory = db => {
         ],
       });
     }
+    
     if (matchConditions.length > 0) query.push({ $match: { $and: matchConditions } });
+   
     query.push({
       $lookup: {
         from: 'orders',
@@ -74,6 +81,14 @@ const controllerFactory = db => {
     });
     query.push(addMembersQuantity());
     if (req.query.user) query.push(addUserStatusFields(req.query.user));
+    // Исключаем sensitive поля
+    query.push({
+      $project: {
+        password: 0,
+        refreshToken: 0,
+        __v: 0
+      }
+    });
     query.push({
       $skip: skip,
     });
@@ -102,14 +117,17 @@ const controllerFactory = db => {
       if (!user) {
         return res.status(404).send({ errorCode: 'USER_NOT_CREATED', message: 'User is not created.' });
       }
-      res.status(200).send(user);
+      const { password, refreshToken, __v, ...safeUser } = user.toObject();
+      res.status(200).send(safeUser);
     } catch (err) {
       return res.status(500).send({ errorCode: 'INTERNAL_SERVER_ERROR', message: err });
     }
   };
   const update = async (req, res) => {
     try {
-      const user = await User.findOneAndUpdate({ _id: req.params._id }, req.body, { new: true });
+      // Исключаем email и phone из обновления — для них отдельные роуты
+      const { email, phone, ...safeData } = req.body;
+      const user = await User.findOneAndUpdate({ _id: req.params._id }, safeData, { new: true }).select('-password -refreshToken -__v');
       if (!user) {
         return res.status(404).send({ errorCode: 'UPDATE_FAILED', message: 'Something wrong when updating user.' });
       }
@@ -118,11 +136,32 @@ const controllerFactory = db => {
       return res.status(500).send({ errorCode: 'INTERNAL_SERVER_ERROR', message: err });
     }
   };
-  const remove = async (req, res) => {
+
+  const updateEmail = async (req, res) => {
+    try {
+      const user = await User.findOneAndUpdate(
+        { _id: req.params._id },
+        { email: req.body.email },
+        { new: true }
+      ).select('-password -refreshToken -__v');
+      if (!user) {
+        return res.status(404).send({ errorCode: 'UPDATE_FAILED', message: 'Something wrong when updating email.' });
+      }
+      res.status(200).send(user);
+    } catch (err) {
+      return res.status(500).send({ errorCode: 'INTERNAL_SERVER_ERROR', message: err });
+    }
+  };
+
+  const updatePhone = async (req, res) => {
     try {
-      const user = await User.findOneAndDelete({ phone: req.params.phone });
+      const user = await User.findOneAndUpdate(
+        { _id: req.params._id },
+        { phone: req.body.phone },
+        { new: true }
+      ).select('-password -refreshToken -__v');
       if (!user) {
-        return res.status(404).send({ errorCode: 'DELETION_FAILED', message: 'User is not deleted.' });
+        return res.status(404).send({ errorCode: 'UPDATE_FAILED', message: 'Something wrong when updating phone.' });
       }
       res.status(200).send(user);
     } catch (err) {
@@ -133,7 +172,8 @@ const controllerFactory = db => {
     read,
     create,
     update,
-    remove,
+    updateEmail,
+    updatePhone,
   };
 };
 export default controllerFactory;

package/src/modules/auth/models/otp.model.js

@@ -0,0 +1,20 @@
+export default db => {
+  const OtpSchema = new db.mongoose.Schema({
+    challengeId: { type: String, required: true, unique: true },
+    identifier: { type: String, required: true },
+    target: { type: db.mongoose.Schema.Types.ObjectId, ref: 'User', default: null },
+    code: { type: String, required: true },
+    type: { type: String, enum: ['email', 'phone'], required: true },
+    purpose: { type: String, required: true },
+    attempts: { type: Number, default: 0 },
+    verifiedAt: { type: Date, default: null },
+    invalidatedAt: { type: Date, default: null },
+    createdAt: { type: Date, default: Date.now, expires: 600 },  
+  });
+
+  OtpSchema.index({ identifier: 1, purpose: 1 });
+  OtpSchema.index({ target: 1, purpose: 1 }, { sparse: true });
+  // challengeId index created by unique: true
+
+  return db.mongoose.model('Otp', OtpSchema);
+};

package/src/modules/auth/views/components/blocks/OtpDialog.vue

@@ -0,0 +1,168 @@
+<template>
+  <Popup
+    :isPopupOpen="otpState.visible"
+    @close-popup="cancelOtp"
+    class="bg-white w-min-20r w-max-30r w-max-100 radius-medium pd-medium"
+  >
+    <!-- Single mode -->
+    <section v-if="otpState.mode !== 'dual'" class="t-center">
+      <h3 class="mn-b-medium">
+        {{ otpState.challenge?.type === 'email' ? 'Verify Email' : 'Verify Phone' }}
+      </h3>
+
+      <p class="mn-b-big t-transp">
+        {{ otpState.challenge?.type === 'email'
+          ? 'Enter the code sent to your email'
+          : 'Enter the code sent to your phone' }}
+      </p>
+
+      <p class="mn-b-small t-transp">{{ otpState.challenge?.identifier }}</p>
+
+      <div class="pos-relative mn-b-big cursor-text" @click="focusInput(0)">
+        <input
+          ref="inputRefs"
+          v-model="code"
+          type="text"
+          inputmode="numeric"
+          pattern="[0-9]*"
+          maxlength="4"
+          class="pos-absolute inset-0 w-100 h-100 opacity-0 z-1"
+          @input="onInput"
+          @keydown="onKeydown"
+          autocomplete="one-time-code"
+        >
+        <div class="d-flex flex-h-center gap-small">
+          <div
+            v-for="i in 4"
+            :key="i"
+            class="w-[60px] h-[60px] d-flex flex-center text-[28px] fw-medium bg-light radius-small br-1px ease-cubic"
+            :class="code.length === i - 1 ? 'br-main' : 'br-grey'"
+          >
+            {{ code[i - 1] || '' }}
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Dual mode -->
+    <section v-else class="t-center">
+      <h3 class="mn-b-medium">Verify Change</h3>
+
+      <div v-for="(challenge, idx) in otpState.challenges" :key="idx" class="mn-b-big">
+        <p class="mn-b-thin t-transp">
+          {{ challenge.label === 'old' ? 'Current' : 'New' }}
+        </p>
+        <p class="mn-b-small">{{ challenge.identifier }}</p>
+
+        <div class="pos-relative cursor-text" @click="focusDualInput(idx)">
+          <input
+            :ref="el => dualInputRefs[idx] = el"
+            v-model="dualCodes[idx]"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            maxlength="4"
+            class="pos-absolute inset-0 w-100 h-100 opacity-0 z-1"
+            @input="onDualInput(idx)"
+            @keydown="onKeydown"
+            autocomplete="one-time-code"
+          >
+          <div class="d-flex flex-h-center gap-small">
+            <div
+              v-for="i in 4"
+              :key="i"
+              class="w-[48px] h-[48px] d-flex flex-center text-[24px] fw-medium bg-light radius-small br-1px ease-cubic"
+              :class="dualCodes[idx].length === i - 1 ? 'br-main' : 'br-grey'"
+            >
+              {{ dualCodes[idx][i - 1] || '' }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Button
+        @click="submitDual"
+        :disabled="!bothComplete"
+        class="w-100"
+      >
+        Confirm
+      </Button>
+    </section>
+  </Popup>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import Popup from '@martyrs/src/components/Popup/Popup.vue'
+import { Button } from '@ozdao/martyrs'
+
+const props = defineProps({
+  otpState: { type: Object, required: true },
+  closeOtp: { type: Function, required: true },
+  closeDualOtp: { type: Function, required: true },
+  cancelOtp: { type: Function, required: true }
+})
+
+const inputRefs = ref(null)
+const dualInputRefs = ref([null, null])
+const code = ref('')
+const dualCodes = ref(['', ''])
+
+const bothComplete = computed(() =>
+  dualCodes.value[0].length === 4 && dualCodes.value[1].length === 4
+)
+
+watch(() => props.otpState.visible, (visible) => {
+  if (visible) {
+    code.value = ''
+    dualCodes.value = ['', '']
+    setTimeout(() => {
+      if (props.otpState.mode === 'dual') {
+        dualInputRefs.value[0]?.focus()
+      } else {
+        inputRefs.value?.focus()
+      }
+    }, 100)
+  }
+})
+
+function focusInput() {
+  inputRefs.value?.focus()
+}
+
+function focusDualInput(idx) {
+  dualInputRefs.value[idx]?.focus()
+}
+
+function onKeydown(e) {
+  if (!/^\d$/.test(e.key) && !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key) && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault()
+  }
+}
+
+function onInput() {
+  code.value = code.value.replace(/\D/g, '').slice(0, 4)
+
+  if (code.value.length === 4) {
+    props.closeOtp(code.value)
+  }
+}
+
+function onDualInput(idx) {
+  dualCodes.value[idx] = dualCodes.value[idx].replace(/\D/g, '').slice(0, 4)
+
+  // Auto-focus next input when current is complete
+  if (dualCodes.value[idx].length === 4 && idx === 0) {
+    dualInputRefs.value[1]?.focus()
+  }
+
+  // Auto-submit when both are complete
+  if (bothComplete.value) {
+    submitDual()
+  }
+}
+
+function submitDual() {
+  props.closeDualOtp([dualCodes.value[0], dualCodes.value[1]])
+}
+</script>

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

@@ -77,20 +77,24 @@
 					class="cursor-pointer pos-absolute pos-t-regular pos-r-regular i-medium t-transp"
 				/>
 
-				<img loading="lazy" 
-					v-if="users.state.current.profile.photo && users.state.current.profile.photo.length > 0" 
-					:src="(FILE_SERVER_URL || '') + users.state.current.profile.photo" 
-					class="radius-extra bg-white mn-b-small object-fit-cover i-extra" 
-				/>
-				
-				<PlaceholderUserpic 
-					v-else 
-					class="radius-medium mn-b-small i-extra"
-				/>
+				<div class="pos-relative mn-b-small">
+					<img loading="lazy"
+						v-if="users.state.current.profile.photo && users.state.current.profile.photo.length > 0"
+						:src="(FILE_SERVER_URL || '') + users.state.current.profile.photo"
+						class="radius-extra bg-white object-fit-cover i-extra"
+					/>
+					<PlaceholderUserpic
+						v-else
+						class="radius-medium i-extra"
+					/>
+					<OnlineIndicator
+						v-if="users.state.current._id"
+						:userId="users.state.current._id"
+						class="pos-absolute pos-r-0 pos-b-0"
+					/>
+				</div>
 
-				<h3 
-					class="mn-b-thin"
-				>
+				<h3 class="mn-b-thin">
 					{{users.state.current.profile.name ? users.state.current.profile.name : 'Anonymous' }}
 				</h3>
 				
@@ -257,6 +261,7 @@ import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue'
 import IconEdit from '@martyrs/src/modules/icons/navigation/IconEdit.vue'
 
 import PlaceholderUserpic from '@martyrs/src/modules/icons/placeholders/PlaceholderUserpic.vue'
+import OnlineIndicator from '@martyrs/src/modules/core/views/components/elements/OnlineIndicator.vue'
 // Import libs
 import { computed, watch, onMounted, onServerPrefetch, ref, onBeforeMount, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

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

@@ -1,28 +1,132 @@
 <template>
   <div class="for-transition w-100">
-    <ProfileEditCredentials class="bg-white mn-b-thin"/>
+    <!-- Phone and Email -->
+    <div class="bg-white mn-b-thin">
+      <h3 class="mn-b-small">Phone and Email</h3>
 
-    <div class="bg-white mn-b-thin ">
+      <!-- Phone -->
+      <div class="mn-b-semi">
+        <Field
+          v-if="users.state.current.phone && !isEditingPhone"
+          v-model:field="users.state.current.phone"
+          label="Phone"
+          class="mn-b-thin bg-light pd-medium radius-small"
+          disabled
+        />
+        <FieldPhone
+          v-else
+          @change="(val) => newPhone = val"
+          :dropdownOptions="{
+            showDialCodeInSelection: true,
+            showFlags: true,
+            showDialCodeInList: true
+          }"
+          :validCharactersOnly="true"
+          mode="national"
+          :inputOptions="{ placeholder: 'Enter phone number', type: 'tel' }"
+          class="bg-light h-4r pd-small radius-small mn-b-thin"
+        />
+        <Button
+          v-if="users.state.current.phone && !isEditingPhone"
+          :submit="() => isEditingPhone = true"
+          class="mn-b-thin t-black bg-light w-100"
+        >
+          Change Phone
+        </Button>
+        <div v-else-if="!users.state.current.phone" class="flex gap-1">
+          <Button
+            :submit="() => savePhone()"
+            class="mn-b-thin bg-main w-100"
+          >
+            Save Phone
+          </Button>
+        </div>
+        <div v-else class="flex gap-2">
+          <Button
+            :submit="() => savePhone()"
+            class="mn-b-thin bg-main flex-child-1"
+          >
+            Save Phone
+          </Button>
+          <Button
+            :submit="() => { isEditingPhone = false; newPhone = '' }"
+            class="mn-b-thin bg-red t-white flex-child-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="mn-b-semi">
+        <Field
+          v-if="users.state.current.email && !isEditingEmail"
+          v-model:field="users.state.current.email"
+          label="Email"
+          class="mn-b-thin bg-light pd-medium radius-small"
+          disabled
+        />
+        <Field
+          v-else
+          v-model:field="newEmail"
+          label="Email"
+          placeholder="Enter email"
+          class="mn-b-thin bg-light pd-medium radius-small"
+        />
+        <Button
+          v-if="users.state.current.email && !isEditingEmail"
+          :submit="() => isEditingEmail = true"
+          class="mn-b-thin t-black bg-light w-100"
+        >
+          Change Email
+        </Button>
+        <div v-else-if="!users.state.current.email" class="flex gap-1">
+          <Button
+            :submit="() => saveEmail()"
+            class="mn-b-thin bg-main w-100"
+          >
+            Save Email
+          </Button>
+        </div>
+        <div v-else class="flex gap-2">
+          <Button
+            :submit="() => saveEmail()"
+            class="mn-b-thin bg-main flex-child-1"
+          >
+            Save Email
+          </Button>
+          <Button
+            :submit="() => { isEditingEmail = false; newEmail = '' }"
+            class="mn-b-thin bg-red t-white flex-child-1"
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Settings -->
+    <div class="bg-white mn-b-thin">
       <h3 class="mn-b-small">Settings</h3>
       <Checkbox
         :label="'Darkmode'"
         :radio="core.state.theme.mode === 'dark'"
-        @update:radio="event => core.actions.toggleTheme()"
+        @update:radio="() => core.actions.toggleTheme()"
         class="w-100 bg-light t-black pd-medium radius-small"
       />
     </div>
 
-    <Button 
-      :submit="onSubmit" 
-      :callback="redirectTo" 
+    <Button
+      :submit="onSubmit"
+      :callback="redirectTo"
       class="mn-b-thin bg-main w-100"
-    > 
+    >
       Save
     </Button>
 
     <Button
-      :submit="onSubmitDelete" 
-      :callback="() => router.push({name: 'Sign In'})" 
+      :submit="onSubmitDelete"
+      :callback="() => router.push({ name: 'Sign In' })"
       class="mn-b-thin w-100 bg-red t-white"
     >
       Delete Account
@@ -31,42 +135,92 @@
 </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 { 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 { useStore } from '@martyrs/src/modules/core/views/store/core.store.js'
-
-  const store = useStore()
-  const core = store.core
-  const router = useRouter()
-  
-  defineProps({
-    userData: {
-      type: Object,
-      required: true
-    }
-  })
-  
-  async function onSubmit() {
-    await users.actions.update(users.state.current)
+import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
+import Button from '@martyrs/src/components/Button/Button.vue'
+import Field from '@martyrs/src/components/Field/Field.vue'
+import FieldPhone from '@martyrs/src/components/FieldPhone/FieldPhone.vue'
+
+import { ref } from 'vue'
+import { 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 { useStore, 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'
+
+const store = useStore()
+const core = store.core
+const router = useRouter()
+
+const isEditingPhone = ref(false)
+const isEditingEmail = ref(false)
+const newPhone = ref('')
+const newEmail = ref('')
+
+defineProps({
+  userData: {
+    type: Object,
+    required: true
   }
-  
-  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()
+})
+
+async function savePhone() {
+  if (!newPhone.value) return
+
+  try {
+    const result = await withOtp(
+      (data) => $axios.put(`/api/users/${users.state.current._id}/phone`, data),
+      { phone: newPhone.value }
+    )
+
+    if (result.data) {
+      users.state.current.phone = result.data.phone
+    }
+
+    isEditingPhone.value = false
+    newPhone.value = ''
+  } catch (error) {
+    console.log('savePhone catch:', error)
+    setError(error)
   }
-  
-  function redirectTo() {
-    router.back()
+}
+
+async function saveEmail() {
+  if (!newEmail.value) return
+
+  try {
+    const result = await withOtp(
+      (data) => $axios.put(`/api/users/${users.state.current._id}/email`, data),
+      { email: newEmail.value }
+    )
+
+    if (result.data) {
+      users.state.current.email = result.data.email
+    }
+
+    isEditingEmail.value = false
+    newEmail.value = ''
+  } catch (error) {
+    setError(error)
   }
-</script>
+}
+
+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>