add screen for logged out users

src/components/App.tsx

@@ -1,44 +1,23 @@
 import { lazy, Suspense, useContext } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import AuthenticationContext from './Authentication/AuthenticationContext';
-import logout from './Authentication/logout';
-import UIButton from './UIButton';
 import WheelShare from './WheelShare';
+import WheelShareLoggedOut from './WheelShareLoggedOut';
 
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const Group = lazy(() => import('./Group'));
 
-const dev = true;
-const ION_AUTHORIZATION_ENDPOINT = dev
-	? 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fion%2Fcallback'
-	: 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=https%3A%2F%2Fwheelshare.space%2Fauth%2Fion%2Fcallback';
-
 export default function App() {
 	const { user } = useContext(AuthenticationContext);
 	return (
 		<div style={{ padding: '1rem' }}>
-			{user ? (
-				<div
-					style={{
-						display: 'flex',
-						flexDirection: 'row',
-						backgroundColor: '#f6f6f6',
-						borderRadius: '0.5rem',
-						padding: '1rem',
-						alignItems: 'center',
-					}}
-				>
-					{user.name}{' '}
-					<UIButton style={{ marginTop: 0 }} onClick={logout}>
-						Log out
-					</UIButton>
-				</div>
-			) : (
-				<a href={ION_AUTHORIZATION_ENDPOINT}>Log in</a>
-			)}
 			<BrowserRouter>
 				<Switch>
-					<Route path="/" exact component={WheelShare} />
+					<Route
+						path="/"
+						exact
+						component={user ? WheelShare : WheelShareLoggedOut}
+					/>
 					<Suspense fallback={null}>
 						<Route path="/groups/:id" component={Group} />
 						<Route component={Authenticator} path="/auth/:provider/callback" />

src/components/UILink.tsx

@@ -21,6 +21,14 @@ export default function UILink({
 		[style]
 	);
 
+	if (href.startsWith('http://') || href.startsWith('https://')) {
+		return (
+			<a href={href} style={computedStyle}>
+				{children}
+			</a>
+		);
+	}
+
 	return (
 		<Link to={href} style={computedStyle}>
 			{children}

src/components/WheelShareLoggedOut.tsx

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import UILink from './UILink';
+import UIPrimaryTitle from './UIPrimaryTitle';
+
+const dev = true;
+const ION_AUTHORIZATION_ENDPOINT = dev
+	? 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fion%2Fcallback'
+	: 'https://ion.tjhsst.edu/oauth/authorize?response_type=code&client_id=rNa6n9YSg8ftINdyVPpUsaMuxNbHLo9dh1OsOktR&scope=read&redirect_uri=https%3A%2F%2Fwheelshare.space%2Fauth%2Fion%2Fcallback';
+
+const style: CSSProperties = {
+	display: 'flex',
+	flexDirection: 'column',
+	alignItems: 'center',
+	width: '30rem',
+	maxWidth: '30rem',
+	marginLeft: 'auto',
+	marginRight: 'auto',
+};
+
+export default function WheelShareLoggedOut() {
+	return (
+		<div style={style}>
+			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
+			<p>To get started, log in with your Ion account.</p>
+			<UILink href={ION_AUTHORIZATION_ENDPOINT}>Log in</UILink>
+		</div>
+	);
+}