system/components/user/ResetPassword.vue

<template>
  <div class="px-3">
    <div class="field is-horizontal">
      <div class="field-body columns">
        <div class="field column">
          <label class="label">{{ isVietnamese ? 'Tên đăng nhập' : 'Username' }}</label>
          <div class="control">
            <p>{{ props.row?.user__username ? props.row.user__username : props.row.username }}</p>
          </div>
        </div>
        <div class="field column" v-if="props.row?.user__type !== 3">
          <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">{{props.row?.user__fullname ? isVietnamese ? 'Tên tài khoản' : 'Full name': isVietnamese ? 'Họ tên' : 'Full name' }}</label>
          <div class="control">
            <p>{{ props.row?.user__fullname ? props.row.user__fullname : props.row.fullname }}</p>
          </div>
        </div>
        <div class="field column">
          <label class="label">Email</label>
          <div class="control">
            <p>{{ props.row?.user__email ? props.row.user__email : props.row.email }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5 pt-2">
      <button :class="`button is-primary has-text-white ${showModal.loading ? 'is-loading' : ''}`" @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, $snackbar, $isVietnamese, $mode } =
  useNuxtApp();
const emit = defineEmits(['close']);
var props = defineProps({
  row: Object,
});

const showModal = ref({
  show: false,
  loading: false,
});

const isVietnamese = computed(() => $isVietnamese());
let pass = $id().toLocaleLowerCase();

async function handlerResetPassword() {
  showModal.value.loading = true;

  let user = await $getdata(
    'user',
    undefined,
    { filter: { id: props.row?.user__type === 3 ? props.row.user__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;
    if (user.type === 3) {
      let loginUrl = $mode === 'dev' ? 'https://dev.dealer.utopia.com.vn/' : 'https://dealer.utopia.com.vn/';
      await sendEmailAlter(loginUrl, user.fullname, user.username, pass, user.email, user.type);
    } else {
      let loginUrl = $mode === 'dev' ? 'https://dev.biz.utopia.com.vn/' : 'https://biz.utopia.com.vn/';
      await sendEmailAlter(loginUrl, user.fullname, user.username, pass, user.email, user.type);
    }
    showModal.value.loading = false;
    $snackbar(
      'Mật khẩu đã được đặt lại thành công. Thông tin đã được gửi tới địa chỉ email đã đăng ký.',
      'Thành công',
      'Success',
    );
    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?.user__username ? props.row.user__username : props.row.username)?.toUpperCase()} này không?`,
      duration: 10,
    },
    onConfirm: async () => {
      handlerResetPassword();
    },
  };
}

async function sendEmailAlter(loginUrl, fullname, username, password, email, dealer) {
  let content = `
          <table width="100%" bgcolor="#f4f6f8" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" style="padding:30px 15px;">
                <table width="600" cellpadding="0" cellspacing="0" border="0"
                      style="background:#ffffff; font-family:Arial, Helvetica, sans-serif; color:#333333; border-collapse:collapse;">
                  <tr>
                    <td style="padding:30px 25px; font-size:15px; line-height:1.6;">

                      <p style="margin:0 0 15px 0;">
                        Xin chào <strong>${fullname}</strong>,
                      </p>

                      <p style="margin:0 0 15px 0;">
                        Chúng tôi đã đặt lại mật khẩu cho tài khoản của bạn.
                      </p>

                      <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:15px 0;">
                        <tr>
                          <td width="120" style="padding:6px 0;"><strong>Username:</strong></td>
                          <td style="padding:6px 0;">${username}</td>
                        </tr>
                        <tr>
                          <td style="padding:6px 0;"><strong>Password:</strong></td>
                          <td style="padding:6px 0;">${password}</td>
                        </tr>
                      </table>
                      <table cellpadding="0" cellspacing="0" border="0" align="center" style="margin:25px auto;">
                        <tr>
                          <td align="center" bgcolor="#2f6fed" style="border-radius:4px;">
                            <a href="${loginUrl}"
                              target="_blank"
                              style="display:inline-block;
                                      padding:12px 28px;
                                      font-size:15px;
                                      color:#ffffff;
                                      text-decoration:none;
                                      font-weight:bold;">
                              Đăng nhập ngay
                            </a>
                          </td>
                        </tr>
                      </table>
                      <p style="margin:25px 0 0 0;">
                        Trân trọng,<br/>
                        <strong>Đội ngũ Utopia</strong>
                      </p>
                    </td>
                  </tr>
                  <tr>
                    <td align="center"
                        style="padding:20px; font-size:12px; color:#777777; border-top:1px solid #eeeeee;">
                      © ${new Date().getFullYear()} Utopia Villas & Resort. All rights reserved.<br/>
                      Đây là email tự động, vui lòng không phản hồi email này.
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        `;

  let info = {
    subject:
      dealer === 3
        ? `${$mode === 'dev' ? '[DEV] ' : ''}Thông báo đặt lại mật khẩu thành công – Cổng thông tin Đại lý Utopia`
        : `${$mode === 'dev' ? '[DEV] ' : ''}Thông báo đặt lại mật khẩu thành công – Cổng thông tin Chủ đầu tư Utopia`,
    to: email,
    sender: 1,
    content: content,
  };
  await $insertapi('sendemail', info, undefined, false);
}
</script>