diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx index f87571e..5e07f14 100644 --- a/frontend/src/pages/SettingsPage.tsx +++ b/frontend/src/pages/SettingsPage.tsx @@ -1,12 +1,13 @@ import React from 'react' import {connect} from 'react-redux' -import {Message, Icon, Grid, Form, Button, TextArea, Ref, Input, Header, Divider} from 'semantic-ui-react' +import {Message, Icon, Grid, Form, Button, TextArea, Ref, Input, Header, Divider, Popup} from 'semantic-ui-react' import {useForm} from 'react-hook-form' import {setLogin} from 'reducers/login' import {Page, Stats} from 'components' import api from 'api' import {findInput} from 'utils' +import config from 'config.json' const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(function SettingsPage({login, setLogin}) { const {register, handleSubmit} = useForm() @@ -73,6 +74,31 @@ const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(func ) }) +function CopyInput({value, ...props}) { + const [success, setSuccess] = React.useState(null) + const onClick = async () => { + try { + await window.navigator?.clipboard?.writeText(value) + setSuccess(true) + } catch (err) { + setSuccess(false) + } finally { + setTimeout(() => { + setSuccess(null) + }, 2000) + } + } + + return ( + } + position="top right" + open={success != null} + content={success ? 'Copied.' : 'Failed to copy.'} + /> + ) +} + const selectField = findInput((ref) => ref?.select()) function ApiKeyDialog({login}) { @@ -93,15 +119,19 @@ function ApiKeyDialog({login}) { configuration interface to allow direct upload from the device.

Please protect your API Key carefully as it allows full control over your account.

- {show ? ( - - - - ) : ( - - )} +
+ {show ? ( + + + + ) : ( + + )} +
+

The API URL should be set to:

+ ) }