106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import {LoginContext, LoginPerm, LoginState} from './LoginContext';
|
|
import React, {FunctionComponent, useContext, useEffect, useState} from 'react';
|
|
import {useHistory, useLocation} from 'react-router';
|
|
import {cookie} from './Cookie';
|
|
import {APINode, callAPI} from '../Api';
|
|
import {SettingsTypes} from '../../types/ApiTypes';
|
|
import GlobalInfos from '../GlobalInfos';
|
|
|
|
export const LoginContextProvider: FunctionComponent = (props): JSX.Element => {
|
|
let initialLoginState = LoginState.LoggedIn;
|
|
let initialUserPerm = LoginPerm.User;
|
|
|
|
const t = cookie.Load();
|
|
// we are already logged in so we can set the token and redirect to dashboard
|
|
if (t !== null) {
|
|
initialLoginState = LoginState.LoggedIn;
|
|
}
|
|
|
|
const initialAPICall = (): void => {
|
|
// this is the first api call so if it fails we know there is no connection to backend
|
|
callAPI(
|
|
APINode.Settings,
|
|
{action: 'loadInitialData'},
|
|
(result: SettingsTypes.initialApiCallData) => {
|
|
// set theme
|
|
GlobalInfos.enableDarkTheme(result.DarkMode);
|
|
|
|
GlobalInfos.setVideoPaths(result.VideoPath, result.TVShowPath);
|
|
|
|
GlobalInfos.setTVShowsEnabled(result.TVShowEnabled);
|
|
GlobalInfos.setFullDeleteEnabled(result.FullDeleteEnabled);
|
|
//
|
|
// this.setState({
|
|
// mediacentername: result.MediacenterName
|
|
// });
|
|
// set tab title to received mediacenter name
|
|
document.title = result.MediacenterName;
|
|
|
|
setLoginState(LoginState.LoggedIn);
|
|
},
|
|
(_) => {
|
|
setLoginState(LoginState.LoggedOut);
|
|
}
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
initialAPICall();
|
|
}, []);
|
|
|
|
const [loginState, setLoginState] = useState<LoginState>(initialLoginState);
|
|
const [permission, setPermission] = useState<LoginPerm>(initialUserPerm);
|
|
|
|
const hist = useHistory();
|
|
const loc = useLocation();
|
|
|
|
// trigger redirect on loginstate change
|
|
useEffect(() => {
|
|
if (loginState === LoginState.LoggedIn) {
|
|
// if we arent already in dashboard tree we want to redirect to default dashboard page
|
|
console.log('redirecting to dashboard' + loc.pathname);
|
|
if (!loc.pathname.startsWith('/media')) {
|
|
hist.replace('/media');
|
|
}
|
|
} else {
|
|
if (!loc.pathname.startsWith('/login')) {
|
|
hist.replace('/login');
|
|
}
|
|
}
|
|
}, [hist, loc.pathname, loginState]);
|
|
|
|
const value = {
|
|
logout: (): void => {
|
|
setLoginState(LoginState.LoggedOut);
|
|
cookie.Delete();
|
|
},
|
|
setPerm: (perm: LoginPerm): void => {
|
|
setPermission(perm);
|
|
},
|
|
setLoginState: (state: LoginState): void => {
|
|
setLoginState(state);
|
|
},
|
|
loginstate: loginState,
|
|
permission: permission
|
|
};
|
|
|
|
return <LoginContext.Provider value={value}>{props.children}</LoginContext.Provider>;
|
|
};
|
|
|
|
interface Props {
|
|
perm: LoginPerm;
|
|
}
|
|
|
|
/**
|
|
* Wrapper element to render children only if permissions are sufficient
|
|
*/
|
|
export const AuthorizedContext: FunctionComponent<Props> = (props): JSX.Element => {
|
|
const loginctx = useContext(LoginContext);
|
|
|
|
if (loginctx.permission <= props.perm) {
|
|
return props.children as JSX.Element;
|
|
} else {
|
|
return <></>;
|
|
}
|
|
};
|