Skip to content

Commit 387f47d

Browse files
lazhenyilazhenyi
committed
feat(src/app/(default)/u/setting/ssh/page.tsx): Add SSH key management feature
1 parent 032216d commit 387f47d

File tree

1 file changed

+270
-2
lines changed

1 file changed

+270
-2
lines changed

‎src/app/(default)/u/setting/ssh/page.tsx

+270-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,274 @@
1+
'use client'
2+
3+
import {SSHKeyCreateParma, SSHKeyModel} from "@/server/types";
4+
import {useEffect, useState} from "react";
5+
import {UserApi} from "@/server/UserApi";
6+
import {AppWrite} from "@/server/Client";
7+
import {notifications} from "@mantine/notifications";
8+
import {Button, Divider, Input, InputLabel, Textarea} from "@mantine/core";
9+
110
export default function SettingSSh() {
11+
const api = new UserApi();
12+
const [SshList, setSShList] = useState<SSHKeyModel[]>([]);
13+
const [Edit, setEdit] = useState(true);
14+
const [Param, setParam] = useState<SSHKeyCreateParma>({
15+
name: "",
16+
description: "",
17+
public_key: "",
18+
})
19+
const Fetch = async () => {
20+
try {
21+
const response = await api.SSHList();
22+
if (response.status === 200 && response.data) {
23+
const json: AppWrite<SSHKeyModel[]> = JSON.parse(response.data);
24+
if (json.code === 200 && json.data) {
25+
setSShList(json.data);
26+
}
27+
}else {
28+
notifications
29+
.show({
30+
title: 'Error',
31+
message: "NetWork Error"
32+
});
33+
}
34+
}catch (e) {
35+
notifications
36+
.show({
37+
title: 'Error',
38+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
39+
// @ts-expect-error
40+
message: e.toString()
41+
});
42+
}
43+
}
44+
const Submit = async () => {
45+
if (Param.name === "" || Param.public_key === "" || Param.name.length < 3) {
46+
notifications
47+
.show({
48+
title: 'Error',
49+
message: "Please fill in all fields"
50+
});
51+
return;
52+
}
53+
try {
54+
const response = await api.SSHCreate(Param);
55+
if (response.status === 200 && response.data) {
56+
const json: AppWrite<string> = JSON.parse(response.data);
57+
if (json.code === 200 ) {
58+
notifications
59+
.show({
60+
title: 'Success',
61+
message: "Add SSH Key Success"
62+
});
63+
setEdit(false);
64+
Fetch().then().catch();
65+
}else{
66+
notifications
67+
.show({
68+
title: 'Error',
69+
message: json.msg
70+
});
71+
}
72+
}
73+
}catch (e) {
74+
notifications
75+
.show({
76+
title: 'Error',
77+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
78+
// @ts-expect-error
79+
message: e.toString()
80+
});
81+
}
82+
}
83+
useEffect(() => {
84+
Fetch().then().catch();
85+
}, []);
286
return(
3-
<>
4-
</>
87+
<div className="setting-ssh">
88+
{
89+
!Edit && (
90+
<>
91+
<div style={{
92+
display: "flex",
93+
justifyContent: "space-between",
94+
alignItems: "center",
95+
}}>
96+
<h1>
97+
SSH Key
98+
</h1>
99+
<Button onClick={()=>{
100+
setEdit(true);
101+
}}>
102+
Add SSH Key
103+
</Button>
104+
</div>
105+
<Divider/>
106+
<span style={{
107+
marginTop: "1rem"
108+
}}>
109+
This is a list of SSH keys associated with your account.
110+
Remove any keys that you do not recognize.
111+
</span>
112+
<fieldset style={{
113+
border: "none"
114+
}} title="Authentication keys">
115+
<b>
116+
Authentication keys
117+
</b>
118+
<div style={{
119+
border: "1px #d6d6d6 solid",
120+
padding: "0 1rem",
121+
width: "100%",
122+
borderRadius: 5
123+
}}>
124+
{
125+
SshList.map((item) => {
126+
return (
127+
<div style={{
128+
display: "flex",
129+
flexDirection: "row",
130+
justifyContent: "space-between",
131+
width: "100%",
132+
alignItems: "center"
133+
}} key={item.uid}>
134+
<div>
135+
<h2 style={{
136+
margin: "1rem 0",
137+
}}>{item.name}</h2>
138+
<a style={{
139+
color: "grey"
140+
}}>{item.description}</a>
141+
<p>Created <a style={{
142+
color: "grey"
143+
}}>
144+
{item.created_at.toString().split(".")[0]}
145+
</a></p>
146+
<p>Last use {item.updated_at === item.created_at ? <a style={{
147+
color: "red"
148+
}}>
149+
Never
150+
</a> : item.updated_at.toString()}</p>
151+
</div>
152+
<Button
153+
style={{
154+
backgroundColor: "red"
155+
}}
156+
onClick={()=>{
157+
api
158+
.SSHDelete(item.uid)
159+
.then((res)=>{
160+
if (res.status === 200) {
161+
notifications
162+
.show({
163+
title: 'Success',
164+
message: "Delete SSH Key Success"
165+
});
166+
}else {
167+
notifications
168+
.show({
169+
title: 'Error',
170+
message: "Delete SSH Key Failed"
171+
});
172+
}
173+
Fetch().then().catch();
174+
})
175+
}}
176+
177+
>
178+
Delete
179+
</Button>
180+
</div>
181+
)
182+
})
183+
}
184+
</div>
185+
</fieldset>
186+
</>
187+
)
188+
}
189+
{
190+
Edit && (
191+
<>
192+
<div style={{
193+
display: "flex",
194+
justifyContent: "space-between",
195+
alignItems: "center",
196+
}}>
197+
<h1>
198+
Add new SSH Key
199+
</h1>
200+
</div>
201+
<Divider/>
202+
<div style={{
203+
display: "flex",
204+
flexDirection: "column",
205+
gap: "1rem"
206+
207+
}}>
208+
<InputLabel style={{
209+
maxWidth: "60%"
210+
}}>
211+
<b>Title<a style={{color: "red"}}>*</a></b>
212+
<Input placeholder="lenght last 3" onChange={(x)=>{
213+
setParam((prev)=>{
214+
return {
215+
...prev,
216+
name: x.target.value
217+
}
218+
})
219+
}}/>
220+
</InputLabel>
221+
<InputLabel>
222+
<b>Description(optional)</b>
223+
<Input onChange={(x)=>{
224+
setParam((prev)=>{
225+
return {
226+
...prev,
227+
description: x.target.value
228+
}
229+
})
230+
}}/>
231+
</InputLabel>
232+
<InputLabel>
233+
<b>Key<a style={{color: "red"}}>*</a></b>
234+
<Textarea
235+
style={{
236+
width: "100%",
237+
}}
238+
onChange={(x)=>{
239+
setParam((prev)=>{
240+
return {
241+
...prev,
242+
public_key: x.target.value
243+
}
244+
})
245+
}}
246+
placeholder="Begins with 'ssh-rsa', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', 'ecdsa-sha2-nistp521', 'ssh-ed25519', '[email protected]', or '[email protected]'"/>
247+
</InputLabel>
248+
<div style={{
249+
display: "flex",
250+
alignItems: "center",
251+
gap: "2rem"
252+
}}>
253+
<Button onClick={Submit} style={{
254+
minWidth: "100px",
255+
width: "15%"
256+
}}>
257+
Add SSH key
258+
</Button>
259+
<Button onClick={()=>{
260+
setEdit(false)
261+
}} color="gray" style={{
262+
minWidth: "100px",
263+
width: "15%"
264+
}}>
265+
Cancel
266+
</Button>
267+
</div>
268+
</div>
269+
</>
270+
)
271+
}
272+
</div>
5273
)
6274
}

0 commit comments

Comments
 (0)