Create change password with and without token and add related features

src/components/ui/ChangePasswordForm.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from 'vue';
+import { ref, inject, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -15,6 +15,8 @@ const userStore = useUserStore();
 const { notify } = useNotify();
 const router = useRouter();
 
+const oldPasswordRef = ref(null);
+const newPasswordRef = ref(null);
 const passwordRequirementsDialogRef = ref(null);
 const vnFormRef = ref(null);
 const repeatPassword = ref('');
@@ -35,6 +37,21 @@ const changePassword = async () => {
         notify(t('passwordsDoNotMatch'), 'negative');
         throw new Error('Passwords do not match');
     }
+    if (userStore.token) {
+        await changePasswordWithToken(userStore.token);
+    } else {
+        await changePasswordWithoutToken();
+    }
+};
+
+const changePasswordWithToken = async token => {
+    const headers = {
+        Authorization: token
+    };
+    await api.post('VnUsers/reset-password', formData.value, { headers });
+};
+
+const changePasswordWithoutToken = async () => {
     await api.patch('Accounts/change-password', formData.value);
 };
 
@@ -52,7 +69,15 @@ const logout = async () => {
     router.push({ name: 'Login' });
 };
 
-onMounted(async () => await getPasswordRequirements());
+onMounted(async () => {
+    getPasswordRequirements();
+    await nextTick();
+    if (userStore.token) {
+        newPasswordRef.value.focus();
+    } else {
+        oldPasswordRef.value.focus();
+    }
+});
 </script>
 
 <template>
@@ -68,11 +93,14 @@ onMounted(async () => await getPasswordRequirements());
     >
         <template #form>
             <VnInput
+                v-if="!userStore.token"
+                ref="oldPasswordRef"
                 v-model="formData.oldPassword"
                 :label="t('oldPassword')"
                 type="password"
             />
             <VnInput
+                ref="newPasswordRef"
                 v-model="formData.newPassword"
                 :label="t('newPassword')"
                 type="password"