feat: add user activation control

- Add is_active field to user model
- Create SealCheckbox component with clickable container
- Add activation control to user modal
- Display user status in users table
- Add localization strings for activation features
This commit is contained in:
Hugo Haldi
2025-10-09 10:11:05 +08:00
committed by jialin
parent 8e77e19631
commit 521bf211a2
8 changed files with 158 additions and 20 deletions
@@ -0,0 +1,74 @@
import { Checkbox, Form, type CheckboxProps } from 'antd';
import React from 'react';
import styled from 'styled-components';
import LabelInfo from './components/label-info';
import { SealFormItemProps } from './types';
import Wrapper from './wrapper';
const Inner = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding-inline: 14px;
cursor: pointer;
.ant-checkbox-wrapper {
margin-top: 0 !important;
}
`;
interface SealCheckboxProps extends CheckboxProps, SealFormItemProps {}
const SealCheckbox: React.FC<SealCheckboxProps> = (props) => {
const {
label,
checked,
required,
description,
isInFormItems = true,
defaultChecked,
checkStatus,
...rest
} = props;
let status = '';
if (isInFormItems) {
const statusData = Form?.Item?.useStatus?.();
status = statusData?.status || '';
}
const handleChange = (e: any) => {
props.onChange?.(e);
};
const handleContainerClick = () => {
// Create a synthetic event to toggle the checkbox
const syntheticEvent = {
target: {
checked: !checked
}
};
handleChange(syntheticEvent);
};
return (
<Wrapper
required={required}
status={checkStatus || status}
className="no-focus"
>
<Inner onClick={handleContainerClick}>
<LabelInfo label={label} description={description}></LabelInfo>
<Checkbox
{...rest}
defaultChecked={defaultChecked}
style={{ marginBottom: 0, marginTop: 16, marginInline: 0 }}
checked={checked}
onChange={handleChange}
/>
</Inner>
</Wrapper>
);
};
export default SealCheckbox;