frontend: add API URL in settings page next to API key, and add copy buttons for both values (fixes #97)

This commit is contained in:
Paul Bienkowski 2021-09-14 20:56:13 +02:00
parent 1705d03683
commit 85d93fe598

View file

@ -1,12 +1,13 @@
import React from 'react' import React from 'react'
import {connect} from 'react-redux' 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 {useForm} from 'react-hook-form'
import {setLogin} from 'reducers/login' import {setLogin} from 'reducers/login'
import {Page, Stats} from 'components' import {Page, Stats} from 'components'
import api from 'api' import api from 'api'
import {findInput} from 'utils' import {findInput} from 'utils'
import config from 'config.json'
const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(function SettingsPage({login, setLogin}) { const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(function SettingsPage({login, setLogin}) {
const {register, handleSubmit} = useForm() 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 (
<Popup
trigger={<Input {...props} value={value} fluid action={{icon: 'copy', onClick}} />}
position="top right"
open={success != null}
content={success ? 'Copied.' : 'Failed to copy.'}
/>
)
}
const selectField = findInput((ref) => ref?.select()) const selectField = findInput((ref) => ref?.select())
function ApiKeyDialog({login}) { function ApiKeyDialog({login}) {
@ -93,15 +119,19 @@ function ApiKeyDialog({login}) {
configuration interface to allow direct upload from the device. configuration interface to allow direct upload from the device.
</p> </p>
<p>Please protect your API Key carefully as it allows full control over your account.</p> <p>Please protect your API Key carefully as it allows full control over your account.</p>
<div style={{height: 40, marginBottom: 16}}>
{show ? ( {show ? (
<Ref innerRef={selectField}> <Ref innerRef={selectField}>
<Input value={login.apiKey} fluid /> <CopyInput label="Personal API key" value={login.apiKey} />
</Ref> </Ref>
) : ( ) : (
<Button onClick={onClick}> <Button onClick={onClick}>
<Icon name="lock" /> Show API Key <Icon name="lock" /> Show API Key
</Button> </Button>
)} )}
</div>
<p>The API URL should be set to:</p>
<CopyInput label="API URL" value={config.apiUrl} />
</> </>
) )
} }