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:
commit
fcaca8020a
33
src/App.tsx
33
src/App.tsx
@ -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) => {
|
||||||
|
5
src/businesslogic/BusinessLogicContext.ts
Normal file
5
src/businesslogic/BusinessLogicContext.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const BusinessLogicContext = React.createContext({});
|
||||||
|
|
||||||
|
export default BusinessLogicContext;
|
76
src/businesslogic/BusinessLogicProvider.tsx
Normal file
76
src/businesslogic/BusinessLogicProvider.tsx
Normal 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;
|
5
src/businesslogic/models/user.ts
Normal file
5
src/businesslogic/models/user.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export type User = {
|
||||||
|
name?: string;
|
||||||
|
surname?: string;
|
||||||
|
ticket: string | null;
|
||||||
|
};
|
@ -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
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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")
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user