abstract tokenstore to support different storage methods of tokenstore

src/App.tsx

@@ -9,7 +9,7 @@ import style from './App.module.css';
 
 import SettingsPage from './pages/SettingsPage/SettingsPage';
 import CategoryPage from './pages/CategoryPage/CategoryPage';
-import {APINode, apiTokenValid, callAPI, refreshAPIToken} from './utils/Api';
+import {APINode, callAPI, token} from './utils/Api';
 
 import {BrowserRouter as Router, NavLink, Route, Switch} from 'react-router-dom';
 import Player from './pages/Player/Player';
@@ -19,6 +19,7 @@ import {SettingsTypes} from './types/ApiTypes';
 import AuthenticationPage from './pages/AuthenticationPage/AuthenticationPage';
 import TVShowPage from './pages/TVShowPage/TVShowPage';
 import TVPlayer from './pages/TVShowPage/TVPlayer';
+import {CookieTokenStore} from './utils/TokenStore/CookieTokenStore';
 
 interface state {
     password: boolean | null; // null if uninitialized - true if pwd needed false if not needed
@@ -32,12 +33,14 @@ class App extends React.Component<{}, state> {
     constructor(props: {}) {
         super(props);
 
+        token.setTokenStore(new CookieTokenStore());
+
         let pwdneeded: boolean | null = null;
 
-        if (apiTokenValid()) {
+        if (token.apiTokenValid()) {
             pwdneeded = false;
         } else {
-            refreshAPIToken((err) => {
+            token.refreshAPIToken((err) => {
                 if (err === 'invalid_client') {
                     this.setState({password: true});
                 } else if (err === '') {
@@ -61,7 +64,7 @@ class App extends React.Component<{}, state> {
         // set the hook to load passwordfield on global func call
         GlobalInfos.loadPasswordPage = (callback?: () => void): void => {
             // try refreshing the token
-            refreshAPIToken((err) => {
+            token.refreshAPIToken((err) => {
                 if (err !== '') {
                     this.setState({password: true});
                 } else {

src/pages/AuthenticationPage/AuthenticationPage.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import AuthenticationPage from './AuthenticationPage';
 import {shallow} from 'enzyme';
+import {token} from "../../utils/Api";
 
 describe('<AuthenticationPage/>', function () {
     it('renders without crashing ', function () {
@@ -25,8 +26,7 @@ describe('<AuthenticationPage/>', function () {
     it('test fail authenticate', function () {
         const events = mockKeyPress();
 
-        const helpers = require('../../utils/Api');
-        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+        token.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
             callback('there was an error')
         });
 
@@ -41,8 +41,7 @@ describe('<AuthenticationPage/>', function () {
         const events = mockKeyPress();
         const func = jest.fn()
 
-        const helpers = require('../../utils/Api');
-        helpers.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
+        token.refreshAPIToken = jest.fn().mockImplementation((callback, force, pwd) => {
             callback('')
         });
 

src/pages/AuthenticationPage/AuthenticationPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Button} from '../../elements/GPElements/Button';
 import style from './AuthenticationPage.module.css';
 import {addKeyHandler, removeKeyHandler} from '../../utils/ShortkeyHandler';
-import {refreshAPIToken} from '../../utils/Api';
+import {token} from '../../utils/Api';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 
@@ -76,7 +76,7 @@ class AuthenticationPage extends React.Component<Props, state> {
      * request a new token and check if pwd was valid
      */
     authenticate(): void {
-        refreshAPIToken(
+        token.refreshAPIToken(
             (error) => {
                 if (error !== '') {
                     this.setState({wrongPWDInfo: true});

src/setupTests.js

@@ -7,6 +7,8 @@ import '@testing-library/jest-dom/extend-expect';
 import {configure} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import GlobalInfos from './utils/GlobalInfos';
+import {CookieTokenStore} from "./utils/TokenStore/CookieTokenStore";
+import {token} from "./utils/Api";
 
 configure({adapter: new Adapter()});
 
@@ -44,6 +46,7 @@ global.callAPIMock = (resonse) => {
 global.beforeEach(() => {
     // empty fetch response implementation for each test
     global.fetch = prepareFetchApi({});
+    token.setTokenStore(new CookieTokenStore());
     // todo with callAPIMock
 });
 

src/utils/Api.ts

@@ -1,4 +1,5 @@
 import GlobalInfos from './GlobalInfos';
+import {TokenStore} from './TokenStore/TokenStore';
 
 const APIPREFIX: string = '/api/';
 
@@ -11,6 +12,7 @@ interface ApiBaseRequest {
     [_: string]: string | number | boolean | object;
 }
 
+export namespace token {
     // store api token - empty if not set
     let apiToken = '';
 
@@ -21,6 +23,12 @@ let refreshInProcess = false;
     // store the expire seconds of token
     let expireSeconds = -1;
 
+    let tokenStore: TokenStore;
+
+    export function setTokenStore(ts: TokenStore): void {
+        tokenStore = ts;
+    }
+
     /**
      * refresh the api token or use that one in cookie if still valid
      * @param callback to be called after successful refresh
@@ -72,7 +80,8 @@ export function refreshAPIToken(callback: (error: string) => void, force?: boole
                 apiToken = result.access_token;
                 // set expire time
                 expireSeconds = new Date().getTime() / 1000 + result.expires_in;
-            setTokenCookie(apiToken, expireSeconds);
+                // setTokenCookie(apiToken, expireSeconds);
+                tokenStore.setToken({accessToken: apiToken, expireTime: expireSeconds, tokenType: '', scope: ''});
                 // call all handlers and release flag
                 callFuncQue('');
             })
@@ -81,12 +90,13 @@ export function refreshAPIToken(callback: (error: string) => void, force?: boole
 
     export function apiTokenValid(): boolean {
         // check if a cookie with token is available
-    const token = getTokenCookie();
-    if (token !== null) {
+        // const token = getTokenCookie();
+        const tmptoken = tokenStore.loadToken();
+        if (tmptoken !== null) {
             // check if token is at least valid for the next minute
-        if (token.expire > new Date().getTime() / 1000 + 60) {
-            apiToken = token.token;
-            expireSeconds = token.expire;
+            if (tmptoken.expireTime > new Date().getTime() / 1000 + 60) {
+                apiToken = tmptoken.accessToken;
+                expireSeconds = tmptoken.expireTime;
 
                 return true;
             }
@@ -108,68 +118,21 @@ function callFuncQue(error: string): void {
         refreshInProcess = false;
     }
 
-/**
- * set the cookie for the currently gotten token
- * @param token token string
- * @param validSec second time when the token will be invalid
- */
-function setTokenCookie(token: string, validSec: number): void {
-    let d = new Date();
-    d.setTime(validSec * 1000);
-    console.log('token set' + d.toUTCString());
-    let expires = 'expires=' + d.toUTCString();
-    document.cookie = 'token=' + token + ';' + expires + ';path=/';
-    document.cookie = 'token_expire=' + validSec + ';' + expires + ';path=/';
-}
-
-/**
- * get all required cookies for the token
- */
-function getTokenCookie(): {token: string; expire: number} | null {
-    const token = decodeCookie('token');
-    const expireInString = decodeCookie('token_expire');
-    const expireIn = parseInt(expireInString, 10);
-
-    if (expireIn !== 0 && token !== '') {
-        return {token: token, expire: expireIn};
-    } else {
-        return null;
-    }
-}
-
-/**
- * decode a simple cookie with key specified
- * @param key cookie key
- */
-function decodeCookie(key: string): string {
-    let name = key + '=';
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) === ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) === 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return '';
-}
-
     /**
      * check if api token is valid -- if not request new one
      * when finished call callback
      * @param callback function to be called afterwards
      */
-function checkAPITokenValid(callback: () => void): void {
+    export function checkAPITokenValid(callback: (mytoken: string) => void): void {
         // check if token is valid and set
         if (apiToken === '' || expireSeconds <= new Date().getTime() / 1000) {
+            console.log('token not valid...');
             refreshAPIToken(() => {
-            callback();
+                callback(apiToken);
             });
         } else {
-        callback();
+            callback(apiToken);
+        }
     }
 }
 
@@ -186,13 +149,13 @@ export function callAPI<T>(
     callback: (_: T) => void,
     errorcallback: (_: string) => void = (_: string): void => {}
 ): void {
-    checkAPITokenValid(() => {
+    token.checkAPITokenValid((mytoken) => {
         fetch(APIPREFIX + apinode, {
             method: 'POST',
             body: JSON.stringify(fd),
             headers: new Headers({
                 'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + apiToken
+                Authorization: 'Bearer ' + mytoken
             })
         })
             .then((response) => {
@@ -252,13 +215,13 @@ export function callApiUnsafe<T>(
  * @param callback the callback with PLAIN text reply from backend
  */
 export function callAPIPlain(apinode: APINode, fd: ApiBaseRequest, callback: (_: string) => void): void {
-    checkAPITokenValid(() => {
+    token.checkAPITokenValid((mytoken) => {
         fetch(APIPREFIX + apinode, {
             method: 'POST',
             body: JSON.stringify(fd),
             headers: new Headers({
                 'Content-Type': 'application/json',
-                Authorization: 'Bearer ' + apiToken
+                Authorization: 'Bearer ' + mytoken
             })
         }).then((response) =>
             response.text().then((result) => {

src/utils/TokenStore/CookieTokenStore.ts

@@ -0,0 +1,48 @@
+import {Token, TokenStore} from './TokenStore';
+
+export class CookieTokenStore extends TokenStore {
+    loadToken(): Token | null {
+        const token = this.decodeCookie('token');
+        const expireInString = this.decodeCookie('token_expire');
+        const expireIn = parseInt(expireInString, 10);
+
+        if (expireIn !== 0 && token !== '') {
+            return {accessToken: token, expireTime: expireIn, scope: '', tokenType: ''};
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * set the cookie for the currently gotten token
+     * @param token the token to set
+     */
+    setToken(token: Token): void {
+        let d = new Date();
+        d.setTime(token.expireTime * 1000);
+        console.log('token set' + d.toUTCString());
+        let expires = 'expires=' + d.toUTCString();
+        document.cookie = 'token=' + token.accessToken + ';' + expires + ';path=/';
+        document.cookie = 'token_expire=' + token.expireTime + ';' + expires + ';path=/';
+    }
+
+    /**
+     * decode a simple cookie with key specified
+     * @param key cookie key
+     */
+    decodeCookie(key: string): string {
+        let name = key + '=';
+        let decodedCookie = decodeURIComponent(document.cookie);
+        let ca = decodedCookie.split(';');
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i];
+            while (c.charAt(0) === ' ') {
+                c = c.substring(1);
+            }
+            if (c.indexOf(name) === 0) {
+                return c.substring(name.length, c.length);
+            }
+        }
+        return '';
+    }
+}

src/utils/TokenStore/TokenStore.ts

@@ -0,0 +1,11 @@
+export interface Token {
+    accessToken: string;
+    expireTime: number; // second time when token will be invalidated
+    scope: string;
+    tokenType: string;
+}
+
+export abstract class TokenStore {
+    abstract loadToken(): Token | null;
+    abstract setToken(token: Token): void;
+}