Hugging Face's logo

Spaces:
davidak47
/
new-api-20250407
Sleeping

App Files Community
new-api-20250407
File size: 3,432 Bytes
a3284c8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
import React, { useState } from 'react';
import { API, isMobile, showError, showSuccess } from '../../helpers';
import Title from '@douyinfe/semi-ui/lib/es/typography/title';
import { Button, Input, SideSheet, Space, Spin } from '@douyinfe/semi-ui';

const AddUser = (props) => {
  const originInputs = {
    username: '',
    display_name: '',
    password: '',
  };
  const [inputs, setInputs] = useState(originInputs);
  const [loading, setLoading] = useState(false);
  const { username, display_name, password } = inputs;

  const handleInputChange = (name, value) => {
    setInputs((inputs) => ({ ...inputs, [name]: value }));
  };

  const submit = async () => {
    setLoading(true);
    if (inputs.username === '' || inputs.password === '') {
      setLoading(false);
      showError('用户名和密码不能为空！');
      return;
    }
    const res = await API.post(`/api/user/`, inputs);
    const { success, message } = res.data;
    if (success) {
      showSuccess('用户账户创建成功！');
      setInputs(originInputs);
      props.refresh();
      props.handleClose();
    } else {
      showError(message);
    }
    setLoading(false);
  };

  const handleCancel = () => {
    props.handleClose();
  };

  return (
    <>

      <SideSheet

        placement={'left'}

        title={<Title level={3}>{'添加用户'}</Title>}

        headerStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}

        bodyStyle={{ borderBottom: '1px solid var(--semi-color-border)' }}

        visible={props.visible}

        footer={

          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>

            <Space>

              <Button theme='solid' size={'large'} onClick={submit}>

                提交

              </Button>

              <Button

                theme='solid'

                size={'large'}

                type={'tertiary'}

                onClick={handleCancel}

              >

                取消

              </Button>

            </Space>

          </div>

        }

        closeIcon={null}

        onCancel={() => handleCancel()}

        width={isMobile() ? '100%' : 600}

      >

        <Spin spinning={loading}>

          <Input

            style={{ marginTop: 20 }}

            label='用户名'

            name='username'

            addonBefore={'用户名'}

            placeholder={'请输入用户名'}

            onChange={(value) => handleInputChange('username', value)}

            value={username}

            autoComplete='off'

          />

          <Input

            style={{ marginTop: 20 }}

            addonBefore={'显示名'}

            label='显示名称'

            name='display_name'

            autoComplete='off'

            placeholder={'请输入显示名称'}

            onChange={(value) => handleInputChange('display_name', value)}

            value={display_name}

          />

          <Input

            style={{ marginTop: 20 }}

            label='密 码'

            name='password'

            type={'password'}

            addonBefore={'密码'}

            placeholder={'请输入密码'}

            onChange={(value) => handleInputChange('password', value)}

            value={password}

            autoComplete='off'

          />

        </Spin>

      </SideSheet>

    </>
  );
};

export default AddUser;