Skip to content

phsl / new-api

Go to a project
Commit 39fc3866 by t0ng7u
Options

💄refactor: enhance `EditUser` and `AddUser` form validation & UX 

Changes in `web/src/pages/User/EditUser.js`:
• Added `rules` to
  – `Form.Select group`: now required with error “Please select group”.
  – `Form.InputNumber quota`: now required with error “Please enter quota”.
• Added `step={500000}` to quota `InputNumber` for quicker numeric input.
• Replaced invalid `readonly` with React-correct `readOnly`, and added descriptive placeholders for all binding-info fields (GitHub/OIDC/WeChat/Email/Telegram).
• Removed unused `downloadTextAsFile` import.

These updates tighten form validation, improve data entry ergonomics, and restore clear read-only indicators for third-party bindings.
parent 0cad369f
Showing with 74 additions and 91 deletions
web/src/components/settings/PersonalSetting.js
......@@ -967,7 +967,7 @@ const PersonalSetting = () => {
{systemToken && (
<div className="mt-3">
<Input
readOnly
readonly
value={systemToken}
onClick={handleSystemTokenClick}
size="large"
......
web/src/i18n/locales/en.json
......@@ -471,10 +471,11 @@
"请输入新的密码": "Please enter a new password",
"显示名称": "Display Name",
"请输入新的显示名称": "Please enter a new display name",
"已绑定的 GitHub 账户": "GitHub Account Bound",
"此项只读，要用户通过个人设置页面的相关绑��按钮进��绑���，不可直接修改": "This item is read-only. Users need to bind through the relevant binding button on the personal settings page, and cannot be modified directly",
"已绑定的微信账户": "WeChat Account Bound",
"已绑定的邮箱账户": "Email Account Bound",
"已绑定的 GITHUB 账户": "Bound GitHub Account",
"已绑定的 WECHAT 账户": "Bound WeChat Account",
"已绑定的 EMAIL 账户": "Bound Email Account",
"已绑定的 TELEGRAM 账户": "Bound Telegram Account",
"此项只读，要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改": "This item is read-only. Users need to bind through the relevant binding button on the personal settings page, and cannot be modified directly",
"用户信息更新成功！": "User information updated successfully!",
"使用明细（总消耗额度：{renderQuota(stat.quota)}）": "Usage Details (Total Consumption Quota: {renderQuota(stat.quota)})",
"用户名称": "User Name",
......
web/src/pages/Home/index.js
......@@ -130,7 +130,7 @@ const Home = () => {
{/* BASE URL 与端点选择 */}
<div className="flex flex-col md:flex-row items-center justify-center gap-4 w-full mt-4 md:mt-6 max-w-md">
<Input
readOnly
readonly
value={serverAddress}
className="flex-1 !rounded-full"
size={isMobile() ? 'default' : 'large'}
......
web/src/pages/TopUp/index.js
......@@ -931,7 +931,7 @@ const TopUp = () => {
<Title heading={6}>{t('邀请链接')}</Title>
<Input
value={affLink}
readOnly
readonly
size='large'
suffix={
<Button
......
web/src/pages/User/AddUser.js
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import {
Button,
Input,
SideSheet,
Space,
Spin,
Typography,
Card,
Tag,
Avatar
Avatar,
Form,
Row,
Col,
} from '@douyinfe/semi-ui';
import {
IconSave,
......@@ -22,32 +24,23 @@ const { Text, Title } = Typography;
const AddUser = (props) => {
const { t } = useTranslation();
const originInputs = {
const formApiRef = useRef(null);
const [loading, setLoading] = useState(false);
const getInitValues = () => ({
username: '',
display_name: '',
password: '',
remark: '',
};
const [inputs, setInputs] = useState(originInputs);
const [loading, setLoading] = useState(false);
const { username, display_name, password, remark } = inputs;
});
const handleInputChange = (name, value) => {
setInputs((inputs) => ({ ...inputs, [name]: value }));
};
const submit = async () => {
const submit = async (values) => {
setLoading(true);
if (inputs.username === '' || inputs.password === '') {
setLoading(false);
showError(t('用户名和密码不能为空！'));
return;
}
const res = await API.post(`/api/user/`, inputs);
const res = await API.post(`/api/user/`, values);
const { success, message } = res.data;
if (success) {
showSuccess(t('用户账户创建成功！'));
setInputs(originInputs);
formApiRef.current?.setValues(getInitValues());
props.refresh();
props.handleClose();
} else {
......@@ -85,7 +78,7 @@ const AddUser = (props) => {
<Button
theme="solid"
className="!rounded-full"
onClick={submit}
onClick={() => formApiRef.current?.submitForm()}
icon={<IconSave />}
loading={loading}
>
......@@ -107,71 +100,60 @@ const AddUser = (props) => {
onCancel={() => handleCancel()}
>
<Spin spinning={loading}>
<div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-2">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<IconUserAdd size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('用户信息')}</Text>
<div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
<Form
initValues={getInitValues()}
getFormApi={(api) => formApiRef.current = api}
onSubmit={submit}
onSubmitFail={(errs) => {
const first = Object.values(errs)[0];
if (first) showError(Array.isArray(first) ? first[0] : first);
formApiRef.current?.scrollToError();
}}
>
<div className="p-6 space-y-6">
<Card className="!rounded-2xl shadow-sm border-0">
<div className="flex items-center mb-2">
<Avatar size="small" color="blue" className="mr-2 shadow-md">
<IconUserAdd size={16} />
</Avatar>
<div>
<Text className="text-lg font-medium">{t('用户信息')}</Text>
<div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
</div>
</div>
</div>
<div className="space-y-4">
<div>
<Text strong className="block mb-2">{t('用户名')}</Text>
<Input
placeholder={t('请输入用户名')}
onChange={(value) => handleInputChange('username', value)}
value={username}
autoComplete="off"
className="!rounded-lg"
showClear
required
/>
</div>
<div>
<Text strong className="block mb-2">{t('显示名称')}</Text>
<Input
placeholder={t('请输入显示名称')}
onChange={(value) => handleInputChange('display_name', value)}
value={display_name}
autoComplete="off"
className="!rounded-lg"
showClear
/>
</div>
<div>
<Text strong className="block mb-2">{t('密码')}</Text>
<Input
type="password"
placeholder={t('请输入密码')}
onChange={(value) => handleInputChange('password', value)}
value={password}
autoComplete="off"
className="!rounded-lg"
required
/>
</div>
<div>
<Text strong className="block mb-2">{t('备注')}</Text>
<Input
placeholder={t('请输入备注（仅管理员可见）')}
onChange={(value) => handleInputChange('remark', value)}
value={remark}
autoComplete="off"
className="!rounded-lg"
showClear
/>
</div>
</div>
</Card>
</div>
<Row gutter={12}>
<Col span={24}>
<Form.Input
field='username'
label={t('用户名')}
placeholder={t('请输入用户名')}
rules={[{ required: true, message: t('请输入用户名') }]} />
</Col>
<Col span={24}>
<Form.Input
field='display_name'
label={t('显示名称')}
placeholder={t('请输入显示名称')} />
</Col>
<Col span={24}>
<Form.Input
field='password'
label={t('密码')}
type='password'
placeholder={t('请输入密码')}
rules={[{ required: true, message: t('请输入密码') }]} />
</Col>
<Col span={24}>
<Form.Input
field='remark'
label={t('备注')}
placeholder={t('请输入备注（仅管理员可见）')} />
</Col>
</Row>
</Card>
</div>
</Form>
</Spin>
</SideSheet>
</>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment