Add onboarding screen + token check

This commit is contained in:
Maarten 2024-08-07 20:47:52 +02:00
parent b951d0a0bc
commit f5c59f602a
19 changed files with 433 additions and 279 deletions

128
app/(onboarding)/start.tsx Normal file
View file

@ -0,0 +1,128 @@
import {Stack} from 'expo-router';
import {StyleSheet, TextInput, TouchableOpacity} from 'react-native';
import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {useToken} from '@/context/AppProvider';
import {Colors} from '@/constants/Colors';
import React from 'react';
import {useColorScheme} from '@/hooks/useColorScheme';
import {Message} from '@/services/message';
import {Request} from '@/services/request';
import { router } from 'expo-router';
export default function OnboardStartScreen() {
const colorScheme = useColorScheme() ?? 'light';
const {setToken} = useToken();
const [name, setName] = React.useState('Maarten');
const [zipcode, setZipcode] = React.useState('6715GA');
const [houseNumber, setHouseNumber] = React.useState('3');
const start = () => {
if (name === '' || zipcode === '' || houseNumber === '') {
Message.error('Niet alle gegevens zijn ingevuld!');
return;
}
// TODO: Get device name
const deviceName = 'Test';
Request
.post('sessions/create', {
name: name,
zipcode: zipcode,
houseNumber: houseNumber,
device: deviceName,
})
.then((response) => {
if (!response.success) {
Message.error(response.message);
} else {
const token = response.token;
setToken(token);
router.replace("/(tabs)");
Message.success(response.message);
}
});
}
return (
<>
<Stack.Screen options={{title: 'Welkom'}}/>
<ThemedView style={styles.container}>
<ThemedView style={styles.heading}>
<ThemedText type="title">Welkom bij </ThemedText>
<ThemedText type="title" style={{color: Colors[colorScheme].tint}}>Kliko</ThemedText>
</ThemedView>
<ThemedView style={styles.inputContainer}>
<ThemedText>Wat is je naam?</ThemedText>
<TextInput
style={styles.input}
onChangeText={setName}
placeholder={'Je naam'}
value={name}
/>
</ThemedView>
<ThemedView style={styles.inputContainer}>
<ThemedText>Wat is je postcode en huisnummer?</ThemedText>
<TextInput
style={styles.input}
onChangeText={setZipcode}
placeholder={'Postcode'}
value={zipcode}
/>
<TextInput
style={styles.input}
onChangeText={setHouseNumber}
placeholder={'Huisnummer'}
value={houseNumber}
keyboardType="numeric"
/>
</ThemedView>
<TouchableOpacity style={{...styles.button, backgroundColor: Colors[colorScheme].tint}} onPress={start}>
<ThemedText style={{color: '#fff'}}>Start</ThemedText>
</TouchableOpacity>
</ThemedView>
</>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
heading: {
marginBottom: 30,
alignItems: 'center',
justifyContent: 'center',
},
inputContainer: {
paddingTop: 20,
},
input: {
width: 250,
borderWidth: 1,
padding: 10,
paddingLeft: 20,
borderRadius: 3,
marginBottom: 10,
},
button: {
borderRadius: 5,
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 40,
paddingRight: 40,
marginTop: 30,
},
});