mirror of
https://github.com/netbirdio/dashboard.git
synced 2026-09-23 00:30:43 -07:00
Compare commits
5
Commits
v2.19.0
...
fix/aling_ui
| Author | SHA1 | Date | |
|---|---|---|---|
 braginini
|
9875bb0fcd | ||
|
braginini
|
ae586b4dfe | ||
|
braginini
|
c0a6965310 | ||
|
braginini
|
f12a923c61 | ||
|
braginini
|
ad798bbab4 |
No files matched your search
+136
-144
@@ -1,23 +1,23 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { actions as setupKeyActions } from "../store/setup-key";
|
||||
import { Button, Col, Divider, Form, Input, InputNumber, Modal, Row, Select, Switch, Tag, Typography } from "antd";
|
||||
import { RootState } from "typesafe-actions";
|
||||
import { FormSetupKey, SetupKey, SetupKeyToSave } from "../store/setup-key/types";
|
||||
import { formatDate, timeAgo } from "../utils/common";
|
||||
import { RuleObject } from "antd/lib/form";
|
||||
import { CustomTagProps } from "rc-select/lib/BaseSelect";
|
||||
import { Group } from "../store/group/types";
|
||||
import { useGetTokenSilently } from "../utils/token";
|
||||
import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {actions as setupKeyActions} from "../store/setup-key";
|
||||
import {Button, Col, Divider, Form, Input, InputNumber, Modal, Row, Select, Space, Switch, Tag, Typography} from "antd";
|
||||
import {RootState} from "typesafe-actions";
|
||||
import {FormSetupKey, SetupKey, SetupKeyToSave} from "../store/setup-key/types";
|
||||
import {formatDate, timeAgo} from "../utils/common";
|
||||
import {RuleObject} from "antd/lib/form";
|
||||
import {CustomTagProps} from "rc-select/lib/BaseSelect";
|
||||
import {Group} from "../store/group/types";
|
||||
import {useGetTokenSilently} from "../utils/token";
|
||||
import {expiresInToSeconds, ExpiresInValue} from "../views/ExpiresInInput";
|
||||
import moment from "moment";
|
||||
import { Container } from "./Container";
|
||||
import {Container} from "./Container";
|
||||
import Paragraph from "antd/es/typography/Paragraph";
|
||||
import { EditOutlined, LockOutlined } from "@ant-design/icons";
|
||||
import {EditOutlined, LockOutlined} from "@ant-design/icons";
|
||||
|
||||
const { Option } = Select;
|
||||
const { Text } = Typography;
|
||||
const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
|
||||
const {Option} = Select;
|
||||
const {Text} = Typography;
|
||||
const ExpiresInDefault: ExpiresInValue = {number: 30, interval: "day"};
|
||||
|
||||
const customExpiresFormat = (value: Date): string | null => {
|
||||
return formatDate(value);
|
||||
@@ -36,7 +36,7 @@ const customLastUsedFormat = (value: Date): string | null => {
|
||||
};
|
||||
|
||||
const SetupKeyNew = () => {
|
||||
const { getTokenSilently } = useGetTokenSilently();
|
||||
const {getTokenSilently} = useGetTokenSilently();
|
||||
const dispatch = useDispatch();
|
||||
const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible);
|
||||
const setupKey = useSelector((state: RootState) => state.setupKey.setupKey);
|
||||
@@ -53,7 +53,7 @@ const SetupKeyNew = () => {
|
||||
useEffect(() => {
|
||||
if (!editName) return;
|
||||
|
||||
inputNameRef.current!.focus({ cursor: "end" });
|
||||
inputNameRef.current!.focus({cursor: "end"});
|
||||
}, [editName]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -147,7 +147,7 @@ const SetupKeyNew = () => {
|
||||
};
|
||||
|
||||
const onChange = (data: any) => {
|
||||
setFormSetupKey({ ...formSetupKey, ...data });
|
||||
setFormSetupKey({...formSetupKey, ...data});
|
||||
};
|
||||
|
||||
const toggleEditName = (status: boolean) => {
|
||||
@@ -171,7 +171,7 @@ const SetupKeyNew = () => {
|
||||
};
|
||||
|
||||
const tagRender = (props: CustomTagProps) => {
|
||||
const { value, closable, onClose } = props;
|
||||
const {value, closable, onClose} = props;
|
||||
const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -183,7 +183,7 @@ const SetupKeyNew = () => {
|
||||
onMouseDown={onPreventMouseDown}
|
||||
closable={closable}
|
||||
onClose={onClose}
|
||||
style={{ marginRight: 3 }}
|
||||
style={{marginRight: 3}}
|
||||
>
|
||||
<strong>{value}</strong>
|
||||
</Tag>
|
||||
@@ -202,10 +202,10 @@ const SetupKeyNew = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tag color="blue" style={{ marginRight: 3 }}>
|
||||
<Tag color="blue" style={{marginRight: 3}}>
|
||||
<strong>{label}</strong>
|
||||
</Tag>
|
||||
<span style={{ fontSize: ".85em" }}>{peersCount}</span>
|
||||
<span style={{fontSize: ".85em"}}>{peersCount}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -213,10 +213,10 @@ const SetupKeyNew = () => {
|
||||
const dropDownRender = (menu: React.ReactElement) => (
|
||||
<>
|
||||
{menu}
|
||||
<Divider style={{ margin: "8px 0" }} />
|
||||
<Row style={{ padding: "0 8px 4px" }}>
|
||||
<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>
|
||||
<span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
|
||||
</Col>
|
||||
<Col flex="none">
|
||||
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -252,23 +252,10 @@ const SetupKeyNew = () => {
|
||||
return (
|
||||
<Modal
|
||||
style={{
|
||||
...{ maxWidth: window.screen.availWidth <= 425 ? "90%" : "414px" },
|
||||
...{maxWidth: window.screen.availWidth <= 425 ? "90%" : "414px"},
|
||||
}}
|
||||
open={setupNewKeyVisible}
|
||||
onCancel={onCancel}
|
||||
title={
|
||||
<Paragraph
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "18px",
|
||||
fontWeight: "600",
|
||||
lineHeight: "26px",
|
||||
color: "#252526",
|
||||
}}
|
||||
>
|
||||
{isEditMode ? "Setup Key overview" : "Create Setup Key"}
|
||||
</Paragraph>
|
||||
}
|
||||
footer={[
|
||||
<Container
|
||||
style={{
|
||||
@@ -290,45 +277,55 @@ const SetupKeyNew = () => {
|
||||
disabled={savedSetupKey.loading || !changesDetected()}
|
||||
onClick={handleFormSubmit}
|
||||
>
|
||||
{`${formSetupKey.id ? "Save" : "Create"} Key`}
|
||||
{`${formSetupKey.id ? "Save" : "Create"} key`}
|
||||
</Button>
|
||||
</Container>,
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
layout="vertical"
|
||||
hideRequiredMark
|
||||
form={form}
|
||||
onValuesChange={onChange}
|
||||
initialValues={{
|
||||
expiresIn: ExpiresInDefault,
|
||||
usage_limit: 1,
|
||||
}}
|
||||
>
|
||||
<Container
|
||||
style={{
|
||||
padding: 0,
|
||||
<Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
|
||||
<Paragraph
|
||||
style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
|
||||
{isEditMode ? "Setup key overview" : "Create setup key"}
|
||||
</Paragraph>
|
||||
<Paragraph type={"secondary"}
|
||||
style={{
|
||||
textAlign: "start",
|
||||
whiteSpace: "pre-line",
|
||||
marginTop: "-23px",
|
||||
paddingBottom: "25px",
|
||||
}}>
|
||||
{"Use this key to register new machines in your network"}
|
||||
</Paragraph>
|
||||
<Form
|
||||
layout="vertical"
|
||||
requiredMark={false}
|
||||
form={form}
|
||||
onValuesChange={onChange}
|
||||
initialValues={{
|
||||
expiresIn: ExpiresInDefault,
|
||||
usage_limit: 1,
|
||||
}}
|
||||
>
|
||||
<Row style={{ marginTop: "28px" }}>
|
||||
|
||||
<Row>
|
||||
{isEditMode ? (
|
||||
<></>
|
||||
) : (
|
||||
<Col span={24}>
|
||||
<Paragraph
|
||||
style={{ whiteSpace: "pre-line", fontSize: "16px", fontWeight: "600", margin: 0 }}
|
||||
>
|
||||
Key name
|
||||
<Paragraph style={{fontWeight: "bold"}}>
|
||||
Name
|
||||
</Paragraph>
|
||||
<Paragraph type={"secondary"} style={{marginTop: "-15px"}}>
|
||||
Set an easily identifiable name for your key
|
||||
</Paragraph>
|
||||
<Text style={{ color: "#818183" }}>Name the key to identify it easily</Text>
|
||||
</Col>
|
||||
)}
|
||||
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
style={{ marginBottom: "0px" }}
|
||||
style={{marginBottom: "0px", marginTop: "-10px"}}
|
||||
name="name"
|
||||
rules={[{ required: true, message: "Please enter key name." }]}
|
||||
rules={[{required: true, message: "Please enter key name."}]}
|
||||
>
|
||||
{isEditMode ? (
|
||||
<Input
|
||||
@@ -337,93 +334,89 @@ const SetupKeyNew = () => {
|
||||
placeholder={setupKey.name}
|
||||
autoComplete="off"
|
||||
ref={inputNameRef}
|
||||
suffix={<EditOutlined onClick={() => toggleEditName(true)} />}
|
||||
suffix={<EditOutlined onClick={() => toggleEditName(true)}/>}
|
||||
onPressEnter={() => toggleEditName(false)}
|
||||
onBlur={() => toggleEditName(false)}
|
||||
/>
|
||||
) : (
|
||||
<Input placeholder={`e.g. "AWS servers"`} />
|
||||
<Input placeholder={`e.g. "AWS servers"`}/>
|
||||
)}
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{isEditMode && (
|
||||
<Row style={{ marginTop: "28px" }}>
|
||||
<Row style={{marginTop: "20px"}}>
|
||||
<Col span={24}>
|
||||
<Paragraph
|
||||
style={{ whiteSpace: "pre-line", fontSize: "16px", fontWeight: "600", margin: 0 }}
|
||||
style={{whiteSpace: "pre-line", fontWeight: "bold", margin: 0}}
|
||||
>
|
||||
Key
|
||||
<Tag
|
||||
color={`${formSetupKey.state === "valid" ? "green" : "red"}`}
|
||||
style={{ marginLeft: "10px", borderRadius: "2px", fontWeight: "500" }}
|
||||
style={{marginLeft: "10px", borderRadius: "2px", fontWeight: "500"}}
|
||||
>
|
||||
{formSetupKey.state}
|
||||
</Tag>
|
||||
</Paragraph>
|
||||
<Input
|
||||
style={{ marginTop: "10px" }}
|
||||
style={{marginTop: "10px"}}
|
||||
disabled
|
||||
value={formSetupKey.key}
|
||||
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
|
||||
suffix={<LockOutlined style={{color: "#BFBFBF"}}/>}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Row style={{ marginTop: "28px" }}>
|
||||
{isEditMode ? (
|
||||
<Row style={{ fontSize: "16px" }}>
|
||||
<Paragraph style={{ whiteSpace: "pre-line", margin: 0, fontWeight: "600" }}>
|
||||
{formSetupKey.type === "one-off" ? "One-off" : "Reusable"}
|
||||
</Paragraph>
|
||||
<Text style={{ marginLeft: "5px", color: "#818183" }}>type</Text>
|
||||
</Row>
|
||||
) : (
|
||||
<Row>
|
||||
<Col style={{ width: "80%" }}>
|
||||
<Paragraph
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "16px",
|
||||
margin: 0,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Reusable
|
||||
</Paragraph>
|
||||
<Text style={{ color: "#818183" }}>
|
||||
This type of a setup key allows to enroll multiple peers
|
||||
</Text>
|
||||
</Col>
|
||||
<Form.Item
|
||||
name="reusable"
|
||||
valuePropName="checked"
|
||||
{!isEditMode && (
|
||||
<Row
|
||||
style={{marginTop: "20px"}}
|
||||
justify={"space-between"}>
|
||||
<Col span={18}>
|
||||
<Paragraph
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "end",
|
||||
flexGrow: 1,
|
||||
whiteSpace: "pre-line",
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
onChange={(checked) => {
|
||||
setFormSetupKey({
|
||||
...formSetupKey,
|
||||
type: checked ? "reusable" : "one-off",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
)}
|
||||
</Row>
|
||||
Reusable
|
||||
</Paragraph>
|
||||
<Text type={"secondary"}>
|
||||
Use this type to enroll multiple peers
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Row justify={"end"}>
|
||||
<Form.Item
|
||||
name="reusable"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch
|
||||
onChange={(checked) => {
|
||||
setFormSetupKey({
|
||||
...formSetupKey,
|
||||
type: checked ? "reusable" : "one-off",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>)}
|
||||
|
||||
<Row style={{ marginTop: "28px" }}>
|
||||
{isEditMode && (
|
||||
<Row style={{marginTop: "20px"}}>
|
||||
<Paragraph style={{whiteSpace: "pre-line", margin: 0, fontWeight: "bold"}}>
|
||||
{formSetupKey.type === "one-off" ? "One-off" : "Reusable"}
|
||||
</Paragraph>
|
||||
<Text type={"secondary"} style={{marginLeft: "5px"}}>type</Text>
|
||||
</Row>)}
|
||||
|
||||
<Row style={{marginTop: "10px"}}>
|
||||
<Col span={24}>
|
||||
<Paragraph
|
||||
style={{ whiteSpace: "pre-line", fontSize: "16px", margin: 0, fontWeight: "600" }}
|
||||
style={{whiteSpace: "pre-line", margin: 0, fontWeight: "bold"}}
|
||||
>
|
||||
{isEditMode ? "Available uses" : "Usage limit"}
|
||||
</Paragraph>
|
||||
@@ -433,12 +426,12 @@ const SetupKeyNew = () => {
|
||||
<Input
|
||||
disabled
|
||||
value={formSetupKey.usage_limit}
|
||||
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
|
||||
style={{ width: "104px" }}
|
||||
suffix={<LockOutlined style={{color: "#BFBFBF"}}/>}
|
||||
style={{width: "104px"}}
|
||||
/>
|
||||
) : (
|
||||
<Form.Item
|
||||
style={{ marginTop: "5px", width: "112px", marginBottom: "5px" }}
|
||||
style={{marginTop: "5px", width: "112px", marginBottom: "5px"}}
|
||||
name="usage_limit"
|
||||
>
|
||||
<InputNumber
|
||||
@@ -453,37 +446,37 @@ const SetupKeyNew = () => {
|
||||
<></>
|
||||
) : (
|
||||
<Col span={24}>
|
||||
<Text style={{ color: "#818183" }}>
|
||||
1 usage = 1 peer. E.g., set to 30 if you want to enroll 30 peers
|
||||
<Text type={"secondary"}>
|
||||
For example, set to 30 if you want to enroll 30 peers
|
||||
</Text>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
<Row style={{ marginTop: "20px" }}>
|
||||
<Row style={{marginTop: "15px"}}>
|
||||
{isEditMode ? (
|
||||
<Container style={{ width: "100%", padding: 0, margin: 0 }}>
|
||||
<Container style={{width: "100%", padding: 0, margin: 0}}>
|
||||
<Row>
|
||||
<Col span={11}>
|
||||
<Paragraph style={{ fontSize: "16px", margin: 0, fontWeight: "600" }}>
|
||||
<Paragraph style={{margin: 0, fontWeight: "bold"}}>
|
||||
Expires
|
||||
</Paragraph>
|
||||
<Row>
|
||||
<Input
|
||||
disabled
|
||||
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
|
||||
suffix={<LockOutlined style={{color: "#BFBFBF"}}/>}
|
||||
value={customExpiresFormat(new Date(formSetupKey.expires))!}
|
||||
/>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col span={11} offset={1}>
|
||||
<Paragraph style={{ fontSize: "16px", margin: 0, fontWeight: "600" }}>
|
||||
<Paragraph style={{margin: 0, fontWeight: "bold"}}>
|
||||
Last used
|
||||
</Paragraph>
|
||||
<Row>
|
||||
<Input
|
||||
disabled
|
||||
suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
|
||||
suffix={<LockOutlined style={{color: "#BFBFBF"}}/>}
|
||||
value={customLastUsedFormat(new Date(formSetupKey.last_used))!}
|
||||
/>
|
||||
</Row>
|
||||
@@ -496,9 +489,8 @@ const SetupKeyNew = () => {
|
||||
<Paragraph
|
||||
style={{
|
||||
whiteSpace: "pre-line",
|
||||
fontSize: "16px",
|
||||
margin: 0,
|
||||
fontWeight: "600",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Expires in
|
||||
@@ -512,7 +504,7 @@ const SetupKeyNew = () => {
|
||||
marginBottom: "0px",
|
||||
}}
|
||||
name="expiresIn"
|
||||
rules={[{ required: true, message: "Please enter expiration date." }]}
|
||||
rules={[{required: true, message: "Please enter expiration date."}]}
|
||||
>
|
||||
<Col
|
||||
style={{
|
||||
@@ -541,37 +533,37 @@ const SetupKeyNew = () => {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
|
||||
<Col span={24} style={{ marginTop: "5px" }}>
|
||||
<Text style={{ color: "#818183" }}>Should be between 1 and 180 days</Text>
|
||||
<Col span={24} style={{marginTop: "5px"}}>
|
||||
<Text type={"secondary"}>Should be between 1 and 180 days</Text>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
|
||||
<Row style={{ marginTop: "20px" }}>
|
||||
<Row style={{marginTop: "20px"}}>
|
||||
<Col span={24}>
|
||||
<Paragraph
|
||||
style={{ whiteSpace: "pre-line", fontSize: "16px", margin: 0, fontWeight: "600" }}
|
||||
style={{whiteSpace: "pre-line", margin: 0, fontWeight: "bold"}}
|
||||
>
|
||||
Auto-assigned groups
|
||||
</Paragraph>
|
||||
{isEditMode ? (
|
||||
<></>
|
||||
) : (
|
||||
<Text style={{ color: "#818183" }}>
|
||||
<Text type={"secondary"}>
|
||||
These groups will be automatically assigned to peers enrolled with this key
|
||||
</Text>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
style={{ marginTop: "5px", marginBottom: 0 }}
|
||||
style={{marginTop: "5px", marginBottom: 0}}
|
||||
name="autoGroupNames"
|
||||
rules={[{ validator: selectValidator }]}
|
||||
rules={[{validator: selectValidator}]}
|
||||
>
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: "100%" }}
|
||||
style={{width: "100%"}}
|
||||
placeholder="Associate groups with the key"
|
||||
tagRender={tagRender}
|
||||
dropdownRender={dropDownRender}
|
||||
@@ -585,17 +577,17 @@ const SetupKeyNew = () => {
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={{ marginTop: "40px", marginBottom: "28px" }}>
|
||||
<Text style={{ color: "#818183" }}>
|
||||
<Row style={{marginTop: "40px", marginBottom: "28px"}}>
|
||||
<Text type={"secondary"}>
|
||||
Learn more about
|
||||
<a target="_blank" rel="noreferrer" href="https://netbird.io/docs/overview/setup-keys">
|
||||
{" "}
|
||||
Setup Keys
|
||||
setup keys
|
||||
</a>
|
||||
</Text>
|
||||
</Row>
|
||||
</Container>
|
||||
</Form>
|
||||
</Form>
|
||||
</Container>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
+110
-54
@@ -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}
|
||||
|
||||
@@ -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"}}
|
||||
|
||||
@@ -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"*/}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -372,7 +372,7 @@ export const SetupKeys = () => {
|
||||
<Row justify="end">
|
||||
<Col>
|
||||
<Button type="primary" onClick={onClickAddNewSetupKey}>
|
||||
Add Key
|
||||
Add key
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -418,7 +418,7 @@ export const SetupKeys = () => {
|
||||
color: "#252526",
|
||||
}}
|
||||
>
|
||||
Create Setup Key
|
||||
Create setup key
|
||||
</Text>
|
||||
</Col>
|
||||
<Col style={{ marginTop: "17px" }}>
|
||||
@@ -429,8 +429,8 @@ export const SetupKeys = () => {
|
||||
lineHeight: "22px",
|
||||
}}
|
||||
>
|
||||
Manage Setup Keys to register new machines in your network. The key
|
||||
links the machine to an account during initial setup.
|
||||
Manage setup keys to register new machines in your network. The key
|
||||
links machines to your account during initial setup.
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@@ -457,7 +457,7 @@ export const SetupKeys = () => {
|
||||
}}
|
||||
onClick={onClickAddNewSetupKey}
|
||||
>
|
||||
Add Key
|
||||
Add key
|
||||
</Button>
|
||||
</Col>
|
||||
</Container>
|
||||
|
||||
Reference in new issue
Block a user