Compare commits

..
7 Commits
Author SHA1 Message Date
braginini 9875bb0fcd Fix setup key create popup 2023-05-07 23:16:55 +02:00
braginini ae586b4dfe Fix add PAT popup 2023-05-07 19:59:57 +02:00
braginini c0a6965310 Fix user edit view 2023-05-07 19:59:47 +02:00
braginini f12a923c61 Fix user edit view 2023-05-07 19:32:14 +02:00
braginini ad798bbab4 Fix invite and add user popups 2023-05-07 18:55:34 +02:00
Crusadero b50464db43 Setup keys screen (#167) 2023-05-07 18:39:28 +02:00
pascal-fischer 1eb5ccc131 displaying proper groups and name on route peer update (#169) 2023-05-05 15:50:39 +02:00
7 changed files with 1031 additions and 747 deletions

No files matched your search

File diff suppressed because it is too large. Load diff
+110 -54
View File
@@ -1,7 +1,7 @@
import {
Badge,
Breadcrumb,
Button,
Button, Card,
Col,
Divider,
Form,
@@ -33,6 +33,7 @@ import Column from "antd/lib/table/Column";
import {useOidcUser} from "@axa-fr/react-oidc";
const {Option} = Select;
const {Meta} = Card;
const {Title, Paragraph, Text} = Typography;
interface TokenDataTable extends PersonalAccessToken {
@@ -208,14 +209,15 @@ const UserEdit = () => {
}
const transformTokenTable = (d: PersonalAccessToken[]): TokenDataTable[] => {
if(!d) {
if (!d) {
return []
}
return d.map(p => ({
key: p.id,
status: Date.parse(p.expiration_date) > Date.now() ? "valid" : "expired",
created_by_email: getEmail(p),
...p} as TokenDataTable))
...p
} as TokenDataTable))
}
const getEmail = (token: PersonalAccessToken): string => {
@@ -271,8 +273,10 @@ const UserEdit = () => {
useEffect(() => {
if (user.is_current || user.is_service_user) {
dispatch(personalAccessTokenActions.getPersonalAccessTokens.request({getAccessTokenSilently: getTokenSilently,
payload: user.id}))
dispatch(personalAccessTokenActions.getPersonalAccessTokens.request({
getAccessTokenSilently: getTokenSilently,
payload: user.id
}))
}
}, [user])
@@ -327,9 +331,14 @@ const UserEdit = () => {
},
]}
/>
<Container style={{backgroundColor: "white", padding: "20px", borderRadius: "4px", boxSizing: "border-box", border: "0.5px solid #D9D9D9", marginBottom: "7px"}}>
<Card
bordered={true}
title={user.name}
loading={loading}
style={{marginBottom: "7px"}}
>
<div style={{maxWidth: "800px"}}>
<Paragraph style={{textAlign: "left", whiteSpace: "pre-line", fontSize: "1.5em"}}>{user.name}</Paragraph>
<Form layout="vertical" hideRequiredMark form={form}
initialValues={{
name: formUser.name,
@@ -338,24 +347,25 @@ const UserEdit = () => {
autoGroupsNames: formUser.autoGroupsNames,
}}
>
<Row style={{ paddingBottom: "15px"}}>
{!user.is_service_user && <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
<Form.Item
name="email"
label={<Text style={{fontSize: "16px", fontWeight: "500"}}>Email</Text>}
style={{marginRight: "70px"}}
>
<Input
disabled={user.id}
value={formUser.email}
style={{color: "#5a5c5a"}}
autoComplete="off"/>
</Form.Item>
</Col>}
<Row style={{paddingBottom: "15px"}}>
{!user.is_service_user &&
<Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
<Form.Item
name="email"
label={<Text style={{}}>Email</Text>}
style={{marginRight: "70px"}}
>
<Input
disabled={user.id}
value={formUser.email}
style={{color: "#5a5c5a"}}
autoComplete="off"/>
</Form.Item>
</Col>}
<Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
<Form.Item
name="role"
label={<Text style={{fontSize: "16px", fontWeight: "500"}}>Role</Text>}
label={<Text style={{}}>Role</Text>}
style={{marginRight: "50px"}}
>
<Select style={{width: '100%'}}
@@ -366,11 +376,11 @@ const UserEdit = () => {
</Form.Item>
</Col>
</Row>
{!user.is_service_user && <Row style={{ paddingBottom: "15px"}}>
{!user.is_service_user && <Row style={{paddingBottom: "15px"}}>
<Col span={9}>
<Form.Item
name="autoGroupsNames"
label={<Text style={{fontSize: "16px", fontWeight: "500"}}>Auto-assigned groups</Text>}
label={<Text style={{}}>Auto-assigned groups</Text>}
tooltip="Every peer enrolled with this user will be automatically added to these groups"
rules={[{validator: selectValidator}]}
>
@@ -397,16 +407,27 @@ const UserEdit = () => {
</Space>
</Form>
</div>
</Container>
{user && (user.is_current || user.is_service_user) && <Container style={{backgroundColor: "white", padding: "20px", borderRadius: "4px", boxSizing: "border-box", border: "0.5px solid #D9D9D9"}}>
</Card>
{user && (user.is_current || user.is_service_user) && <Card
bordered={true}
loading={loading}
style={{marginBottom: "7px"}}
>
<div style={{maxWidth: "800px"}}>
<Paragraph style={{textAlign: "left", whiteSpace: "pre-line", fontSize: "1.5em"}}>Access tokens</Paragraph>
<Row gutter={21} style={{marginTop: "-22px", marginBottom: "10px"}}>
<Paragraph
style={{textAlign: "left", whiteSpace: "pre-line", fontSize: "16px", fontWeight: "bold"}}>Access
tokens</Paragraph>
<Row gutter={21} style={{marginTop: "-16px", marginBottom: "10px"}}>
<Col xs={24} sm={24} md={20} lg={20} xl={20} xxl={20} span={20}>
<Paragraph type={"secondary"} style={{textAlign: "left", whiteSpace: "pre-line"}}>Access tokens give access to the Netbird API</Paragraph>
<Paragraph type={"secondary"}
style={{textAlign: "left", whiteSpace: "pre-line"}}>
Access tokens give access to NetBird API</Paragraph>
</Col>
<Col xs={24} sm={24} md={1} lg={1} xl={1} xxl={1} span={1} style={{marginTop: "-16px"}}>
{personalAccessTokens && personalAccessTokens.length > 0 && <Button type="primary" onClick={onClickAddNewPersonalAccessToken}>Create Token</Button>}
{personalAccessTokens && personalAccessTokens.length > 0 &&
<Button type="primary" onClick={onClickAddNewPersonalAccessToken}>Create
token</Button>}
</Col>
</Row>
{personalAccessTokens && personalAccessTokens.length > 0 &&
@@ -418,34 +439,62 @@ const UserEdit = () => {
pagination={false}
loading={tableSpin(loading)}
dataSource={tokenTable}>
<Column className={"non-highlighted-table-column"} sorter={(a, b) => ((a as TokenDataTable).created_at.localeCompare((b as TokenDataTable).created_at))}
<Column className={"non-highlighted-table-column"}
sorter={(a, b) => ((a as TokenDataTable).created_at.localeCompare((b as TokenDataTable).created_at))}
defaultSortOrder='descend'
render={(text, record, index) => {
return (<>
<Row>
<Col>
<Badge status={(record as TokenDataTable).status === "valid" ? "success" : "error"} style={{marginTop: "1px", marginRight: "5px", marginLeft: "0px"}}/>
<Badge
status={(record as TokenDataTable).status === "valid" ? "success" : "error"}
style={{
marginTop: "1px",
marginRight: "5px",
marginLeft: "0px"
}}/>
</Col>
<Col>
<Paragraph style={{fontSize: "16px", fontWeight: "500", margin: "0px", padding: "0px"}}>{(record as TokenDataTable).name}</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "13px", fontWeight: "400", margin: "0px", marginTop: "-2px", padding: "0px"}}>{"Created" + ((record as TokenDataTable).created_by_email && user.is_service_user ? " by " + (record as TokenDataTable).created_by_email : "") + " on " + fullDate((record as TokenDataTable).created_at)}</Paragraph>
<Paragraph style={{
margin: "0px",
padding: "0px"
}}>{(record as TokenDataTable).name}</Paragraph>
<Paragraph type={"secondary"} style={{
fontSize: "13px",
fontWeight: "400",
margin: "0px",
marginTop: "-2px",
padding: "0px"
}}>{"Created" + ((record as TokenDataTable).created_by_email && user.is_service_user ? " by " + (record as TokenDataTable).created_by_email : "") + " on " + fullDate((record as TokenDataTable).created_at)}</Paragraph>
</Col>
</Row>
</>)
</>)
}}/>
<Column render={(text, record, index) => {
return <>
<Paragraph type={"secondary"} style={{textAlign: "left", fontSize: "11px"}}>Expires on</Paragraph>
<Paragraph type={"secondary"} style={{textAlign: "left", marginTop: "-10px", marginBottom: "0", fontSize: "15px"}}>{fullDate((record as TokenDataTable).expiration_date)}</Paragraph>
</>
}}
return <>
<Paragraph type={"secondary"} style={{textAlign: "left", fontSize: "11px"}}>Expires
on</Paragraph>
<Paragraph type={"secondary"} style={{
textAlign: "left",
marginTop: "-10px",
marginBottom: "0",
fontSize: "15px"
}}>{fullDate((record as TokenDataTable).expiration_date)}</Paragraph>
</>
}}
/>
<Column render={(text, record, index) => {
return <>
<Paragraph type={"secondary"} style={{textAlign: "left", fontSize: "11px"}}>Last used</Paragraph>
<Paragraph type={"secondary"} style={{textAlign: "left", marginTop: "-10px", marginBottom: "0", fontSize: "15px"}}>{(record as TokenDataTable).last_used ? fullDate((record as TokenDataTable).last_used) : "Never"}</Paragraph>
</>
}}
return <>
<Paragraph type={"secondary"} style={{textAlign: "left", fontSize: "11px"}}>Last
used</Paragraph>
<Paragraph type={"secondary"} style={{
textAlign: "left",
marginTop: "-10px",
marginBottom: "0",
fontSize: "15px"
}}>{(record as TokenDataTable).last_used ? fullDate((record as TokenDataTable).last_used) : "Never"}</Paragraph>
</>
}}
/>
<Column align="right"
render={(text, record, index) => {
@@ -460,16 +509,23 @@ const UserEdit = () => {
/>
</Table>}
<Divider style={{marginTop: "-12px"}}></Divider>
{(personalAccessTokens === null || personalAccessTokens.length === 0) && <Space direction="vertical" size="small" align="start"
style={{display: 'flex', padding: '45px 0px', marginTop: "-40px", justifyContent: 'center'}}>
<Paragraph
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "16px"}}>
You don’t have any access tokens yet.
</Paragraph>
<Button type="primary" onClick={onClickAddNewPersonalAccessToken}>Create Token</Button>
</Space>}
{(personalAccessTokens === null || personalAccessTokens.length === 0) &&
<Space direction="vertical" size="small" align="start"
style={{
display: 'flex',
padding: '35px 0px',
marginTop: "-40px",
justifyContent: 'center'
}}>
<Paragraph
style={{textAlign: "start", whiteSpace: "pre-line"}}>
You don’t have any access tokens yet
</Paragraph>
<Button type="primary" onClick={onClickAddNewPersonalAccessToken}>Create token</Button>
</Space>}
</div>
</Container>}
</Card>}
</div>
<AddPATPopup/>
{confirmModalContextHolder}
+12 -14
View File
@@ -130,27 +130,25 @@ const AddPATPopup = () => {
}
width={460}
>
<Container style={{textAlign: "start"}}>
<Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
<Paragraph
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
{showPlainToken ? "Token created successfully!" : "Create a Personal Access Token"}
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
{showPlainToken ? "Token created successfully!" : "Create token"}
</Paragraph>
{!showPlainToken && <Paragraph type={"secondary"}
style={{
textAlign: "start",
fontSize: "14px",
whiteSpace: "pre-line",
marginTop: "-23px",
paddingBottom: "25px",
}}>
{"This token can be used to authenticate against" + "\n" + "NetBird's Public API."}
{"Use this token to access NetBird's public API"}
</Paragraph>}
{showPlainToken && <Paragraph type={"secondary"} style={{
textAlign: "start",
fontSize: "14px",
whiteSpace: "pre-line",
marginTop: "40px",
}}>{"This token will not be shown again, so be sure to copy it and" + "\n" + "store in a secure location."}</Paragraph>}
marginTop: "25px",
}}>{"This token won't be shown again, so be sure to copy and store it in a secure location"}</Paragraph>}
{!showPlainToken && <Form layout="vertical" hideRequiredMark form={form}
initialValues={{
expires_in: ExpiresInDefault,
@@ -160,14 +158,14 @@ const AddPATPopup = () => {
<Col span={24}>
<Row align="top">
<Col flex="auto">
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-8px"}}>Token name</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Create a name to identify the token easily</Paragraph>
<Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set an easily identifiable name for your token</Paragraph>
<Form.Item
name="name"
style={{marginTop: "-10px"}}
rules={[{
required: true,
message: 'Please add a name for this personal access token',
message: 'Please add a name for this token',
whitespace: true
}]}
>
@@ -179,9 +177,9 @@ const AddPATPopup = () => {
</Col>
</Row>
</Col>
<Col span={24} style={{textAlign: "left"}}>
<Paragraph style={{fontSize: "16px", fontWeight: "500"}}>Expires in</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Number of days this token is valid for</Paragraph>
<Col span={24} style={{textAlign: "left", marginTop: "10px"}}>
<Paragraph style={{fontWeight: "bold", 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"
style={{marginTop: "-10px"}}
+11 -11
View File
@@ -199,10 +199,10 @@ const AddServiceUserPopup = () => {
}
width={460}
>
<Container style={{textAlign: "start"}}>
<Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
<Paragraph
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
{"Add Service User"}
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
{"Add service user"}
</Paragraph>
<Paragraph type={"secondary"}
style={{
@@ -211,7 +211,7 @@ const AddServiceUserPopup = () => {
marginTop: "-23px",
paddingBottom: "25px",
}}>
{"Service Users are non-login users that are not associated with any specific person."}
{"Service users are non-login users that are not associated with any specific person."}
</Paragraph>
<Form layout="vertical" hideRequiredMark form={form}
initialValues={{
@@ -220,8 +220,8 @@ const AddServiceUserPopup = () => {
>
<Row gutter={16}>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a name to easily identify the user</Paragraph>
<Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a name to easily identify the user</Paragraph>
<Form.Item
name="name"
rules={[{
@@ -232,14 +232,14 @@ const AddServiceUserPopup = () => {
style={{marginTop: "-8px"}}
>
<Input
placeholder={'for example "Ansible User"'}
placeholder={'for example "Ansible user"'}
ref={inputNameRef}
autoComplete="off"/>
</Form.Item>
</Col>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Role</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a role for the user to assign dashboard access permissions</Paragraph>
<Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Role</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-15px"}}>Set a role for the user to assign access permissions</Paragraph>
<Form.Item
name="role"
rules={[{
@@ -256,8 +256,8 @@ const AddServiceUserPopup = () => {
</Form.Item>
</Col>
{/*<Col span={24}>*/}
{/* <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Auto-assigned groups</Paragraph>*/}
{/* <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>*/}
{/* <Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Auto-assigned groups</Paragraph>*/}
{/* <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-15px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>*/}
{/* <Form.Item*/}
{/* name="autoGroupsNames"*/}
{/* label="Auto-assigned groups"*/}
+10 -12
View File
@@ -12,7 +12,6 @@ import {
Typography
} from "antd";
import {Container} from "../Container";
import {CloseOutlined} from "@ant-design/icons";
import React, {useEffect, useRef, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "typesafe-actions";
@@ -20,7 +19,6 @@ import {useGetTokenSilently} from "../../utils/token";
import {actions as userActions} from "../../store/user";
import {actions as groupActions} from "../../store/group";
import {User, UserToSave} from "../../store/user/types";
import {Header} from "antd/es/layout/layout";
import {RuleObject} from "antd/lib/form";
import {CustomTagProps} from "rc-select/lib/BaseSelect";
@@ -200,10 +198,10 @@ const InviteUserPopup = () => {
}
width={460}
>
<Container style={{textAlign: "start"}}>
<Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
<Paragraph
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
{"Invite User"}
{"Invite user"}
</Paragraph>
<Paragraph type={"secondary"}
style={{
@@ -222,8 +220,8 @@ const InviteUserPopup = () => {
>
<Row gutter={16}>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a name to easily identify the user</Paragraph>
<Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a name to easily identify the user</Paragraph>
<Form.Item
name="name"
rules={[{
@@ -240,8 +238,8 @@ const InviteUserPopup = () => {
</Form.Item>
</Col>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Email</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Provide the email address of the user</Paragraph>
<Paragraph style={{ fontWeight: "bold", marginTop: "0px"}}>Email</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Provide the email address of the user</Paragraph>
<Form.Item
name="email"
rules={[{
@@ -259,8 +257,8 @@ const InviteUserPopup = () => {
</Form.Item>
</Col>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Role</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a role for the user to assign dashboard access permissions</Paragraph>
<Paragraph style={{ fontWeight: "bold", marginTop: "0px"}}>Role</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a role for the user to assign access permissions</Paragraph>
<Form.Item
name="role"
rules={[{
@@ -277,8 +275,8 @@ const InviteUserPopup = () => {
</Form.Item>
</Col>
<Col span={24}>
<Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Auto-assigned groups</Paragraph>
<Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>
<Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Auto-assigned groups</Paragraph>
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>
<Form.Item
name="autoGroupsNames"
tooltip="Every peer enrolled with this user will be automatically added to these groups"
+4 -3
View File
@@ -243,17 +243,18 @@ export const Routes = () => {
const onClickViewRoute = () => {
dispatch(routeActions.setSetupNewRouteHA(false));
dispatch(routeActions.setSetupNewRouteVisible(true));
dispatch(routeActions.setRoute({
id: routeToAction?.id || null,
network: routeToAction?.network,
network_id: routeToAction?.network_id,
description: routeToAction?.description,
peer: peerToPeerIP(routeToAction!.peer, peerNameToIP[routeToAction!.peer]),
peer: peerToPeerIP(routeToAction!.peer_name, routeToAction!.peer_ip),
metric: routeToAction?.metric,
masquerade: routeToAction?.masquerade,
enabled: routeToAction?.enabled
enabled: routeToAction?.enabled,
groups: routeToAction?.groups
} as Route))
dispatch(routeActions.setSetupNewRouteVisible(true));
}
const setRouteAndView = (route: RouteDataTable) => {
+421 -297
View File
File diff suppressed because it is too large. Load diff