Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 13:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

init: the first public commit for AFFiNE

Browse Source
This commit is contained in:
DarkSky
2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
libs/components/account/src/error.tsx Normal file
View File

@@ -0,0 +1,221 @@
import { Link } from 'react-router-dom';
import style9 from 'style9';
import { getAuth, signOut } from 'firebase/auth';
import { MuiBox as Box } from '@toeverything/components/ui';
import { keyframes } from '@emotion/react';
import { LOGOUT_LOCAL_STORAGE, LOGOUT_COOKIES } from '@toeverything/utils';
const styles = style9.create({
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: 'calc( 100vh - 64px )',
},
});
type ErrorProps = {
title?: string;
subTitle?: string;
action1Text?: string;
action1Route?: string;
action2Text?: string;
action2Route?: string;
clearOnClick?: boolean;
};
const floatAnimation = keyframes`
100% { transform: translateY(20px) }
`;
/**
* Exception related pages
*/
export function Error({
title = 'Page Not Found',
subTitle,
action1Text,
action1Route,
action2Text,
action2Route,
clearOnClick = false,
}: ErrorProps) {
return (
<Box
sx={{
height: '100vh',
backgroundColor: '#2F3242',
position: 'relative',
'& svg': {
position: 'absolute',
top: '50%',
left: '45%',
marginTop: '-250px',
marginLeft: '-400px',
},
'& .message-box': {
height: '200px',
minWidth: '380px',
position: 'absolute',
top: '50%',
left: '45%',
marginTop: '-100px',
marginLeft: '0',
color: '#FFF',
// font-family: Roboto;
// font-weight: 300;
},
'& .message-box h1': {
fontSize: '60px',
lineHeight: '46px',
marginBottom: '40px',
color: '#FFF',
},
'& .message-box h3': {
fontSize: '32px',
fontWeight: 400,
lineHeight: '32px',
color: '#FFF',
},
'& .buttons-con .action-link-wrap': {
marginTop: '40px',
},
'& .buttons-con .action-link-wrap a': {
backgroundColor: '#3E6FDB',
padding: ' 8px 25px',
borderRadius: '4px',
color: '#FFF',
fontWeight: 'bold',
// font-size: 14px;
transition: 'all 0.3s linear',
cursor: 'pointer',
textDecoration: 'none',
marginRight: '10px',
},
'& .buttons-con .action-link-wrap a:hover': {
backgroundColor: '#5A5C6C',
color: '#fff',
},
'& #Polygon-1': {
animation: 'float 1s infinite ease-in-out alternate',
},
'& #Polygon-2': {
animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
animationDelay: '0.2s',
},
'& #Polygon-3': {
animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
animationDelay: '0.4s',
},
'& #Polygon-4': {
animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
animationDelay: '0.6s',
},
'& #Polygon-5': {
animation: `${floatAnimation} 1s infinite ease-in-out alternate`,
animationDelay: '0.8s',
},
}}
>
<div className="root">
<svg
width="380px"
height="500px"
viewBox="0 0 837 1045"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
// sketch:type="MSPage"
>
<path
d="M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z"
id="Polygon-1"
stroke="#007FB2"
strokeWidth="6"
// sketch:type="MSShapeGroup"
/>
<path
d="M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z"
id="Polygon-2"
stroke="#EF4A5B"
strokeWidth="6"
// sketch:type="MSShapeGroup"
/>
<path
d="M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z"
id="Polygon-3"
stroke="#795D9C"
strokeWidth="6"
// sketch:type="MSShapeGroup"
/>
<path
d="M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z"
id="Polygon-4"
stroke="#F2773F"
strokeWidth="6"
// sketch:type="MSShapeGroup"
/>
<path
d="M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z"
id="Polygon-5"
stroke="#36B455"
strokeWidth="6"
// sketch:type="MSShapeGroup"
/>
</g>
</svg>
<div className="message-box">
<h1>{title}</h1>
{subTitle ? <h3>{subTitle}</h3> : null}
<div className="buttons-con">
<div className="action-link-wrap">
{/* {action1Text ? (
<Link
to={action1Route || '/login'}
className="link-button link-back-button"
onClick={event => {
if (clearOnClick) {
event.preventDefault();
LOGOUT_LOCAL_STORAGE.forEach(name =>
localStorage.removeItem(name)
);
document.cookie =
LOGOUT_COOKIES.map(
name =>
name +
'=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'
).join(' ');
signOut(getAuth());
window.location.href =
action1Route || '/login';
}
}}
>
{action1Text}
</Link>
) : null} */}
{/* {action2Text ? (
<Link
to={action2Route || '/login'}
className="link-button link-back-button"
>
{action2Text}
</Link>
) : null} */}
</div>
</div>
</div>
</div>
</Box>
);
}