Skip to content

2
240
Commit 06fd6461 authored by Malsha Rathnasiri's avatar Malsha Rathnasiri
Browse files
Options

tts and chat screen design

parent 21820ebf
Show whitespace changes
Inline Side-by-side
Showing with 351 additions and 168 deletions
MobileApp/api/Authentication.js
View file @ 06fd6461
......@@ -48,6 +48,13 @@ import { Platform } from 'react-native'
// const endpoint = getEnvironment().endpoint;
export const isLoggedIn = async () => {
const token = await AsyncStorage.getItem('access_token')
console.log({ token })
return !!token
}
export const login = async (username, password) => {
const endpoint = false ? 'register' : 'login';
......@@ -69,13 +76,17 @@ export const login = async (username, password) => {
axios.defaults.headers.common.Authorization = `Token ${access}`;
if (Platform.OS = 'web') {
console.log('no storage')
await AsyncStorage.setItem('user_id', user.id)
await AsyncStorage.setItem('username', user.username)
await AsyncStorage.setItem('user_email', user.email)
await AsyncStorage.setItem('access_token', access)
await AsyncStorage.setItem('refresh_token', refresh)
} else {
await AsyncStorage.setItem('user_id', user.id)
await AsyncStorage.setitem('username', user.username)
// AsyncStorage.setItem('user_email', user.email)
// AsyncStorage.setitem('access_token', access)
// AsyncStorage.setItem('refresh_token', refresh)
await AsyncStorage.setItem('username', user.username)
await AsyncStorage.setItem('user_email', user.email)
await AsyncStorage.setitem('access_token', access)
await AsyncStorage.setItem('refresh_token', refresh)
}
console.log("login successful")
......@@ -90,6 +101,10 @@ export const login = async (username, password) => {
}
export const logout = async () => {
await AsyncStorage.clear()
}
// export const AuthProvider = ({ children }) => {
// const [isLoggedIn, setIsLoggedIn] = useState(false);
......
MobileApp/api/api.js
View file @ 06fd6461
import { BACKEND_URL } from "./constants"
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from "@react-navigation/native";
const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjYxMzU2NDA5LCJpYXQiOjE2NjAxNDY4MDksImp0aSI6ImFhMTljMmY2ZDNkMzRiNDdhZmZmM2FjMzVjNzI4MWJhIiwidXNlcl9pZCI6MX0.IVzibo_Rf2xzoT1J5o1L3zwu3mco6ODcNPC-7imu3Lo"
const headers = new Headers({ authorization: `Bearer ${token}`, 'Content-Type': 'application/json' })
export const create = (resource, values) => {
//"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjYxMzU2NDA5LCJpYXQiOjE2NjAxNDY4MDksImp0aSI6ImFhMTljMmY2ZDNkMzRiNDdhZmZmM2FjMzVjNzI4MWJhIiwidXNlcl9pZCI6MX0.IVzibo_Rf2xzoT1J5o1L3zwu3mco6ODcNPC-7imu3Lo"
// const headers =
const getHeaders = async () => {
var token = await AsyncStorage.getItem('access_token')
return new Headers({ authorization: `Bearer ${token}`, 'Content-Type': 'application/json' })
}
export const create = async (resource, values) => {
const headers = await getHeaders()
try {
return fetch(`${BACKEND_URL}/${resource}/`, { method: 'POST', body: JSON.stringify(values), headers })
}
......@@ -12,6 +23,7 @@ export const create = (resource, values) => {
}
}
export const getList = (resource) => {
export const getList = async (resource) => {
const headers = await getHeaders()
return fetch(`${BACKEND_URL}/${resource}/`, { method: 'GET', headers: headers })
}
\ No newline at end of file
MobileApp/api/constants.js
View file @ 06fd6461
// export const BACKEND_URL = "http://192.168.8.103:8000"
export const BACKEND_ADDRESS = "0be4-123-231-126-225.in.ngrok.io"
export const BACKEND_URL = `https:/${BACKEND_ADDRESS}`
\ No newline at end of file
export const BACKEND_ADDRESS = "127.0.0.1:8000"
export const BACKEND_URL = `http://${BACKEND_ADDRESS}`
\ No newline at end of file
MobileApp/components/AudioRecorder.jsx
View file @ 06fd6461
......@@ -73,7 +73,7 @@ export const AudioRecorder = ({ setDetectedText }) => {
return (
<Button
style={{ height: '100%', padding: 5 }}
title={recording ? 'Stop Recording' : 'Start Recording'}
title={recording ? 'Stop' : 'Record'}
onPress={recording ? stopRecording : startRecording}
/>
......
MobileApp/components/PlayMessage.jsx 0 → 100644
View file @ 06fd6461
import { Ionicons } from "@expo/vector-icons";
import React, { useState } from "react";
import { View } from "react-native";
import { styles } from "../util/styles";
import * as Speech from 'expo-speech';
export const PlayMessage = ({ message }) => {
const [isPlaying, setIsPlaying] = useState(false)
const [isTtsReady, setIsTtsReady] = useState(false)
// // Tts.setDucking(true);
// Tts.addEventListener('tts-start', (event) => console.log("start"));
// Tts.addEventListener('tts-finish', (event) => console.log("finish"));
// const synth = window.speechSynthesis;
// const speech = new SpeechSynthesisUtterance(message)
// speech.lang = 'en'
// speech.onend((e) => console.log('end'))
const onSpeechDone = (props) => {
setIsPlaying(false)
}
const onPlayPress = () => {
setIsPlaying(true)
// synth.speak(speech)
Speech.speak(message, { onDone: onSpeechDone });
// speech.onend((e) => console.log('end'))
}
const onStopPress = () => {
Speech.stop()
setIsPlaying(false)
}
if (!isPlaying) {
return (
<Ionicons name="play" size={15} style={styles.chatIcon} onPress={onPlayPress} />
)
}
else {
return (
<Ionicons name="stop" size={15} style={styles.chatIcon} onPress={onStopPress} />
)
}
}
\ No newline at end of file
MobileApp/navigation/index.jsx
View file @ 06fd6461
......@@ -7,27 +7,31 @@ import { FontAwesome } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Toast } from 'native-base';
import { Center, Toast } from 'native-base';
import * as React from 'react';
import { ColorSchemeName, Pressable } from 'react-native';
import { login } from '../api/Authentication';
import { ColorSchemeName, Pressable, View, Button, Text, Image } from 'react-native';
import { isLoggedIn, login, logout } from '../api/Authentication';
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import { LoginScreen } from '../screens/loginScreen';
import ModalScreen from '../screens/ModalScreen';
import NotFoundScreen from '../screens/NotFoundScreen';
import { SignupScreen } from '../screens/SignupScreen';
import ChatScreen from '../screens/TabOneScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
import { ERROR_TOAST_PROPS } from '../util/util';
import LinkingConfiguration from './LinkingConfiguration';
import Small_logo from '../assets/images/Logo_small.jpeg'
export default function Navigation({ colorScheme }) {
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === 'dark' || true ? DarkTheme : DefaultTheme}>
theme={colorScheme === 'dark' && false ? DarkTheme : DefaultTheme}>
<RootNavigator />
</NavigationContainer>
);
......@@ -40,8 +44,9 @@ export default function Navigation({ colorScheme }) {
const Stack = createNativeStackNavigator();
function RootNavigator() {
const [isAuthenticated, setIsAutheticated] = React.useState(true)
const [isAuthenticated, setIsAutheticated] = React.useState(false)
isLoggedIn().then((res) => setIsAutheticated(true))
// console.log({ isLogged })
const onLogin = async (username, password) => {
await login(username, password).then(() => setIsAutheticated(true)).catch(e => {
......@@ -51,14 +56,16 @@ function RootNavigator() {
}
const onLogout = () => {
logout()
setIsAutheticated(false)
}
return (
<Stack.Navigator >
{isAuthenticated ? <Stack.Screen name="Root" options={{ headerShown: false }}>{(props) => <BottomTabNavigator {...props} onLogout={onLogout} />}</Stack.Screen> :
<Stack.Screen name='Root'>{(props) => <LoginScreen {...props} onLogin={onLogin} />}</Stack.Screen>}
<Stack.Screen name='Root' options={{ headerShown: false }}>{(props) => <LoginScreen {...props} onLogin={onLogin} />}</Stack.Screen>}
<Stack.Screen name='Signup' component={SignupScreen} options={{ headerShown: false, title: 'Sign up' }} />
<Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
<Stack.Group screenOptions={{ presentation: 'modal' }}>
......@@ -81,14 +88,25 @@ function BottomTabNavigator({ onLogout }) {
<BottomTab.Navigator
initialRouteName="TabOne"
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme].tint,
tabBarActiveBackgroundColor: 'lightgray',
tabBarActiveTintColor: 'blue' //Colors[colorScheme].tint,
}}>
<BottomTab.Screen
name="TabTwo"
component={TabTwoScreen}
options={{
title: 'Map',
tabBarIcon: ({ color }) => <TabBarIcon name="map" color={color} />,
}}
/>
<BottomTab.Screen
name="TabOne"
component={ChatScreen}
options={({ navigation }) => ({
title: 'Chat',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
headerTitleAlign: 'center',
tabBarIcon: ({ color }) => <TabBarIcon name="comments" color={color} />,
headerLeft: () => (<Image source={Small_logo} style={{height: 40, width: 70, marginLeft: 20}}/>),
headerRight: () => (
<Pressable
// onPress={() => navigation.navigate('Modal')}
......@@ -99,21 +117,14 @@ function BottomTabNavigator({ onLogout }) {
<FontAwesome
name="info-circle"
size={25}
color={Colors[colorScheme].text}
// color={Colors[colorScheme].text}
style={{ marginRight: 15 }}
/>
</Pressable>
),
})}
/>
<BottomTab.Screen
name="TabTwo"
component={TabTwoScreen}
options={{
title: 'Tab Two',
tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
}}
/>
</BottomTab.Navigator>
);
}
......
MobileApp/package.json
View file @ 06fd6461
......@@ -16,6 +16,7 @@
"dependencies": {
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/slider": "4.1.12",
"@react-navigation/bottom-tabs": "^6.0.5",
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.1.0",
......@@ -28,6 +29,7 @@
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-media-library": "~14.0.0",
"expo-speech": "~10.1.0",
"expo-splash-screen": "~0.14.0",
"expo-status-bar": "~1.2.0",
"expo-web-browser": "~10.1.0",
......
MobileApp/screens/SignupScreen.jsx 0 → 100644
View file @ 06fd6461
import React from "react";
import { View, Button, Text } from 'react-native'
import { styles } from "../util/styles";
export const SignupScreen = ({ navigation }) => {
return (
<View style={styles.container}><Text style={{
padding: 10,
textAlign: 'center',
// fontWeight: 'bold',
fontSize: 40
}}>Sign up</Text>
<View style={{ flexDirection: 'row', padding: 10, justifyContent: 'center' }}>
<Text style={{ textAlign: 'center' }}>Already have an account? </Text>
<Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Root')}>Login</Text>
</View>
<SignupForm />
</View>
)
}
const SignupForm = () => {
return(
<View>
</View>
)
}
\ No newline at end of file
MobileApp/screens/TabOneScreen.jsx
View file @ 06fd6461
import React, { useEffect, useState } from 'react'
import { FlatList, StyleSheet, TextInput, SectionList, Button, ActivityIndicator } from 'react-native';
import { FlatList, StyleSheet, TextInput, SectionList, Button, ActivityIndicator, View, Text } from 'react-native';
import { AudioRecorder } from '../components/AudioRecorder';
import _ from 'lodash'
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
// import { Text, View } from '../components/Themed';
import { RootTabScreenProps } from '../types';
import { create, getList } from '../api/api';
import { BACKEND_ADDRESS } from '../api/constants';
import Ionicons from '@expo/vector-icons/Ionicons';
import { styles } from '../util/styles';
import { StatusBar } from 'expo-status-bar';
import Slider from '@react-native-community/slider';
import { PlayMessage } from '../components/PlayMessage';
export default function ChatScreen({ navigation }) {
const currentTime = new Date()
const defaultChatData = [{ from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 1) },
{ from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 2) },
{ from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 3), is_detected: false },
{ from_user: 1, to_user: 2, message: 'left', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 4), is_detected: true },
{ from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 5) },
{ from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setDate(currentTime.getDate() - 1) },
{ from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setDate(currentTime.getDate() - 2) },
{ from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setDate(currentTime.getDate() - 3) },
{ from_user: 1, to_user: 2, message: 'msg4', timestamp: currentTime.setDate(currentTime.getDate() - 4) },
{ from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setDate(currentTime.getDate() - 5) },
const defaultChatData = [{ id: 1, from_user: 2, to_user: 1, message: 'How many passengers?', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 1).valueOf() },
{ id: 2, from_user: 1, to_user: 2, message: 'Three', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 2).valueOf(), is_detected: true },
{ id: 3, from_user: 2, to_user: 1, message: 'Should i turn left or right here?', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 3).valueOf(), is_detected: false },
{ id: 4, from_user: 1, to_user: 2, message: 'Left', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 4).valueOf(), is_detected: true },
{ id: 5, from_user: 1, to_user: 2, message: 'Please hurry', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 5).valueOf() },
{ id: 6, from_user: 2, to_user: 1, message: 'Ok', timestamp: currentTime.setMinutes(currentTime.getMinutes() - 6).valueOf() },
// { from_user: 1, to_user: 2, message: 'msg1', timestamp: currentTime.setDate(currentTime.getDate() - 1).valueOf() },
// { from_user: 1, to_user: 2, message: 'msg2', timestamp: currentTime.setDate(currentTime.getDate() - 2).valueOf() },
// { from_user: 2, to_user: 1, message: 'msg3', timestamp: currentTime.setDate(currentTime.getDate() - 3).valueOf() },
// { from_user: 1, to_user: 2, message: 'msg4', timestamp: currentTime.setDate(currentTime.getDate() - 4).valueOf() },
// { from_user: 2, to_user: 1, message: 'msg5', timestamp: currentTime.setDate(currentTime.getDate() - 5).valueOf() },
]
const [detectedText, setDetectedText] = useState("")
const [playinId, setPlayingId] = useState(3)
const [chatDetails, setChatDetails] = useState({ from_user: 1, to_user: 2, conversation_id: 1 })
const [chats, setChats] = useState([])
const [input, setInput] = useState('test')
const [loading, setLoading] = useState(true)
const ws = new WebSocket(`ws://${BACKEND_ADDRESS}/chatSocket/`)
const loadSampleChats = () => {
const chats_ = defaultChatData//res.results
const sections = [...new Set(chats_.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => {
console.log({ section })
return ({
title: section, data: chats_.filter(chat => {
console.log({ chat })
return (new Date(chat.timestamp).setHours(0, 0, 0, 0).valueOf() == section)
}).sort((a, b) => { return (a.timestamp - b.timestamp) })
})
})
console.log({ chats_, sections, sectionChats })
setChats(sectionChats)
console.log({ chats })
}
// const ws = new WebSocket(`ws://${BACKEND_ADDRESS}/chatSocket/`)
useEffect(() => {
// loadChats()
loadChats()
// startWebsocket()
loadSampleChats()
setLoading(false)
}, [])
const startWebsocket = () => {
ws.onopen = () => {
// on connecting, do nothing but log it to the console
console.log('connected')
}
// const startWebsocket = () => {
// ws.onopen = () => {
// // on connecting, do nothing but log it to the console
// console.log('connected')
// }
ws.onmessage = evt => {
// listen to data sent from the websocket server
const message = JSON.parse(evt.data)
// setState({ dataFromServer: message })
console.log(message)
}
// ws.onmessage = evt => {
// // listen to data sent from the websocket server
// const message = JSON.parse(evt.data)
// // setState({ dataFromServer: message })
// console.log(message)
// }
ws.onclose = () => {
console.log('disconnected')
// automatically try to reconnect on connection loss
// ws.onclose = () => {
// console.log('disconnected')
// // automatically try to reconnect on connection loss
}
// }
}
// }
const loadSampleChats = () => {
const chats_ = defaultChatData//res.results
const sections = [...new Set(chats_.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) }))
setChats(sectionChats)
console.log({chats})
}
const loadChats = async () => {
await getList('chats').then(res => {
return res.json()
}).then(res => {
// console.log(res)
const chats = res.results
const sections = [...new Set(chats.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) }))
setChats(sectionChats)
})
// await getList('chats').then(res => {
// return res.json()
// }).then(res => {
// // console.log(res)
// const chats = res.results
// const sections = [...new Set(chats.map(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0)))];
// const sectionChats = sections.map(section => ({ title: section, data: chats.filter(chat => new Date(chat.timestamp).setHours(0, 0, 0, 0) == section) }))
// setChats(sectionChats)
// })
setLoading(false)
}
......@@ -109,13 +121,12 @@ export default function ChatScreen({ navigation }) {
<View style={{ flex: 1, width: '100%' }}>
<View style={{ display: 'flex', flex: 0.9, justifyContent: 'space-between' }}>
{/* <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}><Text style={{ fontSize: 50, color: 'white' }}>{detectedText}</Text>
</View> */}
<StatusBar />
{loading ? <ActivityIndicator /> :
<SectionList
refreshing={loading}
onRefresh={() => loadChats()}
// onRefresh={() => loadChats()}
inverted={true}
sections={chats}
keyExtractor={(item, index) => item + index}
......@@ -123,11 +134,29 @@ export default function ChatScreen({ navigation }) {
// console.log({ item })
return (
<View style={{ margin: 5, padding: 5 }}><Text
style={[{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', backgroundColor: chatDetails.from_user == item.from_user ? 'blue' : 'green', borderRadius: 5, padding: 5 },
style={[{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', backgroundColor: chatDetails.from_user == item.from_user ? 'lightgray' : '#FFDE03', borderRadius: 5, padding: 5 },
chatDetails.from_user == item.from_user ? { marginLeft: 'auto' } : { marginRight: 'auto' }
]}
key={item.time}>{item.message}</Text>
<Text style={{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', color: 'gray', fontSize: 11 }}>{new Date(item.timestamp).toLocaleTimeString()}</Text></View>
key={item.timestamp}>{item.message}</Text>
<View style={{ flex: 1, flexDirection: chatDetails.from_user == item.from_user ? 'row-reverse' : 'row', textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left' }}>
<Text style={{ textAlign: chatDetails.from_user == item.from_user ? 'right' : 'left', color: 'gray', fontSize: 11 }}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
{item.is_detected && <Ionicons name="mic" size={15} style={{}} />}
{/* {chatDetails.to_user == item.from_user && item.id != playinId && <Ionicons name="play" size={15} style={styles.chatIcon} />}
{chatDetails.to_user == item.from_user && item.id == playinId && <Ionicons name="pause" size={15} style={styles.chatIcon} />} */}
{chatDetails.to_user == item.from_user && <PlayMessage message={item.message} />}
</View>
{/* {item.id == playinId ?
<Slider
style={{ width: 200, height: 40, FborderRadius: 5, padding: 0, margin: 0 }}
minimumValue={0}
maximumValue={1}
value={0.67}
minimumTrackTintColor="black"
maximumTrackTintColor="grey"
/> : null
} */}
</View>
)
}}
invertStickyHeaders
......@@ -145,7 +174,6 @@ export default function ChatScreen({ navigation }) {
return (
<Text style={styles.header}>{date}</Text>
)
}}
/>
}
......@@ -168,20 +196,20 @@ export default function ChatScreen({ navigation }) {
</View>
<View style={{ flex: 0.1, backgroundColor: 'rgb(10,10,10)' }}>
<View style={{ flex: 0.075, padding:0, backgroundColor: 'white'}}>
<View style={{ flexDirection: 'row', display: 'flex', height: '100%' }}>
<View style={{ flex: 0.8, backgroundColor: 'rgb(10,10,10)', height: '100%' }}>
<View style={{ flex: 0.8, height: '100%', flexDirection: 'column-reverse' }}>
<TextInput
style={{ borderWidth: 2, borderColor: 'gray', color: 'white', padding: 5, borderRadius: 5 }}
style={{ borderWidth: 2, borderColor: 'gray', color: 'black', marginHorizontal: 5,paddingHorizontal: 10, borderRadius: 5 }}
defaultValue={input}
onChange={(e) => setInput(e.target.value)}></TextInput>
</View>
{input ?
<View style={{ flex: 0.2, backgroundColor: 'rgb(10,10,10)', height: '100%' }}>
<Button style={{ width: '100%', backgroundColor: 'rgb(10,10,10)', height: '100%' }} title='Send' onPress={onSendPress} />
<View style={{ flex: 0.2, height: '100%', flexDirection: 'column-reverse' }}>
<Button style={{ width: '100%', height: '100%' }} title='Send' onPress={onSendPress} />
</View>
:
<View style={{ flex: 0.2, backgroundColor: 'rgb(10,10,10)', height: '100%' }}><AudioRecorder setDetectedText={setInput} /></View>
<View style={{ flex: 0.2, height: '100%', flexDirection: 'column-reverse' }}><AudioRecorder setDetectedText={setInput} /></View>
}
</View>
</View>
......@@ -191,23 +219,4 @@ export default function ChatScreen({ navigation }) {
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
convoFooter: {
},
header: { textAlign: 'center', backgroundColor: 'gray', marginRight: 'auto', marginLeft: 'auto', padding: 3, borderRadius: 5 }
});
MobileApp/screens/loginScreen.js
View file @ 06fd6461
import React, { useState } from 'react'
import { StyleSheet, TextInput } from 'react-native';
import { StyleSheet, TextInput, Button, Image, Dimensions, View, Text } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
// import { Text, View } from '../components/Themed';
import { TouchableOpacity } from 'react-native';
import { Toast } from 'native-base';
import { ERROR_TOAST_PROPS } from '../util/util';
import { screenWidth, styles } from '../util/styles';
import TTS_logo from '../assets/images/TTS_logo.jpeg'
const LoginForm = ({ onLogin }) => {
const LoginForm = ({ onLogin, navigation }) => {
var passwordInput
......@@ -20,14 +22,16 @@ const LoginForm = ({ onLogin }) => {
defaultValue={username}
onChangeText={(e) => {
console.log(e);
setUsername(e)}}
setUsername(e)
}}
autoCapitalize="none"
onSubmitEditing={() => passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Email'
placeholderTextColor='rgba(225,225,225,0.7)' />
// placeholderTextColor='rgba(225,225,225,0.7)'
/>
<TextInput style={styles.input}
defaultValue={password}
......@@ -35,7 +39,7 @@ const LoginForm = ({ onLogin }) => {
returnKeyType="go"
ref={(input) => passwordInput = input}
placeholder='Password'
placeholderTextColor='rgba(225,225,225,0.7)'
// placeholderTextColor='rgba(225,225,225,0.7)'
secureTextEntry />
<TouchableOpacity style={styles.buttonContainer}
......@@ -43,9 +47,9 @@ const LoginForm = ({ onLogin }) => {
// disabled={!username || !password}
onPress={() => {
console.log({ username, password })
if(!username || !password){
Toast.show({title: 'Please fill in all the fields!', ...ERROR_TOAST_PROPS})
}else{
if (!username || !password) {
Toast.show({ title: 'Please fill in all the fields!', ...ERROR_TOAST_PROPS })
} else {
onLogin(username, password)
}
......@@ -58,11 +62,24 @@ const LoginForm = ({ onLogin }) => {
)
}
export const LoginScreen = ({ onLogin }) => {
export const LoginScreen = ({ onLogin, navigation }) => {
return (
<View style={styles.container}>
<View style={{ alignContent: 'center', justifyContent: 'center' }}>
<Image source={TTS_logo} style={{ height: screenWidth - 30, width: screenWidth - 30, margin: 'auto' }} />
</View>
<Text style={{
padding: 10,
textAlign: 'center',
// fontWeight: 'bold',
fontSize: 40
}}>Login</Text>
<View style={{ flexDirection: 'row', padding: 10, justifyContent: 'center' }}>
<Text style={{ textAlign: 'center' }}>Don't have an account? </Text>
<Text style={{ fontWeight: 'bold', textAlign: 'center', }} onPress={() => navigation.replace('Signup')}>Sign up</Text>
</View>
<View style={styles.loginContainer}>
{/* r<Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} /> */}
</View>
......@@ -74,43 +91,3 @@ export const LoginScreen = ({ onLogin }) => {
);
}
\ No newline at end of file
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#2c3e50',
},
loginContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
position: 'absolute',
width: 300,
height: 100
},
container: {
padding: 20
},
input: {
height: 40,
backgroundColor: 'rgba(225,225,225,0.2)',
marginBottom: 10,
padding: 10,
color: '#fff'
},
buttonContainer: {
backgroundColor: '#2980b6',
paddingVertical: 15
},
buttonText: {
color: '#fff',
textAlign: 'center',
fontWeight: '700'
}
})
\ No newline at end of file
MobileApp/util/styles.jsx 0 → 100644
View file @ 06fd6461
import { StyleSheet, Dimensions } from "react-native"
export const screenWidth = Dimensions.get('window').width
export const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: '#2c3e50',
// },
loginContainer: {
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
position: 'absolute',
width: 300,
height: 100
},
container: {
padding: 20,
backgroundColor: 'white'
},
input: {
height: 40,
backgroundColor: 'rgba(225,225,225,0.2)',
marginBottom: 10,
padding: 10,
// color: '#fff',
borderRadius: 5,
},
buttonContainer: {
backgroundColor: '#2980b6',
paddingVertical: 15,
borderRadius: 5
},
buttonText: {
// color: '#fff',
textAlign: 'center',
fontWeight: '700'
},
chatIcon: {
paddingHorizontal: 4
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
convoFooter: {
},
header: { textAlign: 'center', backgroundColor: 'gray', marginRight: 'auto', marginLeft: 'auto', padding: 3, borderRadius: 5 }
})
\ No newline at end of file
MobileApp/util/util.js
View file @ 06fd6461
export const TOAST_PROPS = {placement : 'top'}
export const ERROR_TOAST_PROPS = {...TOAST_PROPS, style:{backgroundColor: 'red'}}
\ No newline at end of file
export const ERROR_TOAST_PROPS = {...TOAST_PROPS, style:{backgroundColor: '#B00020'}}
\ No newline at end of file
MobileApp/yarn.lock
View file @ 06fd6461
......@@ -2159,6 +2159,11 @@
sudo-prompt "^9.0.0"
wcwidth "^1.0.1"
"@react-native-community/slider@4.1.12":
version "4.1.12"
resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.1.12.tgz#279ff7bbe487af92ad95ec758a029a54569e2a62"
integrity sha512-CiuLZ2orueBiWHYxfaJF57jQY6HY2Q3z5pdAE4MKH8EqIImr/jgDJrJ/UxOVZHK1Ng9P+XlGIKfVIcuWZ6guuA==
"@react-native/assets@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
......@@ -4221,6 +4226,11 @@ expo-modules-core@0.6.5:
compare-versions "^3.4.0"
invariant "^2.2.4"
expo-speech@~10.1.0:
version "10.1.1"
resolved "https://registry.yarnpkg.com/expo-speech/-/expo-speech-10.1.1.tgz#fc4a820fd1bd6203c388837ab3947e24242c3615"
integrity sha512-tovcfD3Qi5WvY91d+N+dMVDMz+GwW/c9ze/Ct3cZQLBJQubqlVtlDqb/cDD2Uwuwb+zjAH3N6NfAFSgCdhqwAQ==
expo-splash-screen@~0.14.0:
version "0.14.2"
resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.14.2.tgz#2598d6980e71ecd8b7467ca821fb9dbfb80f355b"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment