rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

add screen for logged out users

Browse Source
This commit is contained in:
Michael Fatemi 2021-07-03 01:07:02 -04:00
parent dde3edee04
commit d4aca49302
3 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/App.tsx
View File

@ -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" />

8
src/components/UILink.tsx
View File

@ -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}

28
src/components/WheelShareLoggedOut.tsx Normal file
View File

@ -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>
);
}