basic frontend implementation of new token system

src/pages/AuthenticationPage/AuthenticationPage.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import {Button} from '../../elements/GPElements/Button';
 import style from './AuthenticationPage.module.css';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
-import {token} from '../../utils/TokenHandler';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {LoginContext, LoginState} from '../../utils/context/LoginContext';
+import {APINode, callApiUnsafe} from '../../utils/Api';
+import {cookie, Token} from '../../utils/context/Cookie';
 
 interface state {
     pwdText: string;
@@ -36,6 +38,8 @@ class AuthenticationPage extends React.Component<Props, state> {
         removeKeyHandler(this.keypress);
     }
 
+    static contextType = LoginContext;
+
     render(): JSX.Element {
         return (
             <>
@@ -76,21 +80,17 @@ class AuthenticationPage extends React.Component<Props, state> {
      * request a new token and check if pwd was valid
      */
     authenticate(): void {
-        token.refreshAPIToken(
-            (error) => {
-                if (error !== '') {
-                    this.setState({wrongPWDInfo: true});
+        callApiUnsafe(
+            APINode.Login,
+            {action: 'login', Password: this.state.pwdText},
+            (r: Token) => {
+                cookie.Store(r);
 
-                    // set timeout to make the info auto-disappearing
-                    setTimeout(() => {
-                        this.setState({wrongPWDInfo: false});
-                    }, 2000);
-                } else {
-                    this.props.onSuccessLogin();
-                }
+                this.context.setLoginState(LoginState.LoggedIn);
             },
-            true,
-            this.state.pwdText
+            (e) => {
+                console.log(e);
+            }
         );
     }
 

src/pages/CategoryPage/CategoryPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Route, Switch} from 'react-router-dom';
+import {Route, Switch, useRouteMatch} from 'react-router-dom';
 import {CategoryViewWR} from './CategoryView';
 import TagView from './TagView';
 
@@ -7,19 +7,21 @@ import TagView from './TagView';
  * Component for Category Page
  * Contains a Tag Overview and loads specific Tag videos in VideoContainer
  */
-class CategoryPage extends React.Component {
-    render(): JSX.Element {
-        return (
-            <Switch>
-                <Route path='/categories/:id'>
-                    <CategoryViewWR />
-                </Route>
-                <Route path='/categories'>
-                    <TagView />
-                </Route>
-            </Switch>
-        );
-    }
-}
+const CategoryPage = (): JSX.Element => {
+    const match = useRouteMatch();
+
+    console.log(match.url);
+
+    return (
+        <Switch>
+            <Route exact path={`${match.url}/:id`}>
+                <CategoryViewWR />
+            </Route>
+            <Route exact path={`${match.url}/`}>
+                <TagView />
+            </Route>
+        </Switch>
+    );
+};
 
 export default CategoryPage;

src/pages/CategoryPage/CategoryView.tsx

@@ -119,9 +119,10 @@ export class CategoryView extends React.Component<CategoryViewProps, CategoryVie
                 this.videodata = result.Videos;
                 this.setState({loaded: true, TagName: result.TagName});
             },
-            (_) => {
+            (e) => {
+                console.log(e);
                 // if there is an load error redirect to home page
-                this.props.history.push('/');
+                // this.props.history.push('/');
             }
         );
     }

src/pages/CategoryPage/TagView.tsx

@@ -56,7 +56,7 @@ class TagView extends React.Component<Props, TagViewState> {
                 <DynamicContentContainer
                     data={this.state.loadedtags}
                     renderElement={(m): JSX.Element => (
-                        <Link to={'/categories/' + m.TagId} key={m.TagId}>
+                        <Link to={'/media/categories/' + m.TagId} key={m.TagId}>
                             <TagPreview name={m.TagName} />
                         </Link>
                     )}

src/pages/SettingsPage/SettingsPage.tsx

@@ -3,52 +3,52 @@ import MovieSettings from './MovieSettings';
 import GeneralSettings from './GeneralSettings';
 import style from './SettingsPage.module.css';
 import GlobalInfos from '../../utils/GlobalInfos';
-import {NavLink, Redirect, Route, Switch} from 'react-router-dom';
+import {NavLink, Redirect, Route, Switch, useRouteMatch} from 'react-router-dom';
 
 /**
  * The Settingspage handles all kinds of settings for the mediacenter
  * and is basically a wrapper for child-tabs
  */
-class SettingsPage extends React.Component {
-    render(): JSX.Element {
-        const themestyle = GlobalInfos.getThemeStyle();
-        return (
-            <div>
-                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
-                    <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
-                    <NavLink to='/settings/general'>
-                        <div className={style.SettingSidebarElement}>General</div>
+const SettingsPage = (): JSX.Element => {
+    const themestyle = GlobalInfos.getThemeStyle();
+    const match = useRouteMatch();
+
+    return (
+        <div>
+            <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
+                <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
+                <NavLink to='/media/settings/general'>
+                    <div className={style.SettingSidebarElement}>General</div>
+                </NavLink>
+                <NavLink to='/media/settings/movies'>
+                    <div className={style.SettingSidebarElement}>Movies</div>
+                </NavLink>
+                {GlobalInfos.isTVShowEnabled() ? (
+                    <NavLink to='/media/settings/tv'>
+                        <div className={style.SettingSidebarElement}>TV Shows</div>
                     </NavLink>
-                    <NavLink to='/settings/movies'>
-                        <div className={style.SettingSidebarElement}>Movies</div>
-                    </NavLink>
-                    {GlobalInfos.isTVShowEnabled() ? (
-                        <NavLink to='/settings/tv'>
-                            <div className={style.SettingSidebarElement}>TV Shows</div>
-                        </NavLink>
-                    ) : null}
-                </div>
-                <div className={style.SettingsContent}>
-                    <Switch>
-                        <Route path='/settings/general'>
-                            <GeneralSettings />
-                        </Route>
-                        <Route path='/settings/movies'>
-                            <MovieSettings />
-                        </Route>
-                        {GlobalInfos.isTVShowEnabled() ? (
-                            <Route path='/settings/tv'>
-                                <span />
-                            </Route>
-                        ) : null}
-                        <Route path='/settings'>
-                            <Redirect to='/settings/general' />
-                        </Route>
-                    </Switch>
-                </div>
+                ) : null}
             </div>
-        );
-    }
-}
+            <div className={style.SettingsContent}>
+                <Switch>
+                    <Route path={`${match.url}/general`}>
+                        <GeneralSettings />
+                    </Route>
+                    <Route path={`${match.url}/movies`}>
+                        <MovieSettings />
+                    </Route>
+                    {GlobalInfos.isTVShowEnabled() ? (
+                        <Route path={`${match.url}/tv`}>
+                            <span />
+                        </Route>
+                    ) : null}
+                    <Route path={`${match.url}/`}>
+                        <Redirect to='/media/settings/general' />
+                    </Route>
+                </Switch>
+            </div>
+        </div>
+    );
+};
 
 export default SettingsPage;