diff --git a/src/components/SetupKeyNew.tsx b/src/components/SetupKeyNew.tsx index 944ad5da..49f473ab 100644 --- a/src/components/SetupKeyNew.tsx +++ b/src/components/SetupKeyNew.tsx @@ -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) => { event.preventDefault(); event.stopPropagation(); @@ -183,7 +183,7 @@ const SetupKeyNew = () => { onMouseDown={onPreventMouseDown} closable={closable} onClose={onClose} - style={{ marginRight: 3 }} + style={{marginRight: 3}} > {value} @@ -202,10 +202,10 @@ const SetupKeyNew = () => { return ( <> - + {label} - {peersCount} + {peersCount} ); }; @@ -213,10 +213,10 @@ const SetupKeyNew = () => { const dropDownRender = (menu: React.ReactElement) => ( <> {menu} - - + + - Add new group by pressing "Enter" + Add new group by pressing "Enter" @@ -252,23 +252,10 @@ const SetupKeyNew = () => { return ( - {isEditMode ? "Setup Key overview" : "Create Setup Key"} - - } footer={[ { disabled={savedSetupKey.loading || !changesDetected()} onClick={handleFormSubmit} > - {`${formSetupKey.id ? "Save" : "Create"} Key`} + {`${formSetupKey.id ? "Save" : "Create"} key`} , ]} > -
- + + {isEditMode ? "Setup key overview" : "Create setup key"} + + + {"Use this key to register new machines in your network"} + +
- + + {isEditMode ? ( <> ) : ( - - Key name + + Name + + + Set an easily identifiable name for your key - Name the key to identify it easily )} {isEditMode ? ( {isEditMode && ( - + Key {formSetupKey.state} } + suffix={} /> )} - - - {isEditMode ? ( - - - {formSetupKey.type === "one-off" ? "One-off" : "Reusable"} - - type - - ) : ( - - - - Reusable - - - This type of a setup key allows to enroll multiple peers - - - + + - { - setFormSetupKey({ - ...formSetupKey, - type: checked ? "reusable" : "one-off", - }); - }} - /> - - - )} - + Reusable + + + Use this type to enroll multiple peers + + + + + + { + setFormSetupKey({ + ...formSetupKey, + type: checked ? "reusable" : "one-off", + }); + }} + /> + + + + )} - + {isEditMode && ( + + + {formSetupKey.type === "one-off" ? "One-off" : "Reusable"} + + key + )} + + {isEditMode ? "Available uses" : "Usage limit"} - - {isEditMode ? ( + + + {isEditMode && ( + } - style={{ width: "104px" }} + value={formSetupKey.usage_limit - formSetupKey.used_times} + suffix={} + style={{width: "104px", marginTop: "5px"}} /> - ) : ( + + )} + + + {!isEditMode && ( + - )} - - {isEditMode ? ( - <> - ) : ( - - - 1 usage = 1 peer. E.g., set to 30 if you want to enroll 30 peers - + + For example, set to 30 if you want to enroll 30 peers + + )} - - {isEditMode ? ( - + {!isEditMode && ( + + + + Expires in + + + + + + + + Should be between 1 and 180 days + + + )} + + {isEditMode && ( + + + - + Expires } + suffix={} value={customExpiresFormat(new Date(formSetupKey.expires))!} /> - + Last used } + style={{marginTop: "5px"}} + suffix={} value={customLastUsedFormat(new Date(formSetupKey.last_used))!} /> - ) : ( - <> - - - Expires in - - - - - - - - Days - - - - - - Should be between 1 and 180 days - - - )} - + )} - + Auto-assigned groups {isEditMode ? ( <> ) : ( - + These groups will be automatically assigned to peers enrolled with this key )} - - + + Learn more about {" "} - Setup Keys + setup keys -
-
+ + - ); + ) + ; }; -export default SetupKeyNew; +export default SetupKeyNew; \ No newline at end of file diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx index ddad6574..0e203d67 100644 --- a/src/views/SetupKeys.tsx +++ b/src/views/SetupKeys.tsx @@ -372,7 +372,7 @@ export const SetupKeys = () => { @@ -418,7 +418,7 @@ export const SetupKeys = () => { color: "#252526", }} > - Create Setup Key + Create setup key @@ -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. { }} onClick={onClickAddNewSetupKey} > - Add Key + Add key @@ -592,4 +592,4 @@ export const SetupKeys = () => { ); }; -export default SetupKeys; +export default SetupKeys; \ No newline at end of file