SVA 427 Add log in/out buttons to settings

.expo/packager-info.json

@@ -0,0 +1,4 @@
+{
+  "expoServerPort": null,
+  "packagerPort": 19000
+}

.expo/settings.json

@@ -1,3 +1,10 @@
 {
-  "urlRandomness": "ZIWJWVY"
+  "urlRandomness": "ZIWJWVY",
+  "dev": true,
+  "minify": false,
+  "https": false,
+  "hostType": "lan",
+  "lanType": "ip",
+  "scheme": null,
+  "devClient": false
 }

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,8 +13,16 @@
  * 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'
@@ -27,13 +35,18 @@ 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,
   )
@@ -46,6 +59,7 @@ const SettingsContainer = () => {
   // const welcomeState = useSelector(
   //   (state: { welcome: WelcomeState }) => state.welcome.show,
   // )
+
   const [colourModeChoice, setColourModeChoice] = useState<string>(
     useSystemColourMode ? 'system' : colorMode ?? 'light',
   )
@@ -87,19 +101,31 @@ const SettingsContainer = () => {
     setColourModeChoice(newColourMode)
   }
 
+  const { authenticated: isLoggedIn, login, 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">
+      <VStack flex={1} padding={4} space={4}>
+        <Heading textAlign="center" size="lg" marginTop={8} fontFamily="title">
+          SETTINGS
+        </Heading>
+
+        <View style={{ marginTop: 48 }}>
           <Brand />
+        </View>
 
-          <VStack space="2">
+        <VStack space={4} flex={1}>
+          <VStack space={2}>
             <Heading size="xs">Dark mode</Heading>
             <SegmentedPicker options={colourModeOptions} />
           </VStack>
@@ -130,9 +156,25 @@ const SettingsContainer = () => {
           </Checkbox> */}
         </VStack>
 
-        <VStack alignItems="center" space="2">
+        <VStack alignItems="center" space={2} width="100%" paddingBottom={4}>
           <Text fontSize="xs">Version {version}</Text>
           <PrivacyAndTermsLinks />
+          {featureFlags.login ? (
+            !isLoggedIn ? (
+              <Button width="90%" onPress={handleLogin}>
+                Log in
+              </Button>
+            ) : (
+              <Button
+                width="90%"
+                backgroundColor="white"
+                _text={{ color: 'error.100', fontWeight: 'bold' }}
+                onPress={handleLogout}
+              >
+                Log out
+              </Button>
+            )
+          ) : null}
         </VStack>
       </VStack>
     </ScrollView>

src/Navigators/Main.tsx

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