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 redirectAfterLogin = () => { history.push(window.sessionStorage.getItem('back-path') || "/"); } const handleSampleAdminLogin = async () => { await dispatch(authorizeUser(undefined, { isManager: true })); history.push(route("management:index")); } const handleSampleStudentLogin = async () => { await dispatch(authorizeUser()); redirectAfterLogin(); } 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)); redirectAfterLogin(); } })(); }, [ 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>; }