Revize 06808454

Logout and Login fixed
re #10715

src/api/authservice.ts

@@ -12 +12 @@
 
 export const isAuthRequest = async () => {
     return await axiosInstance.get(
-        "/api/isauth"
+        "/isauth"
+    )
+}
+
+export const logoutRequest = async () => {
+    return await axiosInstance.get(
+        "/logout"
     )
 }
 

src/pages/LoginPage.tsx

@@ -11 +11 @@
     Text,
     KeyboardAvoidingView
 } from "native-base"
-import { useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
-import { login } from "../stores/actions/userThunks"
+import { checkAuth, login } from "../stores/actions/userThunks"
 import { AppDispatch, RootState } from "../stores/store"
 import { Platform } from "react-native"
+import { log } from "../logging/logger"
+import * as SplashScreen from "expo-splash-screen"
+import { ApplicationHeading } from "../components/reusables/ApplicationHeading"
 
 
 const LoginPage = () => {
     const [username, setUsername] = useState("")
     const [password, setPassword] = useState("")
-    const status = useSelector((state: RootState) => state.user.loggedIn)
+    const lastError = useSelector((state: RootState) => state.user.lastError)
 
     const dispatch = useDispatch<AppDispatch>()
 
     const loginUser = () => {
+        log.debug("LoginPage", "loginUser", "dispatching login")
         dispatch(login({username, password}))
         //TODO - add error handling
     }
 
+
+    useEffect(() => {
+        dispatch(checkAuth())
+    }, [])
+
     return (
         <KeyboardAvoidingView
+            behavior={ Platform.OS === "ios" ? "padding" : "height" }
+            flex={ 1 }
+            justifyContent={ "center" }
             h={ {
                 base: "400px",
                 lg: "auto"
             } }
-            behavior={ Platform.OS === "ios" ? "padding" : "height" }
         >
             <Center w="100%">
-                <Box
-                    safeArea
+                <VStack
                     p="2"
-                    py="8"
-                    w="90%"
-                    maxW="290"
+                    w="80%"
+                    justifyContent={ "center" }
                 >
-                    <Heading
-                        size="2xl"
-                        color="primary.500"
-                        textAlign="center"
-                        _dark={ {
-                            color: "primary.100"
-                        } }
-                    >
-                        Inventaria Rudolphina
-                    </Heading>
+                    <ApplicationHeading />
                     <Heading
                         mt="10"
                         textAlign="center"
@@ -74 +74 @@
                     >
                         Please log in to continue
                     </Text>
+                    { lastError && (
+                        <Text
+                            mt="1"
+                            textAlign="center"
+                            color="error.500"
+                        >
+                            { lastError }
+                        </Text>
+                    ) }
 
-                    <VStack space={ 3 } mt="1">
+                    <VStack space={ 3 } >
                         <FormControl>
                             <FormControl.Label>Username</FormControl.Label>
                             <Input
@@ -106 +115 @@
                             </Button>
                         </FormControl>
                     </VStack>
-                </Box>
+                </VStack>
             </Center>
         </KeyboardAvoidingView>
     )

src/pages/Logout.tsx

@@ -1 +1 @@
 import { useDispatch } from "react-redux"
 import { useEffect } from "react"
 import { AppDispatch } from "../stores/store"
-import { Heading, HStack, Spinner } from "native-base"
-import { logout } from "../stores/reducers/userSlice"
+import { Center, Heading, HStack, Spinner } from "native-base"
+import { logout } from "../stores/actions/userThunks"
 
 const Logout = () => {
     const dispatch = useDispatch<AppDispatch>();
 
     useEffect(() => {
         dispatch(logout())
-    }, [dispatch])
+    }, [])
 
     return (
-        <>
+        <Center justifyContent={"center"}>
             <HStack space={2} justifyContent="center">
                 <Spinner
                     accessibilityLabel="Loading logout"
-                    color="primary.50"
+                    color="primary.500"
                 />
-                <Heading color="primary.50" fontSize="md">
+                <Heading color="primary.500" fontSize="md">
                     Loading
                 </Heading>
             </HStack>
-        </>
+        </Center>
     )
 }
 

src/stores/actions/userThunks.ts

@@ -1 +1 @@
 import { createAsyncThunk } from "@reduxjs/toolkit"
-import { isAuthRequest, loginRequest } from "../../api/authservice"
+import { isAuthRequest, loginRequest, logoutRequest } from "../../api/authservice"
+import { log } from "../../logging/logger"
 
 export const login = createAsyncThunk(
     "user/login",
     async (payload: { username: string, password: string }) => {
         try {
-            console.log("POST user/login");
+            log.debug("Logging in", payload)
             const response = await loginRequest(payload.username, payload.password)
+            log.debug("Login response", response)
             if (response.status === 200) {
                 return {
                     username: payload.username,
@@ -38 +40 @@
             return Promise.reject(err.response.data)
         }
     }
+)
+
+export const logout = createAsyncThunk(
+    "user/logout",
+    async () => {
+        try {
+            const response = await logoutRequest()
+            log.debug("Logout response", response)
+            if (response.status === 200) {
+                return Promise.resolve()
+            } else {
+                return Promise.reject(response.data ? response.data : "Logout failed")
+            }
+        } catch (err: any) {
+            return Promise.reject(err.response.data)
+        }
+    }
 )

src/stores/reducers/userSlice.ts

@@ -1 +1 @@
 import { createSlice } from "@reduxjs/toolkit"
-import { checkAuth, login } from "../actions/userThunks"
+import { checkAuth, login, logout } from "../actions/userThunks"
 
 export interface UserState {
     username: string
     loggedIn: boolean
     role: string
     lastError?: string
+    checkedAuth: boolean
 }
 
 const initialState: UserState = {
     username: "",
     loggedIn: false,
-    role: ""
+    role: "",
+    checkedAuth: false
 }
 
 export const userSlice = createSlice({
     name: "user",
     initialState: initialState,
     reducers: {
-        logout: () => initialState,
+        resetState: (state) => {
+            state = initialState
+        }
     },
     extraReducers: (builder) => {
         builder.addCase(login.fulfilled, (state, action) => {
@@ -33 +37 @@
         builder.addCase(checkAuth.fulfilled, (state, action) => {
             state.loggedIn = action.payload.isLogged
             state.lastError = ""
+            state.checkedAuth = true
         })
         builder.addCase(checkAuth.rejected, (state, action) => {
             state.lastError = action.error.message
+            state.checkedAuth = true
         })
+        builder.addCase(logout.fulfilled, (state, action) => initialState)
     }
 })
 
-export const { logout } = userSlice.actions
+export const { resetState } = userSlice.actions
 
 export default userSlice.reducer