2021-04-14 14:13:43 +00:00
|
|
|
import {
|
|
|
|
Layout,
|
|
|
|
Text,
|
|
|
|
TopNavigation,
|
|
|
|
TopNavigationAction,
|
2021-05-06 12:35:11 +00:00
|
|
|
StyleService,
|
|
|
|
useStyleSheet,
|
2021-04-14 14:13:43 +00:00
|
|
|
} from '@ui-kitten/components'
|
2021-04-13 14:28:15 +00:00
|
|
|
import React from 'react'
|
2021-05-15 16:15:55 +00:00
|
|
|
import { Keyboard, TouchableWithoutFeedback, View, Image } from 'react-native'
|
2021-02-23 08:11:27 +00:00
|
|
|
import { Login } from './login.component'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
|
|
|
|
import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
|
2021-05-11 09:57:54 +00:00
|
|
|
import { translate, languages } from '../utils/translation'
|
2021-04-14 14:13:43 +00:00
|
|
|
import { GlobeIcon } from './icon.component'
|
2021-04-14 14:55:32 +00:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
|
|
|
import { RootStackParamList } from './navigation.component'
|
2021-05-06 12:35:11 +00:00
|
|
|
import { SafeAreaView } from '../ui/safeAreaView.component'
|
|
|
|
import { KeyboardAvoidingView } from '../ui/keyboardAvoidingView.component'
|
2021-05-11 09:55:25 +00:00
|
|
|
import { LanguageService } from '../services/languageService'
|
2021-02-23 08:11:27 +00:00
|
|
|
|
2021-04-13 14:28:15 +00:00
|
|
|
const randomWord = () => {
|
|
|
|
const words = translate('auth.words')
|
|
|
|
const keys = Object.keys(words)
|
2021-02-23 08:11:27 +00:00
|
|
|
|
2021-04-13 14:28:15 +00:00
|
|
|
const randomIndex: number = Math.floor(Math.random() * keys.length)
|
|
|
|
const argumentKey: string = keys[randomIndex]
|
|
|
|
|
|
|
|
// @ts-expect-error Fix this later
|
|
|
|
return words[argumentKey]
|
|
|
|
}
|
2021-02-23 08:11:27 +00:00
|
|
|
|
2021-04-14 14:55:32 +00:00
|
|
|
interface AuthProps {
|
|
|
|
navigation: StackNavigationProp<RootStackParamList, 'Login'>
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Auth: React.FC<AuthProps> = ({ navigation }) => {
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themeStyles)
|
|
|
|
|
2021-05-11 09:55:25 +00:00
|
|
|
const currentLanguage = LanguageService.getLanguageCode()
|
|
|
|
const currentLanguageName = languages.find(
|
|
|
|
(language) => language.langCode === currentLanguage
|
|
|
|
)?.languageLocalName
|
|
|
|
|
2021-03-25 13:21:50 +00:00
|
|
|
return (
|
2021-05-06 12:35:11 +00:00
|
|
|
<KeyboardAvoidingView>
|
2021-02-23 08:11:27 +00:00
|
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
2021-05-06 12:35:11 +00:00
|
|
|
<SafeAreaView>
|
2021-04-02 19:31:42 +00:00
|
|
|
<SafeAreaViewContainer>
|
2021-04-14 14:13:43 +00:00
|
|
|
<TopNavigation
|
2021-05-11 09:55:25 +00:00
|
|
|
alignment="start"
|
|
|
|
subtitle={currentLanguageName}
|
|
|
|
accessoryLeft={() => (
|
2021-04-14 14:13:43 +00:00
|
|
|
<TopNavigationAction
|
2021-05-12 09:16:13 +00:00
|
|
|
accessibilityHint={translate(
|
|
|
|
'auth.a11y_navigate_to_change_language',
|
|
|
|
{
|
2021-05-12 09:34:54 +00:00
|
|
|
defaultValue: 'Navigerar till vyn för att byta språk',
|
2021-05-12 09:16:13 +00:00
|
|
|
}
|
|
|
|
)}
|
2021-05-11 09:08:11 +00:00
|
|
|
accessibilityLabel={translate('auth.a11y_change_language', {
|
2021-05-12 09:16:13 +00:00
|
|
|
defaultValue: 'Byt språk',
|
2021-05-11 09:08:11 +00:00
|
|
|
})}
|
|
|
|
accessible={true}
|
2021-04-14 14:13:43 +00:00
|
|
|
icon={GlobeIcon}
|
|
|
|
onPress={() => navigation.navigate('SetLanguage')}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
/>
|
2021-04-02 19:31:42 +00:00
|
|
|
<View style={styles.content}>
|
2021-05-15 16:15:55 +00:00
|
|
|
<Image
|
|
|
|
source={require('../assets/boys.png')}
|
|
|
|
// @ts-expect-error Don't know why this occurs
|
|
|
|
style={styles.image}
|
|
|
|
accessibilityHint={translate('login.a11y_image_two_boys', {
|
|
|
|
defaultValue: 'Bild på två personer som kollar i mobilen',
|
|
|
|
})}
|
|
|
|
accessibilityIgnoresInvertColors={false}
|
|
|
|
/>
|
2021-04-02 19:31:42 +00:00
|
|
|
<Layout style={styles.container}>
|
2021-05-23 21:21:14 +00:00
|
|
|
<Text category="h1" style={styles.header} adjustsFontSizeToFit numberOfLines={2}>
|
2021-04-13 14:28:15 +00:00
|
|
|
{translate('general.title')}
|
2021-04-02 19:31:42 +00:00
|
|
|
</Text>
|
2021-05-15 16:15:55 +00:00
|
|
|
<Login />
|
|
|
|
<Text category="c2" style={styles.subtitle}>
|
2021-04-13 14:28:15 +00:00
|
|
|
{translate('auth.subtitle', {
|
|
|
|
word: randomWord(),
|
|
|
|
})}
|
2021-04-02 19:31:42 +00:00
|
|
|
</Text>
|
|
|
|
</Layout>
|
|
|
|
</View>
|
|
|
|
</SafeAreaViewContainer>
|
2021-02-23 08:11:27 +00:00
|
|
|
</SafeAreaView>
|
|
|
|
</TouchableWithoutFeedback>
|
|
|
|
</KeyboardAvoidingView>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themeStyles = StyleService.create({
|
2021-02-23 08:11:27 +00:00
|
|
|
container: {
|
2021-05-15 16:15:55 +00:00
|
|
|
...LayoutStyle.mainAxis.flexStart,
|
2021-03-31 08:16:41 +00:00
|
|
|
...LayoutStyle.crossAxis.flexEnd,
|
2021-05-15 16:35:06 +00:00
|
|
|
padding: Sizing.t6,
|
2021-02-23 08:11:27 +00:00
|
|
|
},
|
2021-05-15 16:15:55 +00:00
|
|
|
image: {
|
|
|
|
...Sizing.aspectRatio(1.7, Sizing.Ratio['4:3']),
|
|
|
|
marginLeft: '-17%',
|
|
|
|
},
|
2021-02-23 08:11:27 +00:00
|
|
|
content: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...LayoutStyle.flex.full,
|
2021-02-23 08:11:27 +00:00
|
|
|
},
|
2021-05-15 16:15:55 +00:00
|
|
|
header: {
|
2021-05-23 21:21:14 +00:00
|
|
|
width: '60%',
|
2021-05-15 16:15:55 +00:00
|
|
|
marginBottom: Sizing.t5,
|
|
|
|
},
|
2021-02-23 08:11:27 +00:00
|
|
|
subtitle: {
|
2021-05-15 16:35:06 +00:00
|
|
|
width: '100%',
|
2021-05-15 16:15:55 +00:00
|
|
|
textAlign: 'center',
|
|
|
|
...Typography.fontSize.xs,
|
|
|
|
color: 'color-basic-800',
|
|
|
|
marginTop: Sizing.t5,
|
2021-02-23 08:11:27 +00:00
|
|
|
},
|
|
|
|
})
|