jan/web/screens/Settings/Advanced/FactoryReset/ModalConfirmReset.tsx
2024-09-18 17:46:53 +08:00

82 lines
2.8 KiB
TypeScript

import React, { useCallback, useState } from 'react'
import { Modal, ModalClose, Button, Input, Checkbox } from '@janhq/joi'
import { atom, useAtom, useAtomValue } from 'jotai'
import useFactoryReset from '@/hooks/useFactoryReset'
import { defaultJanDataFolderAtom } from '@/helpers/atoms/App.atom'
export const modalValidationAtom = atom(false)
const ModalConfirmReset = () => {
const [modalValidation, setModalValidation] = useAtom(modalValidationAtom)
const defaultJanDataFolder = useAtomValue(defaultJanDataFolderAtom)
const { resetAll } = useFactoryReset()
const [inputValue, setInputValue] = useState('')
const [currentDirectoryChecked, setCurrentDirectoryChecked] = useState(true)
const onFactoryResetClick = useCallback(() => {
setModalValidation(false)
resetAll(currentDirectoryChecked)
}, [currentDirectoryChecked, resetAll, setModalValidation])
return (
<Modal
open={modalValidation}
onOpenChange={() => setModalValidation(false)}
title="Are you sure you want to reset to default settings?"
content={
<div>
<p className="text-[hsla(var(--text-secondary))]">
Restore app to initial state, erasing all models and chat history.
This action is irreversible and recommended only if the application
is corrupted.
</p>
<div className="my-4">
<p className="text-[hsla(var(--text-secondary)] mb-2 mt-1">{`To confirm, please enter the word "RESET" below:`}</p>
<Input
placeholder='Enter "RESET"'
onChange={(e) => setInputValue(e.target.value)}
/>
</div>
<div className="flex flex-shrink-0 items-start space-x-1">
<Checkbox
id="currentDirectory"
checked={currentDirectoryChecked}
onChange={(e) => setCurrentDirectoryChecked(e.target.checked)}
label="Keep the current app data location"
helperDescription={
<p className="mt-1 leading-relaxed">
Otherwise it will reset back to its original location at:{' '}
<span className="font-medium">{defaultJanDataFolder}</span>
</p>
}
/>
</div>
<div className="mt-4 flex justify-end gap-x-2">
<ModalClose asChild onClick={() => setModalValidation(false)}>
<Button theme="ghost">Cancel</Button>
</ModalClose>
<ModalClose asChild>
<Button
autoFocus
theme="destructive"
disabled={inputValue !== 'RESET'}
onClick={onFactoryResetClick}
>
Reset Now
</Button>
</ModalClose>
</div>
</div>
}
/>
)
}
export default ModalConfirmReset