From c02109f023820bae4b057dfbe50aa328810b4ab8 Mon Sep 17 00:00:00 2001
From: Dylan McReynolds <dmcreynolds@lbl.gov>
Date: Fri, 28 Oct 2022 10:49:58 -0700
Subject: [PATCH] move post code out of interceptor

---
 web-frontend/src/client.ts           | 48 ++++++----------------------
 web-frontend/src/components/auth.tsx | 11 +++++--
 web-frontend/src/routes/login.tsx    | 11 -------
 3 files changed, 19 insertions(+), 51 deletions(-)

diff --git a/web-frontend/src/client.ts b/web-frontend/src/client.ts
index 9714be158..f11d7b49a 100644
--- a/web-frontend/src/client.ts
+++ b/web-frontend/src/client.ts
@@ -5,8 +5,8 @@ import { useNavigate } from 'react-router-dom'
 import UserContext from "./context/user";
 
 
-const  REFRESH_TOKEN_KEY = "refresh_token";
-const  ACCESS_TOKEN_KEY = "access_token";
+export const REFRESH_TOKEN_KEY = "refresh_token";
+export const ACCESS_TOKEN_KEY = "access_token";
 
 const apiURL = process.env.REACT_APP_API_PREFIX || "../api";
 
@@ -70,32 +70,6 @@ const AxiosInterceptor = ({children}: Props) => {
 
   useEffect(() => {
 
-      const responseInterceptor = async (response: AxiosResponse) => {
-          // if 401, delete local toke
-
-          // looku
-          const refreshToken = response.data.refresh_token;
-          if (refreshToken){
-            localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken)
-            localStorage.setItem(ACCESS_TOKEN_KEY, response.data.access_token);
-            // follow up request to /api/whoami to get user info
-            const whomiResponse = await axiosInstance.get("/auth/whoami");
-            //what provider was this? this is ugly
-            const provider = response.config.url!.split("/")[2];
-            //now find the identity for this provider
-            // I guess a types file for tiled would be could, we could avoid the any here
-            const identity = whomiResponse.data.identities.find((identity: any) => identity.provider === provider);
-            //update user context
-            setUser(identity.id);
-          }
-
-
-
-
-
-          return response;
-      }
-
       const requestInterceptor =  (requestConfig: AxiosRequestConfig) => {
         // for all requests, lookup refresh token in local storage
         // if found, add to the reqeust
@@ -109,26 +83,24 @@ const AxiosInterceptor = ({children}: Props) => {
         return requestConfig;
     }
 
-      const errInterceptor = (error: any) => {
+      // const errInterceptor = (error: any) => {
 
-          if (error.response.status === 401) {
-              navigate('/login');
-          }
+      //     if (error.response.status === 401) {
+      //         navigate('/login');
+      //     }
 
-          return Promise.reject(error);
-      }
+      //     return Promise.reject(error);
+      // }
 
       const reqInterceptor = axiosInstance.interceptors.request.use(requestInterceptor);
-      const interceptor = axiosInstance.interceptors.response.use(responseInterceptor, errInterceptor);
+      // const interceptor = axiosInstance.interceptors.response.use(errInterceptor);
 
       // Why does the article do this and do I need to eject the request intereptor?
-      return () => axiosInstance.interceptors.response.eject(interceptor);
+      // return () => axiosInstance.interceptors.response.eject(interceptor);
 
   }, [navigate])
 
   return children;
 }
 
-
-
 export { axiosInstance, AxiosInterceptor };
diff --git a/web-frontend/src/components/auth.tsx b/web-frontend/src/components/auth.tsx
index ef7a0ef16..2753790f6 100644
--- a/web-frontend/src/components/auth.tsx
+++ b/web-frontend/src/components/auth.tsx
@@ -2,23 +2,30 @@ import * as React from "react";
 import { Paper, withStyles, Grid, TextField, Button, FormControlLabel, Checkbox } from '@mui/material';
 import {axiosInstance} from '../client';
 import { useState } from "react";
+import {ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY} from "../client";
 
 
 interface Props{
 }
 
 function Auth (props: Props) {
-    function login(){
+    async function login(){
         const loginData = new FormData();
         loginData.append("username", username);
         loginData.append("password", password);
 
-        axiosInstance.post("auth/provider/toy/token", loginData, {
+        const response = await axiosInstance.post("auth/provider/toy/token", loginData, {
 
             headers: {
                 "Content-Type": "multipart/form-data",
                 "X-CSRF": 'm0rVhrUEgq1Z1kpmOKFLRzD_f6zRb8D5t5-fFifLbn8',
             }});
+
+        localStorage.setItem(REFRESH_TOKEN_KEY, response.data.refresh_token);
+        localStorage.setItem(ACCESS_TOKEN_KEY, response.data.access_token);
+
+        //update user context
+        console.log(response.data.identity.id);
     }
 
     const [username, setUsername] = useState<string>("");
diff --git a/web-frontend/src/routes/login.tsx b/web-frontend/src/routes/login.tsx
index 3ac6ffbbd..c496ee6cc 100644
--- a/web-frontend/src/routes/login.tsx
+++ b/web-frontend/src/routes/login.tsx
@@ -10,21 +10,10 @@ login providers
     Basic
 */
 
-
-
-
 const Login = () => {
-      // Extract from path from react-router.
-    const params = useParams<{ "*": string }>();
-    // Transform "/a/b/c" to ["a", "b", "c"].
-    const segments = (params["*"] || "").split("/").filter(function (segment) {
-        return segment;
-    });
-    console.log(`segments: ${segments}`)
     return (
         // list of buttons of providers to choose from
         <Auth/>
-
     );
 }