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

Reviewed-by: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Reviewed-by: Maciej <glowackimaciej97@gmail.com>
This commit is contained in:
Maciej 2020-06-29 16:58:39 +02:00
commit fcaca8020a
8 changed files with 169 additions and 26 deletions

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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