RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix typo

Browse Source
This commit is contained in:
SrGooglo 2025-03-13 23:36:44 +00:00
parent cc963f5f36
commit 64fd80c0aa
1 changed files with 266 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

540
packages/app/src/settings/api/index.jsx
View File

@ -13,322 +13,312 @@ import ServerKeysModel from "@models/api"
import "./index.less" import "./index.less"
const ServerKeyCreator = (props) => { const ServerKeyCreator = (props) => {
const [name, setName] = React.useState("") const [name, setName] = React.useState("")
const [access, setAccess] = React.useState(null) const [access, setAccess] = React.useState(null)
const [result, setResult] = React.useState(null) const [result, setResult] = React.useState(null)
const [error, setError] = React.useState(null) const [error, setError] = React.useState(null)
const canSubmit = () => { const canSubmit = () => {
return name && access return name && access
} }
const onSubmit = async () => { const onSubmit = async () => {
if (!canSubmit()) { if (!canSubmit()) {
return return
} }
const result = await ServerKeysModel.createNewServerKey({ const result = await ServerKeysModel.createNewServerKey({
name, name,
access access,
}) })
if (result) { if (result) {
setResult(result) setResult(result)
} }
} }
const onRegenerate = async () => { const onRegenerate = async () => {
app.layout.modal.confirm({ app.layout.modal.confirm({
headerText: "Regenerate secret token", headerText: "Regenerate secret token",
descriptionText: "When a key is regenerated, the old secret token will be replaced with a new one. This action cannot be undone.", descriptionText:
onConfirm: async () => { "When a key is regenerated, the old secret token will be replaced with a new one. This action cannot be undone.",
await ServerKeysModel.regenerateSecretToken(result.access_id) onConfirm: async () => {
.then((data) => { await ServerKeysModel.regenerateSecretToken(result.access_id)
app.message.info("Secret token regenerated") .then((data) => {
setResult(data) app.message.info("Secret token regenerated")
}) setResult(data)
.catch((error) => { })
app.message.error(error.message) .catch((error) => {
setError(error.message) app.message.error(error.message)
}) setError(error.message)
} })
}) },
} })
}
const onDelete = async () => { const onDelete = async () => {
app.layout.modal.confirm({ app.layout.modal.confirm({
headerText: "Delete server key", headerText: "Delete server key",
descriptionText: "Deleting this server key will remove it from your account. This action cannot be undone.", descriptionText:
onConfirm: async () => { "Deleting this server key will remove it from your account. This action cannot be undone.",
await ServerKeysModel.deleteServerKey(result.access_id) onConfirm: async () => {
.then(() => { await ServerKeysModel.deleteServerKey(result.access_id)
app.message.info("Server key deleted") .then(() => {
props.close() app.message.info("Server key deleted")
}) props.close()
.catch((error) => { })
app.message.error(error.message) .catch((error) => {
setError(error.message) app.message.error(error.message)
}) setError(error.message)
}, })
}) },
} })
}
async function generateAuthJSON() { async function generateAuthJSON() {
const data = { const data = {
name: result.name, name: result.name,
access: result.access, access: result.access,
access_id: result.access_id, access_id: result.access_id,
secret_token: result.secret_token secret_token: result.secret_token,
} }
await textToDownload(JSON.stringify(data), `comtyapi-${result.name}-auth.json`) await textToDownload(
} JSON.stringify(data),
`comtyapi-${result.name}-auth.json`,
)
}
React.useEffect(() => { React.useEffect(() => {
if (props.data) { if (props.data) {
setResult(props.data) setResult(props.data)
} }
}, []) }, [])
if (result) { if (result) {
return <div className="server-key-creator"> return (
<h1>Your server key</h1> <div className="server-key-creator">
<h1>Your server key</h1>
<p>Name: {result.name}</p> <p>Name: {result.name}</p>
<div className="server-key-creator-info"> <div className="server-key-creator-info">
<span>Access ID:</span> <span>Access ID:</span>
<SelectableText>{result.access_id}</SelectableText> <SelectableText>{result.access_id}</SelectableText>
</div> </div>
{ {result.secret_token && (
result.secret_token && <div className="server-key-creator-info"> <div className="server-key-creator-info">
<span>Secret:</span> <span>Secret:</span>
<SelectableText>{result.secret_token}</SelectableText> <SelectableText>{result.secret_token}</SelectableText>
</div> </div>
} )}
{ {result.secret_token && (
result.secret_token && <antd.Alert <antd.Alert
type="warning" type="warning"
message="Save these credentials in a safe place. You can't see them again." message="Save these credentials in a safe place. You can't see them again."
/> />
} )}
{ {result.secret_token && (
result.secret_token && <antd.Button <antd.Button onClick={generateAuthJSON} type="primary">
onClick={generateAuthJSON} Save JSON
type="primary" </antd.Button>
> )}
Save JSON
</antd.Button>
}
{ {!result.secret_token && (
!result.secret_token && <antd.Button <antd.Button type="primary" onClick={() => onRegenerate()}>
type="primary" Regenerate secret
onClick={() => onRegenerate()} </antd.Button>
> )}
Regenerate secret
</antd.Button>
}
<antd.Button <antd.Button danger onClick={() => onDelete()}>
danger Delete
onClick={() => onDelete()} </antd.Button>
>
Delete
</antd.Button>
<antd.Button <antd.Button onClick={() => props.close()}>Ok</antd.Button>
onClick={() => props.close()} </div>
> )
Ok }
</antd.Button>
</div>
}
return <> return (
<h1>Create a server key</h1> <>
<h1>Create a server key</h1>
<antd.Form <antd.Form layout="vertical" onFinish={onSubmit}>
layout="vertical" <antd.Form.Item
onFinish={onSubmit} label="Name"
> name="name"
<antd.Form.Item rules={[
label="Name" {
name="name" required: true,
rules={[ message: "Name is required",
{ },
required: true, ]}
message: "Name is required" >
} <antd.Input onChange={(e) => setName(e.target.value)} />
]} </antd.Form.Item>
>
<antd.Input
onChange={(e) => setName(e.target.value)}
/>
</antd.Form.Item>
<antd.Form.Item <antd.Form.Item
label="Access" label="Access"
name="access" name="access"
rules={[ rules={[
{ {
required: true, required: true,
message: "Access is required" message: "Access is required",
} },
]} ]}
> >
<antd.Select <antd.Select onChange={(e) => setAccess(e)}>
onChange={(e) => setAccess(e)} <antd.Select.Option value="read">
> Read
<antd.Select.Option value="read">Read</antd.Select.Option> </antd.Select.Option>
<antd.Select.Option value="write">Write</antd.Select.Option> <antd.Select.Option value="write">
<antd.Select.Option value="readWrite">Read/Write</antd.Select.Option> Write
</antd.Select> </antd.Select.Option>
</antd.Form.Item> <antd.Select.Option value="readWrite">
Read/Write
</antd.Select.Option>
</antd.Select>
</antd.Form.Item>
<antd.Form.Item> <antd.Form.Item>
<antd.Button <antd.Button
type="primary" type="primary"
htmlType="submit" htmlType="submit"
disabled={!canSubmit()} disabled={!canSubmit()}
> >
Create Create
</antd.Button> </antd.Button>
</antd.Form.Item> </antd.Form.Item>
{error && <antd.Form.Item> {error && (
<antd.Alert <antd.Form.Item>
type="error" <antd.Alert type="error" message={error} />
message={error} </antd.Form.Item>
/> )}
</antd.Form.Item>} </antd.Form>
</>
</antd.Form> )
</>
} }
const ServerKeyItem = (props) => { const ServerKeyItem = (props) => {
const { name, access_id } = props.data const { name, access_id } = props.data
return <div className="server-key-item"> return (
<div clas className="server-key-item-info"> <div className="server-key-item">
<p>{name}</p> <div className="server-key-item-info">
<span>{access_id}</span> <p>{name}</p>
</div> <span>{access_id}</span>
</div>
<div className="server-key-item-actions"> <div className="server-key-item-actions">
<antd.Button <antd.Button
size="small" size="small"
icon={<Icons.TbEdit />} icon={<Icons.TbEdit />}
onClick={() => props.onEdit(props.data)} onClick={() => props.onEdit(props.data)}
/> />
</div> </div>
</div> </div>
)
} }
export default { export default {
id: "api", id: "api",
icon: "TbApi", icon: "TbApi",
label: "API", label: "API",
group: "advanced", group: "advanced",
render: () => { render: () => {
const mainOrigin = useGetMainOrigin() const mainOrigin = useGetMainOrigin()
const [L_Keys, R_Keys, E_Keys, F_Keys] = app.cores.api.useRequest(ServerKeysModel.getMyServerKeys) const [L_Keys, R_Keys, E_Keys, F_Keys] = app.cores.api.useRequest(
ServerKeysModel.getMyServerKeys,
)
async function onClickCreateNewKey() { async function onClickCreateNewKey() {
app.layout.drawer.open("server_key_creator", ServerKeyCreator, { app.layout.drawer.open("server_key_creator", ServerKeyCreator, {
onClose: () => { onClose: () => {
F_Keys() F_Keys()
}, },
confirmOnOutsideClick: true, confirmOnOutsideClick: true,
confirmOnOutsideClickText: "All changes will be lost." confirmOnOutsideClickText: "All changes will be lost.",
}) })
} }
async function onClickEditKey(key) { async function onClickEditKey(key) {
app.layout.drawer.open("server_key_creator", ServerKeyCreator, { app.layout.drawer.open("server_key_creator", ServerKeyCreator, {
props: { props: {
data: key, data: key,
}, },
onClose: () => { onClose: () => {
F_Keys() F_Keys()
} },
}) })
} }
return <div className="developer-settings"> return (
<div className="card"> <div className="developer-settings">
<h3> <div className="card">
Main Origin <h3>Main Origin</h3>
</h3> <p>{mainOrigin}</p>
<p> </div>
{mainOrigin}
</p>
</div>
<div className="card api_keys"> <div className="card api_keys">
<div className="api_keys_header"> <div className="api_keys_header">
<div className="api_keys_header_title"> <div className="api_keys_header_title">
<h3>Your Keys</h3> <h3>Your Keys</h3>
<p>Manage your API keys</p> <p>Manage your API keys</p>
</div> </div>
<antd.Button <antd.Button
type="primary" type="primary"
onClick={onClickCreateNewKey} onClick={onClickCreateNewKey}
> >
Create new Create new
</antd.Button> </antd.Button>
</div> </div>
<div className="api_keys_list"> <div className="api_keys_list">
{ {L_Keys && <antd.Skeleton active />}
L_Keys && <antd.Skeleton active />
}
{ {E_Keys && (
E_Keys && <antd.Result <antd.Result
status="warning" status="warning"
title="Failed to retrieve keys" title="Failed to retrieve keys"
subTitle={E_Keys.message} subTitle={E_Keys.message}
/> />
} )}
{ {!E_Keys && !L_Keys && (
!E_Keys && !L_Keys && <> <>
{ {R_Keys.map((data, index) => {
R_Keys.map((data, index) => { return (
return <ServerKeyItem <ServerKeyItem
key={index} key={index}
data={data} data={data}
onEdit={onClickEditKey} onEdit={onClickEditKey}
/> />
}) )
} })}
{ {R_Keys.length === 0 && <antd.Empty />}
R_Keys.length === 0 && <antd.Empty /> </>
} )}
</> </div>
} </div>
</div> <div className="card">
</div> <h3>Documentations</h3>
<div className="card"> <div className="links">
<h3>Documentations</h3> <a>Comty CLI</a>
<a>Comty.JS for NodeJS</a>
<div className="links"> <a>Comty Extensions SDK</a>
<a>Comty CLI</a> <a>Spectrum API</a>
<a>Comty.JS for NodeJS</a> </div>
<a>Comty Extensions SDK</a> </div>
<a>Spectrum API</a> </div>
</div> )
</div> },
</div>
}
} }