Skip to content

phsl / new-api

Go to a project
Commit ec567f8c by CaIon
Options

rollback EditUser.js

parent 3eb7843b
Showing with 104 additions and 123 deletions
web/src/pages/User/EditUser.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Button, Form, Header, Segment } from 'semantic-ui-react'; import { Button, Form, Header, Segment } from 'semantic-ui-react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import {API, isMobile, showError, showSuccess} from '../../helpers'; import { API, showError, showSuccess } from '../../helpers';
import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render'; import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
import Title from "@douyinfe/semi-ui/lib/es/typography/title";
import {SideSheet, Space} from "@douyinfe/semi-ui";
const EditUser = (props) => { const EditUser = () => {
const params = useParams(); const params = useParams();
const userId = params.id; const userId = params.id;
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
...@@ -22,7 +20,7 @@ const EditUser = (props) => { ...@@ -22,7 +20,7 @@ const EditUser = (props) => {
}); });
const [groupOptions, setGroupOptions] = useState([]); const [groupOptions, setGroupOptions] = useState([]);
const { username, display_name, password, github_id, wechat_id, email, quota, group } = const { username, display_name, password, github_id, wechat_id, email, quota, group } =
inputs; inputs;
const handleInputChange = (e, { name, value }) => { const handleInputChange = (e, { name, value }) => {
setInputs((inputs) => ({ ...inputs, [name]: value })); setInputs((inputs) => ({ ...inputs, [name]: value }));
}; };
...@@ -85,124 +83,107 @@ const EditUser = (props) => { ...@@ -85,124 +83,107 @@ const EditUser = (props) => {
}; };
return ( return (
<> <>
<SideSheet <Segment loading={loading}>
placement={'left'} <Header as='h3'>更新用户信息</Header>
title={<Title level={3}>更新用户信息</Title>} <Form autoComplete='new-password'>
headerStyle={{borderBottom: '1px solid var(--semi-color-border)'}} <Form.Field>
bodyStyle={{borderBottom: '1px solid var(--semi-color-border)'}} <Form.Input
visible={props.visiable} label='用户名'
footer={ name='username'
<div style={{display: 'flex', justifyContent: 'flex-end'}}> placeholder={'请输入新的用户名'}
<Space> onChange={handleInputChange}
<Button theme='solid' size={'large'} onClick={submit}>提交</Button> value={username}
<Button theme='solid' size={'large'} type={'tertiary'} onClick={handleCancel}>取消</Button> autoComplete='new-password'
</Space> />
</div> </Form.Field>
} <Form.Field>
closeIcon={null} <Form.Input
onCancel={() => handleCancel()} label='密码'
width={isMobile() ? '100%' : 600} name='password'
> type={'password'}
<Form autoComplete='new-password'> placeholder={'请输入新的密码，最短 8 位'}
<Form.Field> onChange={handleInputChange}
<Form.Input value={password}
label='用户名' autoComplete='new-password'
name='username' />
placeholder={'请输入新的用户名'} </Form.Field>
onChange={handleInputChange} <Form.Field>
value={username} <Form.Input
autoComplete='new-password' label='显示名称'
/> name='display_name'
</Form.Field> placeholder={'请输入新的显示名称'}
<Form.Field> onChange={handleInputChange}
<Form.Input value={display_name}
label='密码' autoComplete='new-password'
name='password' />
type={'password'} </Form.Field>
placeholder={'请输入新的密码，最短 8 位'} {
onChange={handleInputChange} userId && <>
value={password} <Form.Field>
autoComplete='new-password' <Form.Dropdown
/> label='分组'
</Form.Field> placeholder={'请选择分组'}
<Form.Field> name='group'
<Form.Input fluid
label='显示名称' search
name='display_name' selection
placeholder={'请输入新的显示名称'} allowAdditions
onChange={handleInputChange} additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'}
value={display_name} onChange={handleInputChange}
autoComplete='new-password' value={inputs.group}
/> autoComplete='new-password'
</Form.Field> options={groupOptions}
{ />
userId && <> </Form.Field>
<Form.Field> <Form.Field>
<Form.Dropdown <Form.Input
label='分组' label={`剩余额度${renderQuotaWithPrompt(quota)}`}
placeholder={'请选择分组'} name='quota'
name='group' placeholder={'请输入新的剩余额度'}
fluid onChange={handleInputChange}
search value={quota}
selection type={'number'}
allowAdditions autoComplete='new-password'
additionLabel={'请在系统设置页面编辑分组倍率以添加新的分组：'} />
onChange={handleInputChange} </Form.Field>
value={inputs.group} </>
autoComplete='new-password' }
options={groupOptions} <Form.Field>
/> <Form.Input
</Form.Field> label='已绑定的 GitHub 账户'
<Form.Field> name='github_id'
<Form.Input value={github_id}
label={`剩余额度${renderQuotaWithPrompt(quota)}`} autoComplete='new-password'
name='quota' placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
placeholder={'请输入新的剩余额度'} readOnly
onChange={handleInputChange} />
value={quota} </Form.Field>
type={'number'} <Form.Field>
autoComplete='new-password' <Form.Input
/> label='已绑定的微信账户'
</Form.Field> name='wechat_id'
</> value={wechat_id}
} autoComplete='new-password'
<Form.Field> placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
<Form.Input readOnly
label='已绑定的 GitHub 账户' />
name='github_id' </Form.Field>
value={github_id} <Form.Field>
autoComplete='new-password' <Form.Input
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' label='已绑定的邮箱账户'
readOnly name='email'
/> value={email}
</Form.Field> autoComplete='new-password'
<Form.Field> placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
<Form.Input readOnly
label='已绑定的微信账户' />
name='wechat_id' </Form.Field>
value={wechat_id} <Button onClick={handleCancel}>取消</Button>
autoComplete='new-password' <Button positive onClick={submit}>提交</Button>
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改' </Form>
readOnly </Segment>
/> </>
</Form.Field>
<Form.Field>
<Form.Input
label='已绑定的邮箱账户'
name='email'
value={email}
autoComplete='new-password'
placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
readOnly
/>
</Form.Field>
<Button onClick={handleCancel}>取消</Button>
<Button positive onClick={submit}>提交</Button>
</Form>
</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