Feature/login logic (#10)

* added user state and cookies check

* added basic flow of components

* added basic ui for login and hooked up checkbox

* can’t believe that I wrote this on paper

* FF-161 cleaning up

* formatting

* major refactoring using the store directly from the background functions

* cleaing up after refactor

* some layout

* fixed ts errors

Author: qvalentin

webapp_frontend/src/background/api/api.ts

@@ -3,6 +3,8 @@ import {constants} from "../constants";
 
 export const hostname:string =constants.url.API_URL+'/api';
 
+export const userPath:string='/v1/users';
+
 
 interface BackendHealthData {
     uptimeInSeconds: number;
@@ -21,4 +23,4 @@ function callBackendHealth():Promise<BackendHealthData>{
     });
 }
 
-export { callBackendHealth}
+export { callBackendHealth}

webapp_frontend/src/background/api/auth.ts

@@ -0,0 +1,76 @@
+import Axios from "axios";
+
+
+import {hostname, userPath} from "./api";
+
+import {AddUser, UserState} from "../redux/actions/userTypes";
+import store from "../redux/store";
+import {addAccessToken, addRefreshToken} from "../redux/actions/tokens";
+import {addUser} from "../redux/actions/user";
+import {AccessToken, AddAccessToken, AddRefreshToken, TokensState} from "../redux/actions/tokenTypes";
+
+
+// reference: https://daveceddia.com/access-redux-store-outside-react/
+
+export interface BackendLoginData {
+    refreshToken: string,
+    user: UserState
+
+}
+
+export const loginWithUsernameAndPassword = (userName: string, password: string): Promise<BackendLoginData> => {
+
+    return new Promise<BackendLoginData>((resolve, reject) => {
+        let config = {
+            headers: {
+                Authorization: `Basic ${btoa(userName + ':' + password)}`,
+            },
+        };
+
+        return Axios.get(hostname + userPath + '/login', config)
+            .then((data) => {
+                store.dispatch(addRefreshToken(data.data.refreshToken) as AddRefreshToken)
+                store.dispatch(addUser(data.data.user as UserState) as AddUser)
+
+                getAccessTokenWithRefreshToken()
+            })
+            .catch(((error) => {
+
+                reject(error);
+            }))
+
+
+    })
+}
+
+
+export const getAccessTokenWithRefreshToken = () => {
+    console.log("getAccessTokenWithRefreshToken")
+
+    let refreshToken: string|null = (store.getState().tokens as TokensState).refreshToken;
+
+    let config = {
+        headers: {
+            Authorization: `Bearer ${refreshToken}`,
+        },
+    };
+
+    Axios.get(hostname + userPath + '/auth', config)
+        .then((data) => {
+            setAuthHeaderToAxios(data.data.token)
+
+            store.dispatch(addAccessToken({token: data.data.token, timestamp: data.data.validUntil}as AccessToken) as AddAccessToken);
+
+        })
+        .catch(((error) => {
+            console.log(error)
+        }));
+
+}
+
+function setAuthHeaderToAxios(accessToken: string) {
+    Axios.defaults.headers.common['Authorization'] =
+        `Bearer ${accessToken}`;
+}
+
+

webapp_frontend/src/background/api/login.ts

@@ -11,7 +11,7 @@ const prod: constants = {
 
 const dev: constants = {
     url: {
-        API_URL: 'http://filefighter.ddns.net:3001',
+        API_URL: 'https://cors-anywhere.herokuapp.com/http://filefighter.ddns.net:3001',
     }
 };
-export const constants = process.env.NODE_ENV === 'development' ? dev : prod;
+export const constants = process.env.NODE_ENV === 'development' ? dev : prod;

webapp_frontend/src/background/constants.tsx

@@ -1,5 +1,7 @@
 import {TokensState} from "./tokenTypes";
+import {UserState} from "./userTypes";
 
 export interface SystemState {
     tokens: TokensState
-}
+    user: UserState
+}

webapp_frontend/src/background/redux/actions/sytemState.tsx

@@ -1,8 +1,9 @@
 export const ADD_REFRESH_TOKEN = "ADD_REFRESH_TOKEN";
 export const ADD_ACCESS_TOKEN = "ADD_ACCESS_TOKEN";
+export const CHECKED_COOKIES = "CHECKED_COOKIES";
 
 
-export interface AccessToken{
+export interface AccessToken {
     token: string | null;
     timestamp: number | null;
 }
@@ -11,18 +12,24 @@ export interface AccessToken{
 export interface TokensState {
     refreshToken: string | null;
     accessToken: AccessToken | null;
+    checkedCookies: boolean;
 }
 
 
-interface AddRefreshToken {
+export interface AddRefreshToken {
     type: typeof ADD_REFRESH_TOKEN
     payload: string
 }
 
-interface AddAccessToken {
+export interface AddAccessToken {
     type: typeof ADD_ACCESS_TOKEN
     payload: AccessToken
 }
 
-export type TokenActionsTypes = AddRefreshToken | AddAccessToken;
+export interface CheckedCookies{
+    type: typeof CHECKED_COOKIES,
+    payload: boolean
+}
+
+export type TokenActionsTypes = AddRefreshToken | AddAccessToken|CheckedCookies;
 

webapp_frontend/src/background/redux/actions/tokenTypes.tsx

@@ -1,4 +1,4 @@
-import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, AccessToken} from "./tokenTypes";
+import {ADD_REFRESH_TOKEN, ADD_ACCESS_TOKEN, AccessToken, CHECKED_COOKIES} from "./tokenTypes";
 
 
 export const addRefreshToken = (content: string) => ({
@@ -9,4 +9,10 @@ export const addRefreshToken = (content: string) => ({
 export const addAccessToken = (content: AccessToken) => ({
     type: ADD_ACCESS_TOKEN,
     payload: content
-});
+});
+
+
+export const checkedCookies = (content: boolean) => ({
+    type: CHECKED_COOKIES,
+    payload: content
+});

webapp_frontend/src/background/redux/actions/tokens.tsx

@@ -0,0 +1,6 @@
+import {ADD_USER, UserState} from "./userTypes";
+
+export const addUser = (content: UserState) => ({
+    type: ADD_USER,
+    payload: content
+});

webapp_frontend/src/background/redux/actions/user.tsx

@@ -0,0 +1,18 @@
+export const ADD_USER = "ADD_USER";
+
+export interface UserState {
+    id: number | null,
+    username: string | null,
+    groups: number[],
+
+
+}
+
+
+export interface AddUser {
+    type: typeof ADD_USER,
+    payload: UserState
+}
+
+
+export type UserActionTypes = AddUser;

webapp_frontend/src/background/redux/actions/userTypes.tsx

@@ -1,5 +1,7 @@
 import {combineReducers} from "redux";
 import tokens from "./tokens";
+import user from "./user";
 
 // this combines all the stores from the reducers
-export default combineReducers({tokens});
+
+export default combineReducers({tokens, user});