SVA 427 Add log in/out buttons to settings

src/NativeBase/Components/PrivacyAndTermsLinks.tsx

@@ -18,7 +18,7 @@ const PrivacyAndTermsLinks: FC<PrivacyAndTermsLinksProps> = ({ fontSize }) => {
   fontSize = fontSize ?? 'xs'
 
   return (
-    <HStack space="4" justifyContent={'center'}>
+    <HStack space="4" justifyContent={'space-evenly'}>
       <Text>
         <Link
           _text={{

src/NativeBase/Containers/SettingsContainer.tsx

@@ -13,27 +13,35 @@
  * See more about dark mode in APP_DEVELOPMENT.md
  */
 
-import { Heading, VStack, Text, ScrollView, useColorMode } from 'native-base'
 import React, { useState } from 'react'
+import {
+  Heading,
+  VStack,
+  Text,
+  ScrollView,
+  useColorMode,
+  Button,
+  View,
+} from 'native-base'
 import { useDispatch, useSelector } from 'react-redux'
 import Brand from '@/NativeBase/Components/Brand'
 import PrivacyAndTermsLinks from '@/NativeBase/Components/PrivacyAndTermsLinks'
 import YesNoChoice from '@/NativeBase/Components/Forms/YesNoChoice'
 import { setPermissions, PermissionsState } from '@/Store/Permissions'
 import { changeTheme, ThemeState } from '@/Store/Theme'
-// import { changeWelcome, WelcomeState } from '@/Store/Welcome'     // currently not being used due to cleanup for MVP
 import { version } from '../../../package.json'
 import SegmentedPicker, {
   SegmentedPickerOption,
 } from '../Components/SegmentedPicker'
 import { capitaliseFirstLetter } from '@/Utils/Text'
+import { useAuth } from '@/Services/auth'
+import { navigate } from '@/Navigators/utils'
+import { useFeatureFlags } from '@/Services/featureFlags'
 
 const SettingsContainer = () => {
   const { colorMode, toggleColorMode } = useColorMode()
   const dispatch = useDispatch()
-  // const onChangeSplash = ({ welcome, show }: Partial<WelcomeState>) => {
-  //   dispatch(changeWelcome({ welcome, show }))
-  // }
+
   const dataPermissionsState = useSelector(
     (state: { permissions: PermissionsState }) => state.permissions.data,
   )
@@ -43,9 +51,7 @@ const SettingsContainer = () => {
   const useSystemColourMode = useSelector(
     (state: { theme: ThemeState }) => state.theme.useSystemColourMode,
   )
-  // const welcomeState = useSelector(
-  //   (state: { welcome: WelcomeState }) => state.welcome.show,
-  // )
+
   const [colourModeChoice, setColourModeChoice] = useState<string>(
     useSystemColourMode ? 'system' : colorMode ?? 'light',
   )
@@ -87,55 +93,89 @@ const SettingsContainer = () => {
     setColourModeChoice(newColourMode)
   }
 
+  const { authenticated: isLoggedIn, logout } = useAuth()
+
+  const handleLogin = () => {
+    navigate('Login', {})
+  }
+
+  const handleLogout = () => {
+    logout()
+  }
+
+  const featureFlags = useFeatureFlags()
+
   return (
-    <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
-      <VStack
-        height="100%"
-        justifyContent="space-between"
-        safeAreaY
-        space={4}
-        padding={4}
-      >
-        <VStack space="4">
-          <Brand />
-
-          <VStack space="2">
-            <Heading size="xs">Dark mode</Heading>
-            <SegmentedPicker options={colourModeOptions} />
-          </VStack>
+    <>
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <VStack flex={1} padding={4} space={4}>
+          <Heading
+            textAlign="center"
+            size="lg"
+            marginTop={8}
+            fontFamily="title"
+          >
+            SETTINGS
+          </Heading>
+
+          <View marginTop={'48px'} marginBottom={'48px'}>
+            <Brand />
+          </View>
 
-          <VStack>
-            <YesNoChoice
-              description="Send bug reports?"
-              onChange={() =>
-                onChangeErrorLogsPermission(!dataPermissionsState.errorLogs)
-              }
-              value={dataPermissionsState.errorLogs}
-            />
-            <Text fontSize="xs">
-              Automatically send bug reports to the STA team? May include
-              personal data
-            </Text>
+          <VStack space={4} flex={1}>
+            <VStack space={2}>
+              <Heading size="xs">Dark mode</Heading>
+              <SegmentedPicker options={colourModeOptions} />
+            </VStack>
+
+            <VStack>
+              <YesNoChoice
+                description="Send bug reports?"
+                onChange={() =>
+                  onChangeErrorLogsPermission(!dataPermissionsState.errorLogs)
+                }
+                value={dataPermissionsState.errorLogs}
+              />
+              <Text fontSize="xs">
+                Automatically send bug reports to the STA team? May include
+                personal data
+              </Text>
+            </VStack>
           </VStack>
 
-          {/* <Heading size="sm">Welcome screen</Heading>
-          <Checkbox
-            colorScheme={'pink'}
-            value="welcome"
-            accessibilityLabel="Show a splash screen when the app starts"
-            isChecked={welcomeState}
-            onChange={() => onChangeSplash({ show: !welcomeState })}
+          <VStack
+            alignItems="center"
+            space={2}
+            width="100%"
+            marginBottom={'48px'}
           >
-            <Text fontSize="sm">Show splash screen on app launch</Text>
-          </Checkbox> */}
+            <Text fontSize="xs">Version {version}</Text>
+            <PrivacyAndTermsLinks />
+          </VStack>
         </VStack>
+      </ScrollView>
 
-        <VStack alignItems="center" space="2">
-          <Text fontSize="xs">Version {version}</Text>
-          <PrivacyAndTermsLinks />
-        </VStack>
+      <VStack alignItems="center">
+        {featureFlags.login ? (
+          !isLoggedIn ? (
+            <Button width="90%" onPress={handleLogin}>
+              Log in
+            </Button>
+          ) : (
+            <Button
+              width="90%"
+              backgroundColor="white"
+              _text={{ color: 'error.100', fontWeight: 'bold' }}
+              borderColor="error.100"
+              borderWidth={1}
+              onPress={handleLogout}
+            >
+              Log out
+            </Button>
+          )
+        ) : null}
       </VStack>
-    </ScrollView>
+    </>
   )
 }
 

src/Navigators/Main.tsx

@@ -176,6 +176,7 @@ const MainNavigator = () => {
         component={SettingsContainer}
         options={{
           ...bottomTabOptions,
+          headerShown: false,
         }}
       />
     </Tab.Navigator>