HY2XS_flamy/apps/frontend/src/views/admin/change-password/index.vue

<template>
  <div class="app-container">
    <el-card shadow="never" class="change-password-card">
      <template #header>{{ $t("admin.changePasswordTitle") }}</template>

      <el-alert
        :title="$t('admin.forcePasswordChangeNotice')"
        type="warning"
        :closable="false"
        class="mb-3"
      />

      <el-form ref="formRef" :model="form" :rules="rules" label-width="180px">
        <el-form-item :label="$t('admin.oldPassword')" prop="oldPassword">
          <el-input v-model="form.oldPassword" show-password />
        </el-form-item>
        <el-form-item :label="$t('admin.newPassword')" prop="newPassword">
          <el-input v-model="form.newPassword" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saving" @click="submit">{{
            $t("common.confirm")
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { adminChangePasswordApi } from "@/api/admin";
import { useAdminStore } from "@/store/modules/admin";
import {
  ADMIN_PASSWORD_MAX_BYTES,
  ADMIN_PASSWORD_MAX_LENGTH,
  ADMIN_PASSWORD_MIN_LENGTH,
  adminPasswordFormRule,
} from "@/constants/credentials";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const adminStore = useAdminStore();

const formRef = ref<FormInstance>();
const saving = ref(false);
const form = reactive({
  oldPassword: "",
  newPassword: "",
});

// Проверяется ТОЛЬКО длина, и она берётся из общего контракта.
//
// Здесь стояло правило набора символов `[a-zA-Z0-9!@#$%^&*()_+-=]`, которого
// сервер не предъявляет ни при смене пароля, ни при установке. То есть панель
// отказывала оператору в пароле, который сервер принял бы, и сообщала об этом
// фразой «Некорректное значение», не называя ни одного требования.
//
// Границы совпадают с формой входа не случайно: пока они расходились, длинный
// пароль, назначенный здесь, невозможно было ввести там.
//
// Правило — собственное, а не встроенные `min`/`max` Element Plus: те
// делегируются `async-validator`, который считает длину строки в единицах
// UTF-16, тогда как сервер считает code points и вдобавок ограничивает длину в
// БАЙТАХ пределом bcrypt. Пароль из 64 кириллических букв проходил здесь и
// возвращался с сервера системной ошибкой хеширования.
//
// Комментарий записан строчными `//`, а не блоком: скан релизных гейтов
// отбрасывает только их, и объяснение, называющее убранную конструкцию по
// имени, иначе роняет проверку «этой конструкции здесь больше нет».
const passwordRule = adminPasswordFormRule(
  t("credentials.passwordFormat", {
    min: ADMIN_PASSWORD_MIN_LENGTH,
    max: ADMIN_PASSWORD_MAX_LENGTH,
    maxBytes: ADMIN_PASSWORD_MAX_BYTES,
  })
);

const rules: FormRules = {
  oldPassword: [
    {
      required: true,
      message: t("common.required"),
      trigger: ["change", "blur"],
    },
    { ...passwordRule },
  ],
  newPassword: [
    {
      required: true,
      message: t("common.required"),
      trigger: ["change", "blur"],
    },
    { ...passwordRule },
  ],
};

const submit = async () => {
  if (!formRef.value) {
    return;
  }
  const valid = await formRef.value.validate();
  if (!valid) {
    return;
  }
  saving.value = true;
  try {
    await adminChangePasswordApi({
      oldPassword: form.oldPassword,
      newPassword: form.newPassword,
    });
    adminStore.forcePasswordChange = false;
    ElMessage.success(t("admin.changedSuccess"));
    const redirect =
      typeof route.query.redirect === "string" ? route.query.redirect : "/";
    router.push(redirect);
  } finally {
    saving.value = false;
  }
};
</script>

<style scoped lang="scss">
.change-password-card {
  max-width: 760px;
}
</style>