Skip to content

Commit ca84e3a

Browse files
jc21jc21
committed
User Permissions Modal
1 parent fa11945 commit ca84e3a

File tree

11 files changed

+325
-16
lines changed

11 files changed

+325
-16
lines changed

‎frontend/src/api/backend/base.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export async function post({ url, params, data, noAuth }: PostArgs, abortControl
124124
interface PutArgs {
125125
url: string;
126126
params?: queryString.StringifiableRecord;
127-
data?: Record<string, unknown>;
127+
data?: Record<string, any>;
128128
}
129129
export async function put({ url, params, data }: PutArgs, abortController?: AbortController) {
130130
const apiUrl = buildUrl({ url, params });

‎frontend/src/api/backend/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export * from "./models";
3838
export * from "./refreshToken";
3939
export * from "./renewCertificate";
4040
export * from "./responseTypes";
41+
export * from "./setPermissions";
4142
export * from "./testHttpCertificate";
4243
export * from "./toggleDeadHost";
4344
export * from "./toggleProxyHost";

‎frontend/src/api/backend/models.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ export interface AppVersion {
55
}
66

77
export interface UserPermissions {
8-
id: number;
9-
createdOn: string;
10-
modifiedOn: string;
11-
userId: number;
8+
id?: number;
9+
createdOn?: string;
10+
modifiedOn?: string;
11+
userId?: number;
1212
visibility: string;
1313
proxyHosts: string;
1414
redirectionHosts: string;

‎frontend/src/api/backend/setPermissions.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as api from "./base";
2+
import type { UserPermissions } from "./models";
3+
4+
export async function setPermissions(
5+
userId: number,
6+
data: UserPermissions,
7+
abortController?: AbortController,
8+
): Promise<boolean> {
9+
// Remove readonly fields
10+
return await api.put(
11+
{
12+
url: `/users/${userId}/permissions`,
13+
data,
14+
},
15+
abortController,
16+
);
17+
}

‎frontend/src/locale/lang/en.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@
5858
"offline": "Offline",
5959
"online": "Online",
6060
"password": "Password",
61+
"permissions.hidden": "Hidden",
62+
"permissions.manage": "Manage",
63+
"permissions.view": "View Only",
64+
"permissions.visibility.all": "All Items",
65+
"permissions.visibility.title": "Item Visibility",
66+
"permissions.visibility.user": "Created Items Only",
6167
"proxy-hosts.actions-title": "Proxy Host #{id}",
6268
"proxy-hosts.add": "Add Proxy Host",
6369
"proxy-hosts.count": "{count} Proxy Hosts",
@@ -95,6 +101,7 @@
95101
"user.new": "New User",
96102
"user.new-password": "New Password",
97103
"user.nickname": "Nickname",
104+
"user.set-permissions": "Set Permissions for {name}",
98105
"user.switch-dark": "Switch to Dark mode",
99106
"user.switch-light": "Switch to Light mode",
100107
"users.actions-title": "User #{id}",

‎frontend/src/locale/src/en.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,24 @@
176176
"password": {
177177
"defaultMessage": "Password"
178178
},
179+
"permissions.hidden": {
180+
"defaultMessage": "Hidden"
181+
},
182+
"permissions.manage": {
183+
"defaultMessage": "Manage"
184+
},
185+
"permissions.view": {
186+
"defaultMessage": "View Only"
187+
},
188+
"permissions.visibility.all": {
189+
"defaultMessage": "All Items"
190+
},
191+
"permissions.visibility.title": {
192+
"defaultMessage": "Item Visibility"
193+
},
194+
"permissions.visibility.user": {
195+
"defaultMessage": "Created Items Only"
196+
},
179197
"proxy-hosts.actions-title": {
180198
"defaultMessage": "Proxy Host #{id}"
181199
},
@@ -287,6 +305,9 @@
287305
"user.nickname": {
288306
"defaultMessage": "Nickname"
289307
},
308+
"user.set-permissions": {
309+
"defaultMessage": "Set Permissions for {name}"
310+
},
290311
"user.switch-dark": {
291312
"defaultMessage": "Switch to Dark mode"
292313
},

‎frontend/src/modals/PermissionsModal.tsx‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import { useQueryClient } from "@tanstack/react-query";
2+
import cn from "classnames";
3+
import { Field, Form, Formik } from "formik";
4+
import { useState } from "react";
5+
import { Alert } from "react-bootstrap";
6+
import Modal from "react-bootstrap/Modal";
7+
import { setPermissions } from "src/api/backend";
8+
import { Button, Loading } from "src/components";
9+
import { useUser } from "src/hooks";
10+
import { intl } from "src/locale";
11+
12+
interface Props {
13+
userId: number;
14+
onClose: () => void;
15+
}
16+
export function PermissionsModal({ userId, onClose }: Props) {
17+
const queryClient = useQueryClient();
18+
const [errorMsg, setErrorMsg] = useState<string | null>(null);
19+
const { data, isLoading, error } = useUser(userId);
20+
21+
const onSubmit = async (values: any, { setSubmitting }: any) => {
22+
setErrorMsg(null);
23+
try {
24+
await setPermissions(userId, values);
25+
onClose();
26+
queryClient.invalidateQueries({ queryKey: ["users"] });
27+
queryClient.invalidateQueries({ queryKey: ["user"] });
28+
} catch (err: any) {
29+
setErrorMsg(intl.formatMessage({ id: err.message }));
30+
}
31+
setSubmitting(false);
32+
};
33+
34+
const getPermissionButtons = (field: any, form: any) => {
35+
return (
36+
<div>
37+
<div className="btn-group w-100" role="group">
38+
<input
39+
type="radio"
40+
className="btn-check"
41+
name="btn-radio-basic"
42+
id={`${field.name}-manage`}
43+
autoComplete="off"
44+
value="manage"
45+
checked={field.value === "manage"}
46+
onChange={() => form.setFieldValue(field.name, "manage")}
47+
/>
48+
<label htmlFor={`${field.name}-manage`} className={cn("btn", { active: field.value === "manage" })}>
49+
{intl.formatMessage({ id: "permissions.manage" })}
50+
</label>
51+
<input
52+
type="radio"
53+
className="btn-check"
54+
name="btn-radio-basic"
55+
id={`${field.name}-view`}
56+
autoComplete="off"
57+
value="view"
58+
checked={field.value === "view"}
59+
onChange={() => form.setFieldValue(field.name, "view")}
60+
/>
61+
<label htmlFor={`${field.name}-view`} className={cn("btn", { active: field.value === "view" })}>
62+
{intl.formatMessage({ id: "permissions.view" })}
63+
</label>
64+
<input
65+
type="radio"
66+
className="btn-check"
67+
name="btn-radio-basic"
68+
id={`${field.name}-hidden`}
69+
autoComplete="off"
70+
value="hidden"
71+
checked={field.value === "hidden"}
72+
onChange={() => form.setFieldValue(field.name, "hidden")}
73+
/>
74+
<label htmlFor={`${field.name}-hidden`} className={cn("btn", { active: field.value === "hidden" })}>
75+
{intl.formatMessage({ id: "permissions.hidden" })}
76+
</label>
77+
</div>
78+
</div>
79+
);
80+
};
81+
82+
const isAdmin = data?.roles.indexOf("admin") !== -1;
83+
84+
return (
85+
<Modal show onHide={onClose} animation={false}>
86+
{!isLoading && error && <Alert variant="danger">{error?.message || "Unknown error"}</Alert>}
87+
{isLoading && <Loading noLogo />}
88+
{!isLoading && data && (
89+
<Formik
90+
initialValues={
91+
{
92+
visibility: data.permissions?.visibility,
93+
accessLists: data.permissions?.accessLists,
94+
certificates: data.permissions?.certificates,
95+
deadHosts: data.permissions?.deadHosts,
96+
proxyHosts: data.permissions?.proxyHosts,
97+
redirectionHosts: data.permissions?.redirectionHosts,
98+
streams: data.permissions?.streams,
99+
} as any
100+
}
101+
onSubmit={onSubmit}
102+
>
103+
{({ isSubmitting }) => (
104+
<Form>
105+
<Modal.Header closeButton>
106+
<Modal.Title>
107+
{intl.formatMessage({ id: "user.set-permissions" }, { name: data?.name })}
108+
</Modal.Title>
109+
</Modal.Header>
110+
<Modal.Body>
111+
<Alert variant="danger" show={!!error} onClose={() => setErrorMsg(null)} dismissible>
112+
{errorMsg}
113+
</Alert>
114+
<div className="mb-3">
115+
<label htmlFor="asd" className="form-label">
116+
{intl.formatMessage({ id: "permissions.visibility.title" })}
117+
</label>
118+
<Field name="visibility">
119+
{({ field, form }: any) => (
120+
<div className="btn-group w-100" role="group">
121+
<input
122+
type="radio"
123+
className="btn-check"
124+
name="btn-radio-basic"
125+
id={`${field.name}-user`}
126+
autoComplete="off"
127+
value="user"
128+
checked={field.value === "user"}
129+
onChange={() => form.setFieldValue(field.name, "user")}
130+
/>
131+
<label
132+
htmlFor={`${field.name}-user`}
133+
className={cn("btn", { active: field.value === "user" })}
134+
>
135+
{intl.formatMessage({ id: "permissions.visibility.user" })}
136+
</label>
137+
<input
138+
type="radio"
139+
className="btn-check"
140+
name="btn-radio-basic"
141+
id={`${field.name}-all`}
142+
autoComplete="off"
143+
value="all"
144+
checked={field.value === "all"}
145+
onChange={() => form.setFieldValue(field.name, "all")}
146+
/>
147+
<label
148+
htmlFor={`${field.name}-all`}
149+
className={cn("btn", { active: field.value === "all" })}
150+
>
151+
{intl.formatMessage({ id: "permissions.visibility.all" })}
152+
</label>
153+
</div>
154+
)}
155+
</Field>
156+
</div>
157+
{!isAdmin && (
158+
<>
159+
<div className="mb-3">
160+
<label htmlFor="ignored" className="form-label">
161+
{intl.formatMessage({ id: "proxy-hosts.title" })}
162+
</label>
163+
<Field name="proxyHosts">
164+
{({ field, form }: any) => getPermissionButtons(field, form)}
165+
</Field>
166+
</div>
167+
<div className="mb-3">
168+
<label htmlFor="ignored" className="form-label">
169+
{intl.formatMessage({ id: "redirection-hosts.title" })}
170+
</label>
171+
<Field name="redirectionHosts">
172+
{({ field, form }: any) => getPermissionButtons(field, form)}
173+
</Field>
174+
</div>
175+
<div className="mb-3">
176+
<label htmlFor="ignored" className="form-label">
177+
{intl.formatMessage({ id: "dead-hosts.title" })}
178+
</label>
179+
<Field name="deadHosts">
180+
{({ field, form }: any) => getPermissionButtons(field, form)}
181+
</Field>
182+
</div>
183+
<div className="mb-3">
184+
<label htmlFor="ignored" className="form-label">
185+
{intl.formatMessage({ id: "streams.title" })}
186+
</label>
187+
<Field name="streams">
188+
{({ field, form }: any) => getPermissionButtons(field, form)}
189+
</Field>
190+
</div>
191+
<div className="mb-3">
192+
<label htmlFor="ignored" className="form-label">
193+
{intl.formatMessage({ id: "access.title" })}
194+
</label>
195+
<Field name="accessLists">
196+
{({ field, form }: any) => getPermissionButtons(field, form)}
197+
</Field>
198+
</div>
199+
<div className="mb-3">
200+
<label htmlFor="ignored" className="form-label">
201+
{intl.formatMessage({ id: "certificates.title" })}
202+
</label>
203+
<Field name="certificates">
204+
{({ field, form }: any) => getPermissionButtons(field, form)}
205+
</Field>
206+
</div>
207+
</>
208+
)}
209+
</Modal.Body>
210+
<Modal.Footer>
211+
<Button data-bs-dismiss="modal" onClick={onClose} disabled={isSubmitting}>
212+
{intl.formatMessage({ id: "cancel" })}
213+
</Button>
214+
<Button
215+
type="submit"
216+
actionType="primary"
217+
className="ms-auto"
218+
data-bs-dismiss="modal"
219+
isLoading={isSubmitting}
220+
disabled={isSubmitting}
221+
>
222+
{intl.formatMessage({ id: "save" })}
223+
</Button>
224+
</Modal.Footer>
225+
</Form>
226+
)}
227+
</Formik>
228+
)}
229+
</Modal>
230+
);
231+
}

‎frontend/src/modals/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from "./ChangePasswordModal";
22
export * from "./DeleteConfirmModal";
3+
export * from "./PermissionsModal";
34
export * from "./UserModal";

‎frontend/src/pages/Dashboard/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ const Dashboard = () => {
128128
- check mobile
129129
- fix bad jwt not refreshing entire page
130130
- add help docs for host types
131+
- REDO SCREENSHOTS in docs folder
131132
132133
More for api, then implement here:
133134
- Properly implement refresh tokens

0 commit comments

Comments
 (0)