mirror of
https://github.com/netbirdio/dashboard.git
synced 2026-09-23 00:30:43 -07:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sarooj bukhari
|
439e803ef2 | ||
 braginini
|
440c51a35c | ||
|
braginini
|
800e94de85 | ||
|
braginini
|
ba7d138156 | ||
|
braginini
|
a66fb3bf8f | ||
|
Sarooj bukhari
|
fcc51243e0 | ||
|
Sarooj bukhari
|
312c60dd45 | ||
|
Sarooj bukhari
|
09e6de74ee | ||
 pascal-fischer
|
addd348456 | ||
|
braginini
|
a8190bfe5b |
No files matched your search
Generated
+387
-12
File diff suppressed because it is too large.
Load diff
@@ -39,6 +39,7 @@
|
||||
"react-redux": "^8.0.2",
|
||||
"react-router-dom": "^5.3.3",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-select": "^5.7.3",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"react-table": "^7.7.0",
|
||||
"redux": "^4.2.0",
|
||||
|
||||
@@ -320,9 +320,9 @@ const AccessControlEdit = () => {
|
||||
<Divider style={{margin: "8px 0"}}/>
|
||||
<Row style={{padding: "0 8px 4px"}}>
|
||||
<Col flex="auto">
|
||||
<span style={{color: "#9CA3AF"}}>
|
||||
Add new ports or range by pressing "Enter"
|
||||
</span>
|
||||
<Text type={"secondary"}>
|
||||
Add new ports by pressing "Enter"
|
||||
</Text>
|
||||
</Col>
|
||||
<Col flex="none">
|
||||
<svg
|
||||
@@ -450,7 +450,7 @@ const AccessControlEdit = () => {
|
||||
{policy && (
|
||||
<Container style={{paddingTop: "40px"}}>
|
||||
<Breadcrumb
|
||||
style={{marginBottom: "30px"}}
|
||||
style={{marginBottom: "25px"}}
|
||||
items={[
|
||||
{
|
||||
title: <a onClick={onBreadcrumbUsersClick}>Access Control</a>,
|
||||
@@ -488,6 +488,7 @@ const AccessControlEdit = () => {
|
||||
margin: "0px",
|
||||
marginBottom: "10px",
|
||||
cursor: "pointer",
|
||||
fontWeight:"500"
|
||||
}}
|
||||
onDoubleClick={() => toggleEditName(true)}
|
||||
>
|
||||
@@ -502,7 +503,7 @@ const AccessControlEdit = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Rule name
|
||||
@@ -553,7 +554,7 @@ const AccessControlEdit = () => {
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="Description"
|
||||
style={{marginTop: 24, fontWeight: "600"}}
|
||||
style={{marginTop: 24, fontWeight: "500"}}
|
||||
>
|
||||
<Input
|
||||
placeholder="Add description..."
|
||||
@@ -587,7 +588,7 @@ const AccessControlEdit = () => {
|
||||
style={{
|
||||
color: "rgba(0, 0, 0, 0.88)",
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Enabled
|
||||
@@ -596,7 +597,7 @@ const AccessControlEdit = () => {
|
||||
type={"secondary"}
|
||||
style={{
|
||||
marginTop: "-2",
|
||||
fontWeight: "500",
|
||||
fontWeight: "400",
|
||||
marginBottom: "0",
|
||||
}}
|
||||
>
|
||||
@@ -615,7 +616,7 @@ const AccessControlEdit = () => {
|
||||
name="tagSourceGroups"
|
||||
label="Source groups"
|
||||
rules={[{validator: selectValidator}]}
|
||||
style={{fontWeight: "600"}}
|
||||
style={{fontWeight: "500"}}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
@@ -768,7 +769,7 @@ const AccessControlEdit = () => {
|
||||
name="tagDestinationGroups"
|
||||
label="Destination groups"
|
||||
rules={[{validator: selectValidator}]}
|
||||
style={{fontWeight: "600"}}
|
||||
style={{fontWeight: "500"}}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
@@ -798,7 +799,7 @@ const AccessControlEdit = () => {
|
||||
<Form.Item
|
||||
name="protocol"
|
||||
label="Protocol"
|
||||
style={{fontWeight: "600"}}
|
||||
style={{fontWeight: "500"}}
|
||||
className="tag-box"
|
||||
>
|
||||
<Select
|
||||
@@ -814,7 +815,7 @@ const AccessControlEdit = () => {
|
||||
<Form.Item
|
||||
name="ports"
|
||||
label="Ports"
|
||||
style={{fontWeight: "600"}}
|
||||
style={{fontWeight: "500"}}
|
||||
rules={[
|
||||
{
|
||||
message:
|
||||
|
||||
@@ -274,9 +274,9 @@ const AccessControlNew = () => {
|
||||
<Divider style={{ margin: "8px 0" }} />
|
||||
<Row style={{ padding: "0 8px 4px" }}>
|
||||
<Col flex="auto">
|
||||
<span style={{ color: "#9CA3AF" }}>
|
||||
Add new group by pressing "Enter"
|
||||
</span>
|
||||
<Text type={"secondary"}>
|
||||
Add new ports by pressing "Enter"
|
||||
</Text>
|
||||
</Col>
|
||||
<Col flex="none">
|
||||
<svg
|
||||
@@ -458,8 +458,9 @@ const AccessControlNew = () => {
|
||||
style={{
|
||||
textAlign: "start",
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "22px",
|
||||
fontSize: "18px",
|
||||
margin: "0px",
|
||||
fontWeight:"500"
|
||||
}}
|
||||
>
|
||||
Create Rule
|
||||
@@ -480,7 +481,7 @@ const AccessControlNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Rule name
|
||||
@@ -531,7 +532,7 @@ const AccessControlNew = () => {
|
||||
<Form.Item
|
||||
name="description"
|
||||
label="Description"
|
||||
style={{ marginTop: 24, fontWeight: "600" }}
|
||||
style={{ marginTop: 24, fontWeight: "500" }}
|
||||
>
|
||||
<Input
|
||||
placeholder="Add description..."
|
||||
@@ -553,7 +554,7 @@ const AccessControlNew = () => {
|
||||
name="tagSourceGroups"
|
||||
label="Source"
|
||||
rules={[{ validator: selectValidator }]}
|
||||
style={{ fontWeight: "600" }}
|
||||
style={{ fontWeight: "500" }}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
@@ -706,7 +707,7 @@ const AccessControlNew = () => {
|
||||
name="tagDestinationGroups"
|
||||
label="Destination"
|
||||
rules={[{ validator: selectValidator }]}
|
||||
style={{ fontWeight: "600" }}
|
||||
style={{ fontWeight: "500" }}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
@@ -736,14 +737,14 @@ const AccessControlNew = () => {
|
||||
<Form.Item
|
||||
name="protocol"
|
||||
label="Protocol"
|
||||
style={{ fontWeight: "600" }}
|
||||
style={{ fontWeight: "500" }}
|
||||
className="tag-box"
|
||||
>
|
||||
<Paragraph
|
||||
type={"secondary"}
|
||||
style={{
|
||||
marginTop: "-10px",
|
||||
fontWeight: "500",
|
||||
fontWeight: "400",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
@@ -767,7 +768,7 @@ const AccessControlNew = () => {
|
||||
style={{
|
||||
color: "rgba(0, 0, 0, 0.88)",
|
||||
fontSize: "14px",
|
||||
fontWeight: "600",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Ports
|
||||
@@ -776,7 +777,7 @@ const AccessControlNew = () => {
|
||||
type={"secondary"}
|
||||
style={{
|
||||
marginTop: "-5px",
|
||||
fontWeight: "500",
|
||||
fontWeight: "400",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
>
|
||||
@@ -786,7 +787,7 @@ const AccessControlNew = () => {
|
||||
<Form.Item
|
||||
name="ports"
|
||||
label=""
|
||||
style={{ fontWeight: "600" }}
|
||||
style={{ fontWeight: "500" }}
|
||||
rules={[
|
||||
{
|
||||
message: "Directional traffic requires at least one port",
|
||||
@@ -845,7 +846,7 @@ const AccessControlNew = () => {
|
||||
style={{
|
||||
color: "rgba(0, 0, 0, 0.88)",
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Enabled
|
||||
@@ -854,7 +855,7 @@ const AccessControlNew = () => {
|
||||
type={"secondary"}
|
||||
style={{
|
||||
marginTop: "-2",
|
||||
fontWeight: "500",
|
||||
fontWeight: "400",
|
||||
marginBottom: "0",
|
||||
}}
|
||||
>
|
||||
@@ -878,7 +879,7 @@ const AccessControlNew = () => {
|
||||
href="https://docs.netbird.io/how-to/manage-network-access"
|
||||
>
|
||||
{" "}
|
||||
access controls
|
||||
Access Controls
|
||||
</a>
|
||||
</Text>
|
||||
</Col>
|
||||
|
||||
+357
-112
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
+528
-440
File diff suppressed because it is too large.
Load diff
@@ -33,7 +33,7 @@ import { Container } from "./Container";
|
||||
import Paragraph from "antd/es/typography/Paragraph";
|
||||
import { EditOutlined, LockOutlined } from "@ant-design/icons";
|
||||
import { actions as personalAccessTokenActions } from "../store/personal-access-token";
|
||||
import {useGetGroupTagHelpers} from "../utils/groups";
|
||||
import { useGetGroupTagHelpers } from "../utils/groups";
|
||||
|
||||
const { Option } = Select;
|
||||
const { Text } = Typography;
|
||||
@@ -44,10 +44,7 @@ const customExpiresFormat = (value: Date): string | null => {
|
||||
};
|
||||
|
||||
const SetupKeyNew = () => {
|
||||
const {
|
||||
optionRender,
|
||||
blueTagRender
|
||||
} = useGetGroupTagHelpers()
|
||||
const { optionRender, blueTagRender } = useGetGroupTagHelpers();
|
||||
const { getTokenSilently } = useGetTokenSilently();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
@@ -62,14 +59,14 @@ const SetupKeyNew = () => {
|
||||
const [tagGroups, setTagGroups] = useState([] as string[]);
|
||||
const [formSetupKey, setFormSetupKey] = useState({} as FormSetupKey);
|
||||
const inputNameRef = useRef<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
//Unmounting component clean
|
||||
return () => {
|
||||
setVisibleNewSetupKey(false)
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
//Unmounting component clean
|
||||
return () => {
|
||||
setVisibleNewSetupKey(false);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!editName) return;
|
||||
|
||||
@@ -269,7 +266,7 @@ const SetupKeyNew = () => {
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
style={{ marginBottom: "30px" }}
|
||||
style={{ marginBottom: "25px" }}
|
||||
items={[
|
||||
{
|
||||
title: <a onClick={onBreadcrumbUsersClick}>Setup Keys</a>,
|
||||
@@ -279,12 +276,11 @@ const SetupKeyNew = () => {
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Card
|
||||
bordered={true}
|
||||
title={setupKey.name}
|
||||
style={{ marginBottom: "7px" }}
|
||||
>
|
||||
<Card bordered={true} style={{ marginBottom: "7px", border: "none" }}>
|
||||
<div style={{ maxWidth: "800px" }}>
|
||||
<h3 style={{ fontSize: "22px", fontWeight: "500",marginBottom:"30px" }}>
|
||||
{setupKey.name}
|
||||
</h3>
|
||||
<Form
|
||||
layout="vertical"
|
||||
requiredMark={false}
|
||||
@@ -309,7 +305,7 @@ const SetupKeyNew = () => {
|
||||
<Paragraph
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
@@ -340,14 +336,14 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
<Paragraph
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
></Paragraph>
|
||||
{formSetupKey.type === "one-off" ? "One-off" : "Reusable"},
|
||||
@@ -384,7 +380,7 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Auto-assigned groups
|
||||
@@ -414,7 +410,7 @@ const SetupKeyNew = () => {
|
||||
</Col>
|
||||
|
||||
<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
|
||||
<Paragraph style={{ margin: 0, fontWeight: "bold" }}>
|
||||
<Paragraph style={{ margin: 0, fontWeight: "500" }}>
|
||||
Expires
|
||||
</Paragraph>
|
||||
<Row>
|
||||
@@ -437,7 +433,7 @@ const SetupKeyNew = () => {
|
||||
href="https://docs.netbird.io/how-to/register-machines-using-setup-keys"
|
||||
>
|
||||
{" "}
|
||||
setup keys
|
||||
Setup Keys
|
||||
</a>
|
||||
</Text>
|
||||
</Row>
|
||||
|
||||
@@ -369,8 +369,9 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
textAlign: "start",
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "22px",
|
||||
fontSize: "18px",
|
||||
margin: "0px",
|
||||
fontWeight:"500"
|
||||
}}
|
||||
>
|
||||
{showPlainToken
|
||||
@@ -382,7 +383,6 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
textAlign: "start",
|
||||
whiteSpace: "pre-line",
|
||||
paddingBottom: "15px",
|
||||
}}
|
||||
>
|
||||
{showPlainToken
|
||||
@@ -402,8 +402,11 @@ const SetupKeyNew = () => {
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Paragraph style={{ fontWeight: "bold" }}>Name</Paragraph>
|
||||
<Paragraph type={"secondary"} style={{ marginTop: "-15px" }}>
|
||||
<Paragraph style={{ fontWeight: "500" }}>Name</Paragraph>
|
||||
<Paragraph
|
||||
type={"secondary"}
|
||||
style={{ marginTop: "-15px", marginBottom: "-5px" }}
|
||||
>
|
||||
Set an easily identifiable name for your key
|
||||
</Paragraph>
|
||||
</Col>
|
||||
@@ -427,7 +430,7 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Reusable
|
||||
@@ -461,7 +464,7 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Usage limit
|
||||
@@ -499,7 +502,7 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Expires in
|
||||
@@ -535,6 +538,7 @@ const SetupKeyNew = () => {
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Auto-assigned groups
|
||||
|
||||
+43
-37
@@ -192,25 +192,29 @@ const UserEdit = () => {
|
||||
|
||||
const showConfirmDelete = (token: TokenDataTable) => {
|
||||
confirmModal.confirm({
|
||||
icon: <ExclamationCircleOutlined/>,
|
||||
title: "Delete token \"" + token.name + "\"",
|
||||
width: 600,
|
||||
content: <Space direction="vertical" size="small">
|
||||
<Paragraph>Are you sure you want to delete this token?</Paragraph>
|
||||
</Space>,
|
||||
onOk() {
|
||||
dispatch(personalAccessTokenActions.deletePersonalAccessToken.request({
|
||||
getAccessTokenSilently: getTokenSilently,
|
||||
payload: {
|
||||
user_id: user.id,
|
||||
id: token.id,
|
||||
name: token.name,
|
||||
} as SpecificPAT
|
||||
}));
|
||||
},
|
||||
onCancel() {
|
||||
// noop
|
||||
},
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
title: <span className="font-500">Delete token {token.name}</span>,
|
||||
width: 600,
|
||||
content: (
|
||||
<Space direction="vertical" size="small">
|
||||
<Paragraph>Are you sure you want to delete this token?</Paragraph>
|
||||
</Space>
|
||||
),
|
||||
onOk() {
|
||||
dispatch(
|
||||
personalAccessTokenActions.deletePersonalAccessToken.request({
|
||||
getAccessTokenSilently: getTokenSilently,
|
||||
payload: {
|
||||
user_id: user.id,
|
||||
id: token.id,
|
||||
name: token.name,
|
||||
} as SpecificPAT,
|
||||
})
|
||||
);
|
||||
},
|
||||
onCancel() {
|
||||
// noop
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -258,11 +262,6 @@ const UserEdit = () => {
|
||||
}
|
||||
}, [form, user, currentGroups])
|
||||
|
||||
|
||||
const isUserAdmin = (userId: string): boolean => {
|
||||
return users.find(u => u.id === userId)?.role === "admin"
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ paddingTop: "13px" }}>
|
||||
@@ -288,10 +287,10 @@ const UserEdit = () => {
|
||||
|
||||
<Card
|
||||
bordered={true}
|
||||
title={user.name}
|
||||
loading={loading}
|
||||
style={{ marginBottom: "7px" }}
|
||||
>
|
||||
<h3 style={{fontSize:"22px",fontWeight:"500",marginBottom:"25px"}}>{user.name}</h3>
|
||||
<div style={{ maxWidth: "800px" }}>
|
||||
<Form
|
||||
layout="vertical"
|
||||
@@ -319,12 +318,12 @@ const UserEdit = () => {
|
||||
<Form.Item
|
||||
name="email"
|
||||
label={<Text style={{}}>Email</Text>}
|
||||
style={{ marginRight: "70px", fontWeight: "bold" }}
|
||||
style={{ marginRight: "70px", fontWeight: "500" }}
|
||||
>
|
||||
<Input
|
||||
disabled={user.id}
|
||||
value={formUser.email}
|
||||
style={{ color: "#8c8c8c"}}
|
||||
style={{ color: "#8c8c8c" }}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Form.Item>
|
||||
@@ -333,16 +332,19 @@ const UserEdit = () => {
|
||||
<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
|
||||
<Form.Item
|
||||
name="role"
|
||||
label={<Text style={{}}>Role</Text>}
|
||||
style={{ marginRight: "50px", fontWeight: "bold" }}
|
||||
label={<Text style={{fontWeight:"500"}}>Role</Text>}
|
||||
style={{ marginRight: "50px", fontWeight: "500" }}
|
||||
>
|
||||
<Select
|
||||
style={{ width: "100%" }}
|
||||
|
||||
disabled={user.is_current}
|
||||
>
|
||||
<Option value="admin"><Text type={"secondary"}>admin</Text></Option>
|
||||
<Option value="user"><Text type={"secondary"}>user</Text></Option>
|
||||
<Option value="admin">
|
||||
<Text type={"secondary"}>admin</Text>
|
||||
</Option>
|
||||
<Option value="user">
|
||||
<Text type={"secondary"}>user</Text>
|
||||
</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
@@ -361,7 +363,11 @@ const UserEdit = () => {
|
||||
>
|
||||
<Form.Item
|
||||
name="autoGroupsNames"
|
||||
label={<Text style={{}}>Auto-assigned groups</Text>}
|
||||
label={
|
||||
<Text style={{ fontWeight: "500" }}>
|
||||
Auto-assigned groups
|
||||
</Text>
|
||||
}
|
||||
tooltip="Every peer enrolled with this user will be automatically added to these groups"
|
||||
rules={[{ validator: selectValidator }]}
|
||||
style={{ marginRight: "70px" }}
|
||||
@@ -371,7 +377,7 @@ const UserEdit = () => {
|
||||
placeholder="Associate groups with the user"
|
||||
tagRender={blueTagRender}
|
||||
dropdownRender={dropDownRender}
|
||||
disabled={oidcUser && !isUserAdmin(oidcUser.sub)}
|
||||
disabled={!isAdmin}
|
||||
>
|
||||
{tagGroups.map((m) => (
|
||||
<Option key={m}>{optionRender(m)}</Option>
|
||||
@@ -394,7 +400,7 @@ const UserEdit = () => {
|
||||
valuePropName="checked"
|
||||
name="is_blocked"
|
||||
label="Block user"
|
||||
style={{ marginRight: "50px", fontWeight: "bold" }}
|
||||
style={{ marginRight: "50px", fontWeight: "500" }}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
@@ -426,8 +432,8 @@ const UserEdit = () => {
|
||||
style={{
|
||||
textAlign: "left",
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "16px",
|
||||
fontWeight: "bold",
|
||||
fontSize: "18px",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
Access tokens
|
||||
|
||||
@@ -116,7 +116,7 @@ const AddPATPopup = () => {
|
||||
>
|
||||
<Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
|
||||
<Paragraph
|
||||
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
|
||||
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "18px",fontWeight:"500"}}>
|
||||
{showPlainToken ? "Token created successfully!" : "Create token"}
|
||||
</Paragraph>
|
||||
{!showPlainToken && <Paragraph type={"secondary"}
|
||||
@@ -142,7 +142,7 @@ const AddPATPopup = () => {
|
||||
<Col span={24}>
|
||||
<Row align="top">
|
||||
<Col flex="auto">
|
||||
<Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
|
||||
<Paragraph style={{fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
|
||||
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set an easily identifiable name for your token</Paragraph>
|
||||
<Form.Item
|
||||
name="name"
|
||||
@@ -162,7 +162,7 @@ const AddPATPopup = () => {
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={24} style={{textAlign: "left", marginTop: "10px"}}>
|
||||
<Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Expires in</Paragraph>
|
||||
<Paragraph style={{fontWeight: "500", marginTop: "-10px"}}>Expires in</Paragraph>
|
||||
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Number of days this token will be valid for</Paragraph>
|
||||
<Form.Item
|
||||
name="expires_in"
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -79,7 +79,7 @@ export const AddPeerPopup: React.FC<Props> = ({
|
||||
textAlign: "center",
|
||||
whiteSpace: "pre-line",
|
||||
}}>
|
||||
To get started install NetBird and log in using your {"\n"} email account.
|
||||
To get started, install NetBird and log in using your {"\n"} email account.
|
||||
</Paragraph>
|
||||
|
||||
<Tabs centered={!isMobile}
|
||||
|
||||
+54
-2
@@ -1,6 +1,13 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');
|
||||
@import 'antd/dist/reset.css';
|
||||
|
||||
html,
|
||||
body,
|
||||
* {
|
||||
font-family: 'Arimo', sans-serif !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
background-color: #f0f2f5;
|
||||
@@ -27,11 +34,12 @@ body {
|
||||
|
||||
.ant-menu-horizontal>.ant-menu-item a {
|
||||
color: rgba(107, 114, 128, 1);
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal>.ant-menu-item-selected a {
|
||||
color: rgba(17, 24, 39, 1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
@@ -197,7 +205,7 @@ td.non-highlighted-table-column {
|
||||
}
|
||||
|
||||
.tag-box .ant-select-selector {
|
||||
padding: 0 5px!important;
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.tag-box .ant-select-selection-item {
|
||||
@@ -219,4 +227,48 @@ td.non-highlighted-table-column {
|
||||
align-items: center;
|
||||
margin-top: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.font-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
font-weight: 500 !important;
|
||||
font-size: 22px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.react-select__indicator-separator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.react-select__control,
|
||||
.react-select__value-container,
|
||||
.react-select__input-container {
|
||||
min-height: 32px !important;
|
||||
padding: 0 5px !important;
|
||||
max-height: 32px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.react-select__value-container {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.react-select__indicator {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
|
||||
.ant-badge-status-dot {
|
||||
width: 8px!important;
|
||||
height: 8px!important;
|
||||
}
|
||||
@@ -79,11 +79,14 @@ const deletedPeer = createReducer<DeleteResponse<string | null>, ActionTypes>(in
|
||||
const updateGroupsVisible = createReducer<boolean, ActionTypes>(initialState.setUpdateGroupsVisible)
|
||||
.handleAction(actions.setUpdateGroupsVisible, (store, action) => action.payload)
|
||||
|
||||
const savedGroups = createReducer<ChangeResponse<Group[] | null>, ActionTypes>(initialState.savedGroups)
|
||||
.handleAction(actions.saveGroups.request, () => initialState.savedGroups)
|
||||
.handleAction(actions.saveGroups.success, (store, action) => action.payload)
|
||||
.handleAction(actions.saveGroups.failure, (store, action) => action.payload)
|
||||
.handleAction(actions.resetSavedGroups, () => initialState.savedGroups)
|
||||
const savedGroups = createReducer<ChangeResponse<Group[] | null>, ActionTypes>(
|
||||
initialState.savedGroups
|
||||
)
|
||||
.handleAction(actions.saveGroups.request, () => initialState.savedGroups)
|
||||
.handleAction(actions.saveGroups.success, (store, action) => action.payload)
|
||||
.handleAction(actions.saveGroups.failure, (store, action) => action.payload)
|
||||
.handleAction(actions.setSavedGroups, (store, action) => action.payload)
|
||||
.handleAction(actions.resetSavedGroups, () => initialState.savedGroups);
|
||||
|
||||
const updatedPeer = createReducer<CreateResponse<Peer | null>, ActionTypes>(initialState.updatedPeer)
|
||||
.handleAction(actions.updatePeer.request, () => initialState.updatedPeer)
|
||||
|
||||
@@ -28,6 +28,7 @@ const actions = {
|
||||
|
||||
setRoute: createAction('SET_ROUTE')<Route>(),
|
||||
setSetupNewRouteVisible: createAction('SET_SETUP_NEW_ROUTE_VISIBLE')<boolean>(),
|
||||
setSetupEditRouteVisible: createAction('SET_SETUP_EDIT_ROUTE_VISIBLE')<boolean>(),
|
||||
setSetupNewRouteHA: createAction('SET_SETUP_NEW_ROUTE_HA')<boolean>()
|
||||
};
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ type StateType = Readonly<{
|
||||
deleteRoute: DeleteResponse<string | null>;
|
||||
savedRoute: CreateResponse<Route | null>;
|
||||
setupNewRouteVisible: boolean;
|
||||
setupNewRouteHA: boolean
|
||||
setupNewRouteHA: boolean;
|
||||
setupEditRouteVisible: boolean;
|
||||
}>;
|
||||
|
||||
const initialState: StateType = {
|
||||
@@ -27,17 +28,18 @@ const initialState: StateType = {
|
||||
success: false,
|
||||
failure: false,
|
||||
error: null,
|
||||
data : null
|
||||
data: null,
|
||||
},
|
||||
savedRoute: <CreateResponse<Route | null>>{
|
||||
loading: false,
|
||||
success: false,
|
||||
failure: false,
|
||||
error: null,
|
||||
data : null
|
||||
data: null,
|
||||
},
|
||||
setupNewRouteVisible: false,
|
||||
setupNewRouteHA: false
|
||||
setupNewRouteHA: false,
|
||||
setupEditRouteVisible: false,
|
||||
};
|
||||
|
||||
const data = createReducer<Route[], ActionTypes>(initialState.data as Route[])
|
||||
@@ -79,6 +81,13 @@ const savedRoute = createReducer<CreateResponse<Route | null>, ActionTypes>(init
|
||||
const setupNewRouteVisible = createReducer<boolean, ActionTypes>(initialState.setupNewRouteVisible)
|
||||
.handleAction(actions.setSetupNewRouteVisible, (store, action) => action.payload)
|
||||
|
||||
const setupEditRouteVisible = createReducer<boolean, ActionTypes>(
|
||||
initialState.setupEditRouteVisible
|
||||
).handleAction(
|
||||
actions.setSetupEditRouteVisible,
|
||||
(store, action) => action.payload
|
||||
);
|
||||
|
||||
const setupNewRouteHA = createReducer<boolean, ActionTypes>(initialState.setupNewRouteHA)
|
||||
.handleAction(actions.setSetupNewRouteHA, (store, action) => action.payload)
|
||||
|
||||
@@ -91,5 +100,6 @@ export default combineReducers({
|
||||
deletedRoute,
|
||||
savedRoute,
|
||||
setupNewRouteVisible,
|
||||
setupNewRouteHA
|
||||
setupNewRouteHA,
|
||||
setupEditRouteVisible,
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
export interface Route {
|
||||
id?: string
|
||||
id?: string | null
|
||||
description: string
|
||||
enabled: boolean
|
||||
peer: string
|
||||
|
||||
+79
-27
@@ -257,8 +257,8 @@ export const AccessControl = () => {
|
||||
setPolicyToAction(record as PolicyDataTable);
|
||||
confirm({
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
title: 'Delete rule "' + record.name + '"',
|
||||
width: 600,
|
||||
title: <span className="font-500">Delete rule {record.name}</span>,
|
||||
width: 500,
|
||||
content: (
|
||||
<Space direction="vertical" size="small">
|
||||
<Paragraph>
|
||||
@@ -320,7 +320,7 @@ export const AccessControl = () => {
|
||||
) as Policy[];
|
||||
if (optionAllEnable == "enabled") {
|
||||
f = filter(f, (f: Policy) => f.enabled);
|
||||
} else if (optionAllEnable == "disabled") {
|
||||
} else if (optionAllEnable == "disabled") {
|
||||
f = filter(f, (f: Policy) => !f.enabled);
|
||||
}
|
||||
return f;
|
||||
@@ -438,7 +438,7 @@ export const AccessControl = () => {
|
||||
} `;
|
||||
return (
|
||||
<div key={i}>
|
||||
<Tag color="blue" style={{ marginRight: 3}}>
|
||||
<Tag color="blue" style={{ marginRight: 3 }}>
|
||||
{_g.name}
|
||||
</Tag>
|
||||
<span style={{ fontSize: ".85em" }}>{peersCount}</span>
|
||||
@@ -541,7 +541,6 @@ export const AccessControl = () => {
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{!setupEditPolicyVisible && (
|
||||
@@ -549,11 +548,33 @@ export const AccessControl = () => {
|
||||
<Container className="container-main">
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Title level={4}>Access Control</Title>
|
||||
<Paragraph>
|
||||
Access rules help you manage access permissions in your
|
||||
organisation.
|
||||
</Paragraph>
|
||||
<Title className="page-heading">Access Control</Title>
|
||||
{policies.length ? (
|
||||
<Paragraph style={{marginTop: "5px"}}>
|
||||
Create rules to manage access in your network and define what peers can connect.
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://docs.netbird.io/how-to/manage-network-access"
|
||||
>
|
||||
{" "}
|
||||
Learn more
|
||||
</a>
|
||||
</Paragraph>
|
||||
) : (
|
||||
<Paragraph style={{marginTop: "5px"}} type={"secondary"}>
|
||||
Create rules to manage access in your network and define what peers can connect.
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://docs.netbird.io/how-to/manage-network-access"
|
||||
>
|
||||
{" "}
|
||||
Learn more
|
||||
</a>
|
||||
</Paragraph>
|
||||
)}
|
||||
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="large"
|
||||
@@ -585,16 +606,18 @@ export const AccessControl = () => {
|
||||
value={optionAllEnable}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
disabled={showTutorial}
|
||||
/>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
options={pageSizeOptions}
|
||||
onChange={onChangePageSize}
|
||||
className="select-rows-per-page-en"
|
||||
disabled={showTutorial}
|
||||
/>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
|
||||
{!showTutorial && (<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
|
||||
<Row justify="end">
|
||||
<Col>
|
||||
<Button
|
||||
@@ -602,11 +625,11 @@ export const AccessControl = () => {
|
||||
disabled={savedPolicy.loading}
|
||||
onClick={onClickAddNewPolicy}
|
||||
>
|
||||
Add rule
|
||||
Add Rule
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Col>)}
|
||||
</Row>
|
||||
{failed && (
|
||||
<Alert
|
||||
@@ -618,6 +641,7 @@ export const AccessControl = () => {
|
||||
/>
|
||||
)}
|
||||
<Card bodyStyle={{ padding: 0 }}>
|
||||
{!showTutorial && (
|
||||
<Table
|
||||
pagination={{
|
||||
current: currentPage,
|
||||
@@ -667,7 +691,7 @@ export const AccessControl = () => {
|
||||
}
|
||||
className="tooltip-label"
|
||||
>
|
||||
<Text strong>{text}</Text>
|
||||
<Text className="font-500">{text}</Text>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
@@ -742,8 +766,8 @@ export const AccessControl = () => {
|
||||
render={(text, record: PolicyDataTable, index) => {
|
||||
return (
|
||||
<Tag
|
||||
className="menlo-font"
|
||||
style={{
|
||||
className="menlo-font"
|
||||
style={{
|
||||
marginRight: "3",
|
||||
textTransform: "uppercase",
|
||||
}}
|
||||
@@ -778,18 +802,46 @@ export const AccessControl = () => {
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Table>
|
||||
</Table>)}
|
||||
{showTutorial && (
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="small"
|
||||
align="center"
|
||||
style={{ display: "flex", padding: "45px 15px" }}
|
||||
>
|
||||
<Button type="link" onClick={onClickAddNewPolicy}>
|
||||
Add new access rule
|
||||
</Button>
|
||||
</Space>
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="small"
|
||||
align="center"
|
||||
style={{
|
||||
display: "flex",
|
||||
padding: "45px 15px",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<Title level={4} style={{ textAlign: "center" }}>
|
||||
Create New Rule
|
||||
</Title>
|
||||
<Paragraph
|
||||
style={{
|
||||
textAlign: "center",
|
||||
whiteSpace: "pre-line",
|
||||
}}
|
||||
>
|
||||
It looks like you don't have any rules. {"\n"}
|
||||
Get started with access control by adding a new one.
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
href="https://docs.netbird.io/how-to/manage-network-access"
|
||||
>
|
||||
{" "}
|
||||
Learn more
|
||||
</a>
|
||||
</Paragraph>
|
||||
<Button
|
||||
size={"middle"}
|
||||
type="primary"
|
||||
onClick={() => onClickAddNewPolicy()}
|
||||
>
|
||||
Add rule
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</Card>
|
||||
</Space>
|
||||
|
||||
Loaded 20 of 28 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user