Add support for PG SSO

src/api/user.ts

@@ -1,9 +1,22 @@
 import { axios } from "@/api/index";
+import { query, route } from "@/routing";
 
-const AUTHORIZE_ENDPOINT = "/access/login"
+const LOGIN_ENDPOINT = "/access/login"
 
-export async function authorize(code: string): Promise<string> {
+const CLIENT_ID = process.env.LOGIN_CLIENT_ID || "PraktykiClientId";
-    const response = await axios.get<string>(AUTHORIZE_ENDPOINT, { params: { code }});
+const AUTHORIZE_URL = process.env.AUTHORIZE || "https://logowanie.pg.edu.pl/oauth2.0/authorize";
+
+export async function login(code: string): Promise<string> {
+    const response = await axios.get<string>(LOGIN_ENDPOINT, { params: { code }});
 
     return response.data;
 }
+
+export function getAuthorizeUrl() {
+    return query(AUTHORIZE_URL, {
+        response_type: "code",
+        scope: "user_details",
+        client_id: CLIENT_ID,
+        redirect_uri: window.location.origin + route("user_login") + "/check/pg",
+    })
+}

src/pages/user/login.tsx

@@ -1,8 +1,8 @@
 import React, { Dispatch } from "react";
 import { Page } from "@/pages/base";
-import { Button, Container, Typography } from "@material-ui/core";
+import { Button, Container } from "@material-ui/core";
 import { Action, useDispatch } from "@/state/actions";
-import { useHistory } from "react-router-dom";
+import { Route, Switch, useHistory, useLocation, useRouteMatch } from "react-router-dom";
 import { route } from "@/routing";
 import { useVerticalSpacing } from "@/styles";
 import { AppState } from "@/state/reducer";
@@ -10,9 +10,10 @@ 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.authorize("test");
+    const token = await api.user.login("test");
 
     dispatch({
         type: UserActions.Login,
@@ -24,6 +25,8 @@ const authorizeUser = async (dispatch: Dispatch<Action>, getState: () => AppStat
 export const UserLoginPage = () => {
     const dispatch = useDispatch();
     const history  = useHistory();
+    const match    = useRouteMatch();
+    const query    = new URLSearchParams(useLocation().search);
 
     const handleSampleLogin = async () => {
         await dispatch(authorizeUser);
@@ -31,16 +34,29 @@ export const UserLoginPage = () => {
         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>Tu miało być przekierowanie do logowania PG...</Page.Title>
+            <Page.Title>Zaloguj się</Page.Title>
         </Page.Header>
-        <Container maxWidth="md" className={ classes.root }>
+        <Container>
-            <Typography variant="h3">... ale wciąż czekamy na dostęp :(</Typography>
+            <Switch>
-
+                <Route path={match.path} exact>
-            <Button fullWidth onClick={ handleSampleLogin } variant="contained" color="primary">Zaloguj jako przykładowy student</Button>
+                    <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>;
 }

src/routing.tsx

@@ -25,7 +25,7 @@ export const routes: Route[] = [
     { name: "internship_plan", path: "/internship/plan", exact: true, content: () => <SubmitPlanPage/> },
 
     // user
-    { name: "user_login", path: "/user/login", exact: true, content: () => <UserLoginPage /> },
+    { name: "user_login", path: "/user/login", content: () => <UserLoginPage /> },
 
     // fallback route for 404 pages
     { name: "fallback", path: "*", content: () => <FallbackPage/> }
@@ -44,3 +44,9 @@ export function route(name: string, params: URLParams = {}) {
 
     return prepare(url, params)
 }
+
+export const query = (url: string, params: URLParams) => {
+    const query = Object.entries(params).map(([ name, value ]) => `${name}=${encodeURIComponent(value)}`).join("&");
+
+    return url + (query.length > 0 ? `?${query}` : '');
+}

webpack.config.js

@@ -51,11 +51,12 @@ const config = {
     ],
     devServer: {
         contentBase: path.resolve("./public/"),
-        port: 3000,
+        port: 443,
-        host: 'system-praktyk-front.localhost',
+        host: 'system-praktyk.stg.kadet.net',
         disableHostCheck: true,
         historyApiFallback: true,
         overlay: true,
+        https: true,
         proxy: {
             "/api": {
                 target: "http://system-praktyk-front.localhost:8080/",