@digiforce-nc/plugin-field-component-mask

Plugin cung cấp field mask — che dấu dữ liệu nhạy cảm khi hiển thị trên giao diện bằng cách thêm Mask x-component vào các field interface cơ bản, kết hợp ACL để kiểm soát ai được xem dữ liệu gốc.

Plugin này làm gì?

Hãy hình dung: bạn có field số điện thoại 0912345678 và muốn hiển thị 0912***678 trên giao diện — nhưng dữ liệu gốc vẫn lưu đầy đủ trong DB. Plugin này không tạo field type mới mà bổ sung Mask x-component vào các field interface có sẵn (input, phone, email, date...), kết hợp ACL để chỉ cho phép user có quyền xem giá trị thật.

Ba khả năng chính

#	Khả năng	Chi tiết
1	Mask hiển thị	Che một phần giá trị (phone, email, CMND...) bằng ký tự `*`
2	Tích hợp ACL	Chỉ user có quyền mới xem được giá trị đầy đủ
3	Không thay đổi data	Dữ liệu gốc lưu nguyên trong DB — mask chỉ ở tầng hiển thị

Kiến trúc

Tổng quan

Plugin này là client-only — không có server logic. Hoạt động bằng cách patch thêm Mask component vào các field interface đã đăng ký, kết hợp dayjs cho format date và ACL cho kiểm tra quyền.

Luồng xử lý mask

Mask áp dụng cho các loại field

Loại field	Ví dụ gốc	Ví dụ sau mask
Phone	`0912345678`	`0912***678`
Email	`nguyen@email.com`	`ngu***@email.com`
CMND/CCCD	`001234567890`	`001***7890`
Date	`15/03/1990`	`//1990`
Text	`Nguyễn Văn A`	`Nguyễn ***`

Components

Component	Chức năng
`Mask`	Component chính — nhận giá trị gốc, áp dụng mask rule, hiển thị kết quả che dấu

Cách hoạt động với field interface có sẵn

Plugin không tạo field interface mới. Thay vào đó, khi load, nó duyệt các field interface đã đăng ký và patch thêm thuộc tính cho phép chọn Mask component trong settings. Admin có thể bật/tắt mask cho từng field cụ thể.

Ví dụ sử dụng

Field phone với mask

typescript

const phoneSchema = {
  type: 'string',
  title: 'Số điện thoại',
  'x-component': 'Mask',
  'x-component-props': {
    maskPattern: '****###***',
  },
};

Kiểm tra quyền xem dữ liệu gốc

typescript

// Trong Mask component, kiểm tra ACL trước khi hiển thị
const canViewOriginal = useACLFieldPermission('phone', 'unmask');
if (canViewOriginal) {
  return <span>0912345678</span>;
}
return <span>0912***678</span>;

Thành phần client

Thành phần	Mô tả
`Mask`	Component che dấu giá trị field

Dependencies

Package	Vai trò
`@digiforce-nc/client`	Client framework — đăng ký component
`@digiforce-nc/plugin-acl`	Kiểm tra quyền xem dữ liệu gốc
`@digiforce-nc/plugin-data-source-manager`	Truy cập metadata field
`dayjs`	Format date trước khi mask