154 lines
4.1 KiB
JavaScript
154 lines
4.1 KiB
JavaScript
import { Preferences } from '@capacitor/preferences'
|
|
import { Box, Button, Container, Input, Sheet, Typography } from '@mui/joy'
|
|
import React from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { API_URL } from '../../Config'
|
|
import Logo from '../../Logo'
|
|
import { useNotification } from '../../service/NotificationProvider'
|
|
import { apiManager } from '../../utils/TokenManager'
|
|
const LoginSettings = () => {
|
|
const Navigate = useNavigate()
|
|
const [serverURL, setServerURL] = React.useState('')
|
|
const { showError } = useNotification()
|
|
|
|
React.useEffect(() => {
|
|
Preferences.get({ key: 'customServerUrl' }).then(result => {
|
|
setServerURL(result.value || API_URL)
|
|
})
|
|
}, [])
|
|
|
|
const isValidServerURL = () => {
|
|
return serverURL.match(/^(http|https):\/\/[^ "]+$/)
|
|
}
|
|
|
|
return (
|
|
<Container component='main' maxWidth='xs'>
|
|
<Box
|
|
sx={{
|
|
marginTop: 4,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Sheet
|
|
component='form'
|
|
sx={{
|
|
mt: 1,
|
|
width: '100%',
|
|
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: 2,
|
|
borderRadius: '8px',
|
|
boxShadow: 'md',
|
|
}}
|
|
>
|
|
<Logo />
|
|
|
|
<Typography level='h2'>
|
|
Done
|
|
<span
|
|
style={{
|
|
color: '#06b6d4',
|
|
}}
|
|
>
|
|
tick
|
|
</span>
|
|
</Typography>
|
|
|
|
<Typography level='body2' alignSelf={'start'} mt={4}>
|
|
Server URL
|
|
</Typography>
|
|
<Input
|
|
margin='normal'
|
|
required
|
|
fullWidth
|
|
id='serverURL'
|
|
name='serverURL'
|
|
autoFocus
|
|
value={serverURL}
|
|
onChange={e => {
|
|
setServerURL(e.target.value)
|
|
}}
|
|
/>
|
|
|
|
<Typography mt={1} level='body-xs'>
|
|
Change the server URL to connect to a different server, such as your
|
|
own self-hosted Donetick server.
|
|
</Typography>
|
|
<Typography mt={1} level='body-xs'>
|
|
Please ensure to include the protocol (http:// or https://) and the
|
|
port number if necessary (default Donetick port is 2021).
|
|
</Typography>
|
|
<Button
|
|
fullWidth
|
|
size='lg'
|
|
variant='solid'
|
|
sx={{
|
|
width: '100%',
|
|
mt: 3,
|
|
mb: 2,
|
|
border: 'moccasin',
|
|
borderRadius: '8px',
|
|
}}
|
|
onClick={() => {
|
|
if (serverURL === '') {
|
|
Preferences.set({
|
|
key: 'customServerUrl',
|
|
value: API_URL,
|
|
}).then(() => {
|
|
Navigate('/login')
|
|
})
|
|
return
|
|
}
|
|
if (!isValidServerURL()) {
|
|
showError({
|
|
title: 'Invalid Server URL',
|
|
message:
|
|
'Please enter a valid server URL with protocol (http:// or https://)',
|
|
})
|
|
return
|
|
}
|
|
Preferences.set({
|
|
key: 'customServerUrl',
|
|
value: serverURL,
|
|
}).then(() => {
|
|
apiManager.updateApiURL(serverURL + '/api/v1')
|
|
Navigate('/login')
|
|
})
|
|
}}
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
size='lg'
|
|
variant='soft'
|
|
color='danger'
|
|
sx={{
|
|
width: '100%',
|
|
|
|
mb: 2,
|
|
border: 'moccasin',
|
|
borderRadius: '8px',
|
|
}}
|
|
onClick={() => {
|
|
Preferences.set({ key: 'customServerUrl', value: API_URL }).then(
|
|
() => {
|
|
Navigate('/login')
|
|
},
|
|
)
|
|
}}
|
|
>
|
|
Cancel and Reset
|
|
</Button>
|
|
</Sheet>
|
|
</Box>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default LoginSettings
|