system-praktyk-front/src/pages/user/login.tsx
2020-09-10 18:42:57 +02:00

63 lines
2.2 KiB
TypeScript

import React, { Dispatch } from "react";
import { Page } from "@/pages/base";
import { Button, Container } from "@material-ui/core";
import { Action, useDispatch } from "@/state/actions";
import { Route, Switch, useHistory, useLocation, useRouteMatch } from "react-router-dom";
import { route } from "@/routing";
import { useVerticalSpacing } from "@/styles";
import { AppState } from "@/state/reducer";
import api from "@/api";
import { UserActions } from "@/state/actions/user";
import { sampleStudent } from "@/provider/dummy";
import { getAuthorizeUrl } from "@/api/user";
const authorizeUser = async (dispatch: Dispatch<Action>, getState: () => AppState): Promise<void> => {
const token = await api.user.login("test");
dispatch({
type: UserActions.Login,
token,
student: sampleStudent,
})
}
export const UserLoginPage = () => {
const dispatch = useDispatch();
const history = useHistory();
const match = useRouteMatch();
const query = new URLSearchParams(useLocation().search);
const handleSampleLogin = async () => {
await dispatch(authorizeUser);
history.push(route("home"));
}
const handlePgLogin = async () => {
history.push(route("user_login") + "/pg");
}
const classes = useVerticalSpacing(3);
return <Page>
<Page.Header maxWidth="md">
<Page.Title>Zaloguj się</Page.Title>
</Page.Header>
<Container>
<Switch>
<Route path={match.path} exact>
<Container maxWidth="md" className={ classes.root }>
<Button fullWidth onClick={ handlePgLogin } variant="contained" color="primary">Zaloguj się z pomocą konta PG</Button>
<Button fullWidth onClick={ handleSampleLogin } variant="contained" color="secondary">Zaloguj jako przykładowy student</Button>
</Container>
</Route>
<Route path={`${match.path}/pg`} render={() => (window.location.href = getAuthorizeUrl())} />
<Route path={`${match.path}/check/pg`}>
Kod: { query.get("code") }
</Route>
</Switch>
</Container>
</Page>;
}