mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-18 06:47:02 +08:00
feat: logout style and finish logout process
This commit is contained in:
DiamondThree
@@ -27,6 +27,7 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
|
||||
<span
|
||||
onClick={async () => {
|
||||
await login();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
<GoogleLoginButton />
|
||||
|
||||
48
packages/app/src/components/logout-modal/icon.tsx
Normal file
48
packages/app/src/components/logout-modal/icon.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
export const Check = () => {
|
||||
return (
|
||||
<span>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_9266_16831)">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M5.83301 3.33331C4.4523 3.33331 3.33301 4.4526 3.33301 5.83331V14.1666C3.33301 15.5474 4.4523 16.6666 5.83301 16.6666H14.1663C15.5471 16.6666 16.6663 15.5474 16.6663 14.1666V5.83331C16.6663 4.4526 15.5471 3.33331 14.1663 3.33331H5.83301ZM14.6385 7.97059C14.8984 7.70982 14.8977 7.28771 14.6369 7.02778C14.3762 6.76785 13.9541 6.76852 13.6941 7.02929L8.62861 12.1111L6.30522 9.77929C6.04534 9.51847 5.62323 9.51771 5.36241 9.77759C5.10159 10.0375 5.10083 10.4596 5.36071 10.7204L8.03822 13.4076C8.36386 13.7344 8.89304 13.7344 9.21874 13.4077L14.6385 7.97059Z"
|
||||
fill="#888A9E"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_9266_16831">
|
||||
<rect width="20" height="20" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const UnCheck = () => {
|
||||
return (
|
||||
<span>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M14.1673 4.66665H5.83398C5.18965 4.66665 4.66732 5.18898 4.66732 5.83331V14.1666C4.66732 14.811 5.18965 15.3333 5.83398 15.3333H14.1673C14.8116 15.3333 15.334 14.811 15.334 14.1666V5.83331C15.334 5.18898 14.8116 4.66665 14.1673 4.66665ZM5.83398 3.33331C4.45327 3.33331 3.33398 4.4526 3.33398 5.83331V14.1666C3.33398 15.5474 4.45327 16.6666 5.83398 16.6666H14.1673C15.548 16.6666 16.6673 15.5474 16.6673 14.1666V5.83331C16.6673 4.4526 15.548 3.33331 14.1673 3.33331H5.83398Z"
|
||||
fill="#888A9E"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
118
packages/app/src/components/logout-modal/index.tsx
Normal file
118
packages/app/src/components/logout-modal/index.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { styled } from '@/styles';
|
||||
import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
|
||||
import { Button } from '@/ui/button';
|
||||
import { Check, UnCheck } from './icon';
|
||||
import { useState } from 'react';
|
||||
interface LoginModalProps {
|
||||
open: boolean;
|
||||
onClose: (wait: boolean) => void;
|
||||
}
|
||||
|
||||
export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
|
||||
const [localCache, setLocalCache] = useState(false);
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} data-testid="logout-modal">
|
||||
<ModalWrapper width={560} height={292}>
|
||||
<Header>
|
||||
<ModalCloseButton
|
||||
top={6}
|
||||
right={6}
|
||||
onClick={() => {
|
||||
onClose(true);
|
||||
}}
|
||||
/>
|
||||
</Header>
|
||||
<Content>
|
||||
<ContentTitle>{'Sign out?'}</ContentTitle>
|
||||
<SignDes>Set up an AFFINE account to sync data</SignDes>
|
||||
<StyleTips>
|
||||
{localCache ? (
|
||||
<StyleCheck
|
||||
onClick={() => {
|
||||
setLocalCache(false);
|
||||
}}
|
||||
>
|
||||
<Check></Check>
|
||||
</StyleCheck>
|
||||
) : (
|
||||
<StyleCheck
|
||||
onClick={() => {
|
||||
setLocalCache(true);
|
||||
}}
|
||||
>
|
||||
<UnCheck></UnCheck>
|
||||
</StyleCheck>
|
||||
)}
|
||||
Retain local cached data
|
||||
</StyleTips>
|
||||
<div>
|
||||
<Button
|
||||
style={{ marginRight: '16px' }}
|
||||
shape="round"
|
||||
onClick={() => {
|
||||
onClose(true);
|
||||
}}
|
||||
>
|
||||
Wait for Sync
|
||||
</Button>
|
||||
<Button
|
||||
type="danger"
|
||||
shape="round"
|
||||
onClick={() => {
|
||||
onClose(false);
|
||||
}}
|
||||
>
|
||||
Force Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
</Content>
|
||||
</ModalWrapper>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const Header = styled('div')({
|
||||
position: 'relative',
|
||||
height: '44px',
|
||||
});
|
||||
|
||||
const Content = styled('div')({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
});
|
||||
|
||||
const ContentTitle = styled('h1')({
|
||||
fontSize: '20px',
|
||||
lineHeight: '28px',
|
||||
fontWeight: 600,
|
||||
textAlign: 'center',
|
||||
paddingBottom: '16px',
|
||||
});
|
||||
|
||||
const SignDes = styled('div')(({ theme }) => {
|
||||
return {
|
||||
fontWeight: 400,
|
||||
color: theme.colors.textColor,
|
||||
fontSize: '16px',
|
||||
};
|
||||
});
|
||||
|
||||
const StyleCheck = styled('span')(() => {
|
||||
return {
|
||||
display: 'inline-block',
|
||||
cursor: 'pointer',
|
||||
|
||||
svg: {
|
||||
verticalAlign: 'sub',
|
||||
marginRight: '8px',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const StyleTips = styled('span')(() => {
|
||||
return {
|
||||
userSelect: 'none',
|
||||
};
|
||||
});
|
||||
@@ -11,19 +11,18 @@ import {
|
||||
PublishIcon,
|
||||
CloseIcon,
|
||||
} from '@blocksuite/icons';
|
||||
import { toast } from '@/ui/toast';
|
||||
import {
|
||||
WorkspaceAvatar,
|
||||
WorkspaceUnitAvatar,
|
||||
} from '@/components/workspace-avatar';
|
||||
import { useAppState } from '@/providers/app-state-provider';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useConfirm } from '@/providers/ConfirmProvider';
|
||||
import { useTranslation } from '@affine/i18n';
|
||||
import { LanguageMenu } from './languageMenu';
|
||||
|
||||
import { CloudIcon, LineIcon, LocalIcon, OfflineIcon } from './icons';
|
||||
import { LoginModal } from '../login-modal';
|
||||
import { LogoutModal } from '../logout-modal';
|
||||
interface WorkspaceModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
@@ -31,12 +30,12 @@ interface WorkspaceModalProps {
|
||||
|
||||
export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
|
||||
const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
|
||||
const { confirm } = useConfirm();
|
||||
const { workspaceList, currentWorkspace, user, logout, isOwner } =
|
||||
useAppState();
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const [loginOpen, setLoginOpen] = useState(false);
|
||||
const [logoutOpen, setLogoutOpen] = useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Modal open={open} onClose={onClose}>
|
||||
@@ -184,20 +183,21 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
|
||||
<div style={{ paddingTop: '25px' }}>
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
confirm({
|
||||
title: 'Sign out?',
|
||||
content: `All data has been stored in the cloud. `,
|
||||
confirmText: 'Sign out',
|
||||
cancelText: 'Cancel',
|
||||
}).then(async confirm => {
|
||||
if (confirm) {
|
||||
if (user) {
|
||||
await logout();
|
||||
router.replace(`/workspace`);
|
||||
toast('Enabled success');
|
||||
}
|
||||
}
|
||||
});
|
||||
setLogoutOpen(true);
|
||||
// confirm({
|
||||
// title: 'Sign out?',
|
||||
// content: `All data has been stored in the cloud. `,
|
||||
// confirmText: 'Sign out',
|
||||
// cancelText: 'Cancel',
|
||||
// }).then(async confirm => {
|
||||
// // if (confirm) {
|
||||
// // if (user) {
|
||||
// // await logout();
|
||||
// // router.replace(`/workspace`);
|
||||
// // toast('Enabled success');
|
||||
// // }
|
||||
// // }
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<LogOutIcon></LogOutIcon>
|
||||
@@ -212,6 +212,16 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
|
||||
setCreateWorkspaceOpen(false);
|
||||
}}
|
||||
></CreateWorkspaceModal>
|
||||
<LogoutModal
|
||||
open={logoutOpen}
|
||||
onClose={async wait => {
|
||||
if (!wait) {
|
||||
await logout();
|
||||
router.replace(`/workspace`);
|
||||
}
|
||||
setLogoutOpen(false);
|
||||
}}
|
||||
></LogoutModal>
|
||||
</ModalWrapper>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user