Changes create ResetPassword

components/menu/MenuResetPassword.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="mx-2">
+    <a class="ml-5" @click="resetPassword">
+      <SvgIcon v-bind="{ name: 'padlock.png', type: 'gray', size: 20 }"></SvgIcon>
+    </a>
+  </div>
+</template>
+<script setup>
+const { $store } = useNuxtApp();
+
+const emit = defineEmits(["clickevent"]);
+var props = defineProps({
+  appid: Number,
+  row: Object,
+});
+
+function resetPassword() {
+  emit("clickevent", {
+    name: "dataevent",
+    data: {
+      modal: {
+        title: $store.lang === "en" ? "Reset password" : "Đặt lại mật khẩu",
+        height: "300px",
+        width: "800px",
+        component: "user/ResetPassword",
+        vbind: { row: props.row },
+      },
+    },
+  });
+}
+</script>

components/user/ResetPassword.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="px-3">
+    <div class="field is-horizontal">
+      <div class="field-body columns">
+        <div class="field column">
+          <label class="label">Username</label>
+          <div class="control">
+            <p>{{ props.row.username }}</p>
+          </div>
+        </div>
+        <div class="field column">
+          <label class="label">{{ isVietnamese ? "Loại tài khoản" : "Account type" }}</label>
+          <div class="control">
+            <p>{{ isVietnamese ? props.row.type__name : props.row.type__en }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="field is-horizontal mt-4">
+      <div class="field-body columns">
+        <div class="field column">
+          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}</label>
+          <div class="control">
+            <p>{{ props.row.fullname }}</p>
+          </div>
+        </div>
+        <div class="field column">
+          <label class="label">Email</label>
+          <div class="control">
+            <p>{{ props.row.email }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-5 pt-2">
+      <button :class="`button is-primary has-text-white `" @click="showConfirm">
+        {{ isVietnamese ? "Đặt lại mật khẩu" : "Reset password" }}
+      </button>
+    </div>
+    <Modal v-bind="showModal" v-if="showModal.show" @close="showModal.show = false"> </Modal>
+  </div>
+</template>
+<script setup>
+const { $store, $id, $insertapi, $getdata, $getpath, $updateapi, $dialog } = useNuxtApp();
+const emit = defineEmits(["close"]);
+var props = defineProps({
+  row: Object,
+});
+
+const showModal = ref({
+  show: false,
+});
+
+const isVietnamese = computed(() => $store.lang.toLowerCase() === "vi");
+let pass = $id().toLocaleLowerCase();
+
+async function handlerResetPassword() {
+  let user = await $getdata("user", undefined, { filter: { id: props.row.id } }, true);
+  const response = await fetch(`${$getpath()}password/${pass}/`);
+  let hash = await response.json();
+  user.password = hash;
+  let rs1 = await $updateapi("user", user, null, false);
+  if (rs1 === "error") {
+    $dialog("Có lỗi xảy ra. Hãy thử lại một lần nữa", "Lỗi", "Error");
+  } else {
+    showModal.value.show = false;
+    let content = `<p>Xin chào ${props.row.fullname}, </p>`;
+    content += "<p>Mật khẩu tài khoản của bạn trên hệ thống đã được đặt lại thành công.</p>";
+    content += "<p>Tài khoản đăng nhập của bạn:</p>";
+    content += `<p>Username: ${props.row.username}</p>`;
+    content += `<p>Password: ${pass}</p>`;
+    content += `<p>Đội ngũ Utopia.</p>`;
+    let info = {
+      subject: "Thông báo đặt lại mật khẩu tài khoản đăng nhập Utopia",
+      to: props.row.email,
+      sender: 1,
+      content: content,
+    };
+    let rs = await $insertapi("sendemail", info, null, false);
+    emit("close");
+  }
+}
+
+function showConfirm() {
+  showModal.value = {
+    show: true,
+    title: !isVietnamese ? "Confirm password reset" : "Xác nhận đặt lại mật khẩu",
+    height: "300px",
+    width: "800px",
+    component: "dialog/Confirm",
+    vbind: {
+      content: `Bạn có muốn đặt lại mật khẩu cho tài khoản ${props.row.username?.toUpperCase()} này không?`,
+      duration: 10,
+    },
+    onConfirm: async () => {
+      handlerResetPassword();
+    },
+  };
+}
+</script>

plugins/04-components.js

@@ -29,10 +29,11 @@ import Configuration from '~/components/maintab/Configuration.vue'
 import MenuGroupCheck from '~/components/menu/MenuGroupCheck.vue'
 import DataDeletion from '~/components/maintab/DataDeletion.vue'
 import MenuViewCheck from '~/components/menu/MenuViewCheck.vue'
+import MenuResetPassword from '~/components/menu/MenuResetPassword.vue'
 
 const components = {Notebox, MenuAction, Datepicker, PickDay, ImageGallery, FileGallery, FileUpload, ChipImage, Avatarbox, 
 DataTable, Imagebox, Editor, InputPhone, InputEmail, InputNumber, DataView, FormatNumber, SvgIcon, MenuAdd, Configuration,
-MenuCheck, MenuCollab, MenuPhone, FormatDate, MenuUser, MenuCV, MenuStaff, MenuGroupCheck, DataDeletion, MenuViewCheck}
+MenuCheck, MenuCollab, MenuPhone, FormatDate, MenuUser, MenuCV, MenuStaff, MenuGroupCheck, DataDeletion, MenuViewCheck, MenuResetPassword}
 
 export default defineNuxtPlugin((nuxtApp) => {
   Object.entries(components).forEach(([name, component]) => {