|
|
|
@ -1,8 +1,9 @@ |
|
|
|
import React, { useState } from "react"; |
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
import { X } from "@phosphor-icons/react"; |
|
|
|
import Admin from "@/models/admin"; |
|
|
|
import { userFromStorage } from "@/utils/request"; |
|
|
|
import { MessageLimitInput, RoleHintDisplay } from ".."; |
|
|
|
import { Select } from "antd"; |
|
|
|
|
|
|
|
export default function NewUserModal({ closeModal }) { |
|
|
|
const [error, setError] = useState(null); |
|
|
|
@ -11,6 +12,7 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
enabled: false, |
|
|
|
limit: 10, |
|
|
|
}); |
|
|
|
const [depId, setDepId] = useState([]); |
|
|
|
|
|
|
|
const handleCreate = async (e) => { |
|
|
|
setError(null); |
|
|
|
@ -19,13 +21,36 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
const form = new FormData(e.target); |
|
|
|
for (var [key, value] of form.entries()) data[key] = value; |
|
|
|
data.dailyMessageLimit = messageLimit.enabled ? messageLimit.limit : null; |
|
|
|
|
|
|
|
const { user, error } = await Admin.newUser(data); |
|
|
|
if (!!user) window.location.reload(); |
|
|
|
console.log('用户', data); |
|
|
|
const { user, error } = await Admin.newUserTo(data,depId); |
|
|
|
// console.log('获取',user); |
|
|
|
console.log('获取',depId); |
|
|
|
// if (!!user) window.location.reload(); |
|
|
|
setError(error); |
|
|
|
}; |
|
|
|
|
|
|
|
const user = userFromStorage(); |
|
|
|
const [departments, setDepartments] = useState([]); |
|
|
|
const [treeData, setTreeData] = useState([]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
async function fetchDepartments() { |
|
|
|
const _departments = await Admin.depts(); |
|
|
|
const list = _departments.map(item=>({ |
|
|
|
value:item.deptId, |
|
|
|
label:item.deptName |
|
|
|
})) |
|
|
|
console.log(222222, list); |
|
|
|
setDepartments(list); |
|
|
|
} |
|
|
|
fetchDepartments(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
const handleChange = (value) => { |
|
|
|
console.log(value); |
|
|
|
setDepId(value) |
|
|
|
}; |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center"> |
|
|
|
@ -33,7 +58,7 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
<div className="relative p-6 border-b rounded-t border-theme-modal-border"> |
|
|
|
<div className="w-full flex gap-x-2 items-center"> |
|
|
|
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap"> |
|
|
|
Add user to instance |
|
|
|
添加用户 |
|
|
|
</h3> |
|
|
|
</div> |
|
|
|
<button |
|
|
|
@ -52,27 +77,27 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
htmlFor="username" |
|
|
|
className="block mb-2 text-sm font-medium text-white" |
|
|
|
> |
|
|
|
Username |
|
|
|
用户名 |
|
|
|
</label> |
|
|
|
<input |
|
|
|
name="username" |
|
|
|
type="text" |
|
|
|
className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" |
|
|
|
placeholder="User's username" |
|
|
|
placeholder="请输入用户名" |
|
|
|
minLength={2} |
|
|
|
required={true} |
|
|
|
autoComplete="off" |
|
|
|
pattern="^[a-z0-9_-]+$" |
|
|
|
onInvalid={(e) => |
|
|
|
e.target.setCustomValidity( |
|
|
|
"Username must only contain lowercase letters, numbers, underscores, and hyphens with no spaces" |
|
|
|
"用户名只能包含小写字母、数字、“_”和“-”，不能有空格" |
|
|
|
) |
|
|
|
} |
|
|
|
onChange={(e) => e.target.setCustomValidity("")} |
|
|
|
/> |
|
|
|
<p className="mt-2 text-xs text-white/60"> |
|
|
|
Username must only contain lowercase letters, numbers, |
|
|
|
underscores, and hyphens with no spaces |
|
|
|
用户名只能包含小写字母、数字、 |
|
|
|
下划线和连字符，不带空格 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
@ -80,27 +105,50 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
htmlFor="password" |
|
|
|
className="block mb-2 text-sm font-medium text-white" |
|
|
|
> |
|
|
|
Password |
|
|
|
密码 |
|
|
|
</label> |
|
|
|
<input |
|
|
|
name="password" |
|
|
|
type="text" |
|
|
|
className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" |
|
|
|
placeholder="User's initial password" |
|
|
|
placeholder="请输入密码" |
|
|
|
required={true} |
|
|
|
autoComplete="off" |
|
|
|
minLength={8} |
|
|
|
/> |
|
|
|
<p className="mt-2 text-xs text-white/60"> |
|
|
|
Password must be at least 8 characters long |
|
|
|
密码长度至少为8个字符 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<label |
|
|
|
htmlFor="deptId" |
|
|
|
className="block mb-2 text-sm font-medium text-white" |
|
|
|
> |
|
|
|
部门 |
|
|
|
</label> |
|
|
|
<Select |
|
|
|
className="w-[100%] h-[42px]" |
|
|
|
showSearch |
|
|
|
placeholder="请选择部门" |
|
|
|
onChange={handleChange} |
|
|
|
filterOption={(input, option) => |
|
|
|
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) |
|
|
|
} |
|
|
|
options={departments} |
|
|
|
/> |
|
|
|
<p className="mt-2 text-xs text-white/60"> |
|
|
|
请选择部门 |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<label |
|
|
|
htmlFor="role" |
|
|
|
className="block mb-2 text-sm font-medium text-white" |
|
|
|
> |
|
|
|
Role |
|
|
|
角色 |
|
|
|
</label> |
|
|
|
<select |
|
|
|
name="role" |
|
|
|
@ -117,6 +165,7 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
</select> |
|
|
|
<RoleHintDisplay role={role} /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<MessageLimitInput |
|
|
|
role={role} |
|
|
|
enabled={messageLimit.enabled} |
|
|
|
@ -125,8 +174,8 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
/> |
|
|
|
{error && <p className="text-red-400 text-sm">Error: {error}</p>} |
|
|
|
<p className="text-white text-xs md:text-sm"> |
|
|
|
After creating a user they will need to login with their initial |
|
|
|
login to get access. |
|
|
|
创建用户后，他们将需要登录他们的首字母 |
|
|
|
登录获取访问权限. |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border"> |
|
|
|
@ -135,13 +184,13 @@ export default function NewUserModal({ closeModal }) { |
|
|
|
type="button" |
|
|
|
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm" |
|
|
|
> |
|
|
|
Cancel |
|
|
|
取消 |
|
|
|
</button> |
|
|
|
<button |
|
|
|
type="submit" |
|
|
|
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm" |
|
|
|
> |
|
|
|
Add user |
|
|
|
添加用户 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
|
談蓝色
10 months ago