118 lines
4.2 KiB
TypeScript
118 lines
4.2 KiB
TypeScript
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
|
|
import { STRING_SIGN_OUT_CONFIRMATION } from '@/Constants/Strings'
|
|
import { WebApplication } from '@/Application/Application'
|
|
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { ApplicationGroup } from '@/Application/ApplicationGroup'
|
|
import { isDesktopApplication } from '@/Utils'
|
|
import Button from '@/Components/Button/Button'
|
|
import Icon from '../Icon/Icon'
|
|
import AlertDialog from '../AlertDialog/AlertDialog'
|
|
|
|
type Props = {
|
|
application: WebApplication
|
|
viewControllerManager: ViewControllerManager
|
|
applicationGroup: ApplicationGroup
|
|
}
|
|
|
|
const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewControllerManager, applicationGroup }) => {
|
|
const [deleteLocalBackups, setDeleteLocalBackups] = useState(false)
|
|
|
|
const cancelRef = useRef<HTMLButtonElement>(null)
|
|
const closeDialog = useCallback(() => {
|
|
viewControllerManager.accountMenuController.setSigningOut(false)
|
|
}, [viewControllerManager.accountMenuController])
|
|
|
|
const [localBackupsCount, setLocalBackupsCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
application.desktopDevice?.localBackupsCount().then(setLocalBackupsCount).catch(console.error)
|
|
}, [viewControllerManager.accountMenuController.signingOut, application.desktopDevice])
|
|
|
|
const workspaces = applicationGroup.getDescriptors()
|
|
const showWorkspaceWarning = workspaces.length > 1 && isDesktopApplication()
|
|
|
|
const confirm = useCallback(() => {
|
|
if (deleteLocalBackups) {
|
|
application.signOutAndDeleteLocalBackups().catch(console.error)
|
|
} else {
|
|
application.user.signOut().catch(console.error)
|
|
}
|
|
closeDialog()
|
|
}, [application, closeDialog, deleteLocalBackups])
|
|
|
|
return (
|
|
<AlertDialog closeDialog={closeDialog}>
|
|
<div className="flex items-center justify-between text-lg font-bold">
|
|
Sign out workspace?
|
|
<button className="rounded p-1 font-bold hover:bg-contrast" onClick={closeDialog}>
|
|
<Icon type="close" />
|
|
</button>
|
|
</div>
|
|
<div className="sk-panel-row">
|
|
<div>
|
|
<p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
|
|
{showWorkspaceWarning && (
|
|
<>
|
|
<br />
|
|
<p className="text-base text-foreground lg:text-sm">
|
|
<strong>Note: </strong>
|
|
Because you have other workspaces signed in, this sign out may leave logs and other metadata of your
|
|
session on this device. For a more robust sign out that performs a hard clear of all app-related data,
|
|
use the <i>Sign out all workspaces</i> option under <i>Switch workspace</i>.
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{localBackupsCount > 0 && (
|
|
<div className="flex">
|
|
<div className="sk-panel-row"></div>
|
|
<label className="flex items-center">
|
|
<input
|
|
type="checkbox"
|
|
checked={deleteLocalBackups}
|
|
onChange={(event) => {
|
|
setDeleteLocalBackups((event.target as HTMLInputElement).checked)
|
|
}}
|
|
/>
|
|
<span className="ml-2">
|
|
Delete {localBackupsCount} local backup file
|
|
{localBackupsCount > 1 ? 's' : ''}
|
|
</span>
|
|
</label>
|
|
<button
|
|
className="sk-a ml-1.5 cursor-pointer rounded p-0 capitalize"
|
|
onClick={() => {
|
|
application.desktopDevice?.viewlocalBackups()
|
|
}}
|
|
>
|
|
View backup files
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 flex justify-end gap-2">
|
|
<Button ref={cancelRef} onClick={closeDialog}>
|
|
Cancel
|
|
</Button>
|
|
<Button primary colorStyle="danger" onClick={confirm}>
|
|
{application.hasAccount() ? 'Sign Out' : 'Delete Workspace'}
|
|
</Button>
|
|
</div>
|
|
</AlertDialog>
|
|
)
|
|
}
|
|
|
|
ConfirmSignoutModal.displayName = 'ConfirmSignoutModal'
|
|
|
|
const ConfirmSignoutContainer = (props: Props) => {
|
|
if (!props.viewControllerManager.accountMenuController.signingOut) {
|
|
return null
|
|
}
|
|
return <ConfirmSignoutModal {...props} />
|
|
}
|
|
|
|
export default observer(ConfirmSignoutContainer)
|