84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { Button, Code, Menu, PasswordInput, Stack, Text } from '@mantine/core';
|
|
import { useForm } from '@mantine/form';
|
|
import { openModal } from '@mantine/modals';
|
|
import { showNotification } from '@mantine/notifications';
|
|
import { IconEdit, IconEditOff } from '@tabler/icons-react';
|
|
import axios from 'axios';
|
|
import { Trans, useTranslation } from 'next-i18next';
|
|
|
|
import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
|
|
|
|
function ModalContent() {
|
|
const { t } = useTranslation('settings/general/edit-mode-toggle');
|
|
const form = useForm({
|
|
initialValues: {
|
|
triedPassword: '',
|
|
},
|
|
});
|
|
return (
|
|
<form
|
|
onSubmit={form.onSubmit((values) => {
|
|
axios
|
|
.post('/api/configs/tryPassword', { tried: values.triedPassword, type: 'edit' })
|
|
.then((res) => {
|
|
showNotification({
|
|
title: t('notification.success.title'),
|
|
message: t('notification.success.message'),
|
|
color: 'green',
|
|
});
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 500);
|
|
})
|
|
.catch((_) => {
|
|
showNotification({
|
|
title: t('notification.error.title'),
|
|
message: t('notification.error.message'),
|
|
color: 'red',
|
|
});
|
|
});
|
|
})}
|
|
>
|
|
<Stack>
|
|
<Text size="sm">
|
|
<Trans
|
|
i18nKey={'settings/general/edit-mode-toggle:form.message'}
|
|
components={{ Code: <Code children/> }}
|
|
/>
|
|
</Text>
|
|
<PasswordInput
|
|
id="triedPassword"
|
|
label={t('form.label')}
|
|
autoFocus
|
|
required
|
|
{...form.getInputProps('triedPassword')}
|
|
/>
|
|
<Button type="submit">{t('form.submit')}</Button>
|
|
</Stack>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export function EditModeToggle() {
|
|
const { editModeEnabled } = useEditModeInformationStore();
|
|
const Icon = editModeEnabled ? IconEdit : IconEditOff;
|
|
const { t } = useTranslation('settings/general/edit-mode-toggle');
|
|
|
|
return (
|
|
<Menu.Item
|
|
closeMenuOnClick={false}
|
|
icon={<Icon strokeWidth={1.2} size={18} />}
|
|
onClick={() =>
|
|
openModal({
|
|
title: t('menu.toggle'),
|
|
centered: true,
|
|
size: 'lg',
|
|
children: <ModalContent />,
|
|
})
|
|
}
|
|
>
|
|
{editModeEnabled ? t('menu.enable') : t('menu.disable')}
|
|
</Menu.Item>
|
|
);
|
|
}
|