logout page

3 files changed, 57 insertions, 0 deletions

diff --git a/pages/logout.tsx b/pages/logout.tsx
new file mode 100644
index 0000000..617c974
--- /dev/null
+++ b/pages/logout.tsx
@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { IconLabelButton, Vierkant } from '../components/ui';
+
+import * as cookie from 'react-cookies';
+
+import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import HomeIcon from '@material-ui/icons/Home';
+
+function logout() {
+	cookie.remove('token');
+	window.location.href = '/';
+}
+
+export default function MaintenancePage() {
+	useEffect(() => {
+		setTimeout(logout, 3e3);
+	}, []);
+
+	return <div>
+		<NavBar />
+		<CenteredPage width={802}>
+			<PageTitle>Uitloggen</PageTitle>
+			<Vierkant className='w100m2m pad-l bg-800 center logout'>
+				<p>Je wordt over enkele seconden automatisch uitgelogd...</p>
+				<div className='posrel fullwidth pad-m'>
+					<div className='sidebyside dispinbl posabs abscenterh'>
+						<IconLabelButton
+							className='floatn'
+							onclick={logout}
+							text='Nu uitloggen'
+							icon={<ExitToAppIcon />}
+						/>
+						<IconLabelButton
+							className='floatn'
+							href='/'
+							text='Terug naar homepagina'
+							icon={<HomeIcon />}
+						/>
+					</div>
+				</div>
+				<div className='pad-s'></div>
+				<div className='pad-s'></div>
+			</Vierkant>
+		</CenteredPage>
+	</div>;
+}
diff --git a/styles/loginregister.css b/styles/loginregister.css
index 854aeb2..e274b5e 100644
--- a/styles/loginregister.css
+++ b/styles/loginregister.css
@@ -11,3 +11,11 @@
 .centeredForm .input:nth-last-of-type(2) {
 	margin-bottom: var(--spacing-large);
 }
+
+.logout .sidebyside {
+	width: fit-content;
+}
+
+.logout .sidebyside .button {
+	margin: 0;
+}
diff --git a/styles/utility.css b/styles/utility.css
index cc358e6..beec066 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -50,6 +50,7 @@
 
 .floatr { float: right; }
 .floatl { float: left; }
+.floatn { float: none; }
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }