108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import React, { Dispatch, useEffect } from "react";
|
|
import { Page } from "@/pages/base";
|
|
import { Button, CircularProgress, Container, SvgIcon, Typography } from "@material-ui/core";
|
|
import { Action, StudentActions, 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 { getAuthorizeUrl } from "@/api/user";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Loading } from "@/components/loading";
|
|
import GUTLogo from "!@svgr/webpack!@/../public/img/pg-logo.svg";
|
|
|
|
|
|
type AuthorizeUserOptions = {
|
|
isStudent?: boolean;
|
|
isManager?: boolean;
|
|
}
|
|
|
|
const authorizeUser = (code?: string, { isStudent = false, isManager = false }: AuthorizeUserOptions = { isStudent: true }) => async (dispatch: Dispatch<Action>, getState: () => AppState): Promise<void> => {
|
|
const token = await api.user.login(code);
|
|
|
|
dispatch({
|
|
type: UserActions.Login,
|
|
token,
|
|
isStudent,
|
|
isManager,
|
|
})
|
|
|
|
const student = await api.student.current();
|
|
dispatch({
|
|
type: StudentActions.Set,
|
|
student: student,
|
|
})
|
|
}
|
|
|
|
export const UserLoginPage = () => {
|
|
const dispatch = useDispatch();
|
|
const history = useHistory();
|
|
const match = useRouteMatch();
|
|
const location = useLocation();
|
|
const query = new URLSearchParams(useLocation().search);
|
|
const { t } = useTranslation();
|
|
|
|
const handleSampleAdminLogin = async () => {
|
|
await dispatch(authorizeUser(undefined, { isManager: true }));
|
|
|
|
history.push(route("management:index"));
|
|
}
|
|
|
|
const handleSampleStudentLogin = async () => {
|
|
await dispatch(authorizeUser());
|
|
|
|
history.push(route("home"));
|
|
}
|
|
|
|
const handlePgLogin = async () => {
|
|
history.push(route("user_login") + "/pg");
|
|
}
|
|
|
|
const classes = useVerticalSpacing(2);
|
|
|
|
useEffect(() => {
|
|
(async function() {
|
|
if (location.pathname === `${match.path}/check/pg`) {
|
|
await dispatch(authorizeUser(query.get("code") as string));
|
|
history.push("/");
|
|
}
|
|
})();
|
|
}, [ match.path ]);
|
|
|
|
const inProgress = <Loading size="4rem" label={ t("login-in-progress") }/>
|
|
|
|
return <Page>
|
|
<Page.Header maxWidth="md">
|
|
<Page.Title>{ t("login") }</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" startIcon={
|
|
// @ts-ignore
|
|
<GUTLogo style={{ height: "1.25rem" }} viewBox="0 0 144 64" />
|
|
}>
|
|
{ t("login-as.gut-account") }
|
|
</Button>
|
|
<Typography variant="subtitle2">{ t("login-as.sample") }</Typography>
|
|
<Button fullWidth onClick={ handleSampleStudentLogin } variant="contained" color="secondary">{ t("login-as.sample-student")}</Button>
|
|
<Button fullWidth onClick={ handleSampleAdminLogin } variant="contained" color="secondary">{ t("login-as.sample-manager")}</Button>
|
|
</Container>
|
|
</Route>
|
|
<Route path={`${match.path}/pg`} render={ () => {
|
|
window.location.href = getAuthorizeUrl()
|
|
|
|
return inProgress
|
|
} } />
|
|
<Route path={`${match.path}/check/pg`}>
|
|
{ inProgress }
|
|
</Route>
|
|
</Switch>
|
|
</Container>
|
|
</Page>;
|
|
}
|