Merge pull request 'login' (#10) from login into master

Reviewed-by: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Reviewed-by: Maciej <glowackimaciej97@gmail.com>

src/App.tsx

@@ -6,12 +6,18 @@ import Schedule from "./components/Calendar/";
 import { appointments } from "./components/Calendar/appointments";
 import RightBar from "./components/RightBar";
 import { lectures } from "./lectures";
+
+import BusinessLogicContext from "./businesslogic/BusinessLogicContext";
+import { BuisnessProvided } from "./businesslogic/BusinessLogicProvider";
+
 function App() {
 	const [isOpenTransfer, setOpenTransfer] = useState(false);
 	const [text, setText] = useState("");
 
 	return (
 		<div className="App">
+			<BusinessLogicContext.Consumer>
+				{(context) => (
 					<TopBar
 						textChangeHandler={(e) => {
 							setText(e.target.value);
@@ -22,7 +28,12 @@ function App() {
 						onLangChange={(e) => {
 							console.log(e);
 						}}
+						handleLogout={() => {
+							(context as BuisnessProvided).reducers.userlogout();
+						}}
 					/>
+				)}
+			</BusinessLogicContext.Consumer>
 			<Transfer
 				isOpen={isOpenTransfer}
 				handleClose={(e) => {

src/businesslogic/BusinessLogicContext.ts

@@ -0,0 +1,5 @@
+import React from "react";
+
+const BusinessLogicContext = React.createContext({});
+
+export default BusinessLogicContext;

src/businesslogic/BusinessLogicProvider.tsx

@@ -0,0 +1,76 @@
+import BusinessLogicContext from "./BusinessLogicContext";
+import React, { Component } from "react";
+import { User } from "./models/user";
+
+export interface BuisnessProvided {
+	states: BusinessState;
+	reducers: {
+		userlogout: () => void;
+	};
+}
+
+interface BusinessState {
+	user: User | null;
+}
+
+interface Props {}
+
+class BusinessLogicProvider extends Component<Props, BusinessState> {
+	constructor(props: Props) {
+		super(props);
+		this.state = {
+			user: null,
+		};
+	}
+
+	componentDidMount() {
+		this.login();
+	}
+
+	login() {
+		const urlParams = new URLSearchParams(window.location.search);
+		const ticket = urlParams.get("ticket");
+
+		if (!ticket) {
+			this.redirectToCASLoginService();
+		}
+		if (ticket) {
+			this.setState({ user: { ticket } });
+		}
+	}
+
+	logout() {
+		this.redirectToCASLogoutService();
+	}
+
+	redirectToCASLogoutService() {
+		window.location.replace(
+			`https://cas.amu.edu.pl/cas/logout?service=${window.origin}`
+		);
+	}
+
+	redirectToCASLoginService() {
+		window.location.replace(
+			`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`
+		);
+	}
+
+	render() {
+		return (
+			<BusinessLogicContext.Provider
+				value={{
+					states: this.state,
+					reducers: {
+						userlogout: () => {
+							this.logout();
+						},
+					},
+				}}
+			>
+				{this.props.children}
+			</BusinessLogicContext.Provider>
+		);
+	}
+}
+
+export default BusinessLogicProvider;

src/businesslogic/models/user.ts

@@ -0,0 +1,5 @@
+export type User = {
+	name?: string;
+	surname?: string;
+	ticket: string | null;
+};

src/components/RightBar/index.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import "./index.scss";
 import { Lecture } from "../../lectures";
 import LectureCard from "./LectureCard";
+import BusinessLogicContext from "../../businesslogic/BusinessLogicContext";
+import { BuisnessProvided } from "../../businesslogic/BusinessLogicProvider";
 
 interface RightBarProps {
 	onGroupMouseOver: (id: string, name: string) => void;
@@ -19,6 +21,9 @@ export default function RightBar({ lectures, onGroupMouseOver, onGroupClick }: R
 
 	return (
 		<div className="right-bar">
+			<BusinessLogicContext.Consumer>
+				{(context) => <p>{JSON.stringify((context as BuisnessProvided).states.user?.ticket)}</p>}
+			</BusinessLogicContext.Consumer>
 			<div className="right-bar__text">
 				Hubert Wrzesiński<br></br>
 				Semestr zimowy 2020/2021

src/components/TopBar/Profile.tsx

@@ -1,15 +1,18 @@
 import { Menu, MenuItem } from "@material-ui/core";
 import React, { FC } from "react";
 
-
 interface ProfileProps {
 	anchorEl: HTMLElement | null;
-    handleClose: () => void
-
+	handleClose: () => void;
+	handleLogout: () => void;
 }
 
-export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}) => {
-
+export const Profile: FC<ProfileProps> = ({
+	anchorEl,
+	handleClose,
+	handleLogout,
+	...restProps
+}) => {
 	return (
 		<Menu
 			className="top-bar__menu"
@@ -21,7 +24,13 @@ export const Profile : FC<ProfileProps> = ({anchorEl, handleClose, ...restProps}
 		>
 			<MenuItem>Profile</MenuItem>
 			<MenuItem>My account</MenuItem>
-			<MenuItem>Logout</MenuItem>
+			<MenuItem
+				onClick={() => {
+					handleLogout();
+				}}
+			>
+				Logout
+			</MenuItem>
 		</Menu>
 	);
 };

src/components/TopBar/index.tsx

@@ -12,7 +12,10 @@ import { Profile } from "./Profile";
 interface TopBarProps {
 	handleTransfer: (e: React.MouseEvent) => void;
 	onLangChange: (lang: boolean) => void;
-	textChangeHandler: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	handleLogout: () => void;
+	textChangeHandler: (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+	) => void;
 }
 
 interface TopBarState {
@@ -64,29 +67,55 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
 		return (
 			<div className="top-bar">
 				<div className="top-bar__logo">
-					<img className="top-bar__logo-image" alt="logo" src="https://plannaplan.pl/img/logo.svg" />
+					<img
+						className="top-bar__logo-image"
+						alt="logo"
+						src="https://plannaplan.pl/img/logo.svg"
+					/>
 					<div className="top-bar__tekst"> plan na plan </div>
 				</div>
 				<div className="top-bar__input-div">
-					<img className="top-bar__input-icon" alt="search" src={Search} />
+					<img
+						className="top-bar__input-icon"
+						alt="search"
+						src={Search}
+					/>
 					<Input
 						placeholder="Wyszukaj..."
 						inputProps={{ "aria-label": "description" }}
 						className="top-bar__input-field"
 						onChange={(e) => this.handleChange(e)}
 					/>
-					<img className="top-bar__input-icon" alt="close" src={CloseIcon} />
+					<img
+						className="top-bar__input-icon"
+						alt="close"
+						src={CloseIcon}
+					/>
 				</div>
 				<div className="top-bar__icon-box">
-					<img className="top-bar__icon" alt="transfer" src={Transfer} onClick={this.handleTransfer} />
+					<img
+						className="top-bar__icon"
+						alt="transfer"
+						src={Transfer}
+						onClick={this.handleTransfer}
+					/>
 					<img
 						className="top-bar__icon"
 						alt="change_language"
 						src={this.state.isPolish ? UK : PL}
 						onClick={this.onLangChange}
 					/>
-					<img className="top-bar__icon" alt="profile" src={User} onClick={this.handleProfile} />
-					<Profile anchorEl={this.state.anchorEl} handleClose={this.handleClose} />
+					<img
+						className="top-bar__icon"
+						alt="profile"
+						src={User}
+						onClick={this.handleProfile}
+					/>
+					<Profile
+						anchorEl={this.state.anchorEl}
+						handleClose={this.handleClose}
+						handleLogout={this.props.handleLogout}
+					/>
 				</div>
 			</div>
 		);

src/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
+import BuisnessLogicProvider from "./businesslogic/BusinessLogicProvider";
 
 ReactDOM.render(
 	<>
+		<BuisnessLogicProvider>
 			<App />
+		</BuisnessLogicProvider>
 	</>,
 	document.getElementById("root")
 );