159 lines
4.4 KiB
TypeScript
159 lines
4.4 KiB
TypeScript
import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
|
import {
|
|
StyleService,
|
|
Text,
|
|
useStyleSheet,
|
|
useTheme,
|
|
} from '@ui-kitten/components'
|
|
import React from 'react'
|
|
import {
|
|
Image,
|
|
ImageStyle,
|
|
Keyboard,
|
|
TouchableOpacity,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
} from 'react-native'
|
|
import { useTranslation } from '../hooks/useTranslation'
|
|
import { Layout as LayoutStyle, Sizing, Typography } from '../styles'
|
|
import { fontSize } from '../styles/typography'
|
|
import { KeyboardAvoidingView } from '../ui/keyboardAvoidingView.component'
|
|
import { SafeAreaView } from '../ui/safeAreaView.component'
|
|
import { SettingsIcon } from './icon.component'
|
|
import { Login } from './login.component'
|
|
import { RootStackParamList } from './navigation.component'
|
|
|
|
const randomWord = (
|
|
t: (scope: I18n.Scope, options?: I18n.TranslateOptions | undefined) => string
|
|
) => {
|
|
const words = t('auth.words')
|
|
const keys = Object.keys(words)
|
|
|
|
const randomIndex: number = Math.floor(Math.random() * keys.length)
|
|
const argumentKey: string = keys[randomIndex]
|
|
|
|
return words[argumentKey]
|
|
}
|
|
|
|
interface AuthProps {
|
|
navigation: StackNavigationProp<RootStackParamList, 'Login'>
|
|
}
|
|
|
|
export const authRouteOptions = (): NativeStackNavigationOptions => {
|
|
return {
|
|
headerShown: false,
|
|
animationTypeForReplace: 'push',
|
|
animation: 'fade',
|
|
}
|
|
}
|
|
|
|
export const Auth: React.FC<AuthProps> = ({ navigation }) => {
|
|
const styles = useStyleSheet(themeStyles)
|
|
const colors = useTheme()
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<SafeAreaView>
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
|
<View style={LayoutStyle.flex.full}>
|
|
<TouchableOpacity
|
|
style={styles.settingsLink}
|
|
onPress={() => navigation.navigate('Settings')}
|
|
accessibilityHint={t('auth.a11y_navigate_to_settings', {
|
|
defaultValue: 'Navigerar till vyn för inställningar',
|
|
})}
|
|
accessibilityLabel={t('auth.a11y_settings', {
|
|
defaultValue: 'Inställningar',
|
|
})}
|
|
>
|
|
<View style={styles.language}>
|
|
<SettingsIcon
|
|
height={28}
|
|
width={28}
|
|
fill={colors['color-primary-500']}
|
|
/>
|
|
<Text style={styles.languageText}>{t('general.settings')}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
<KeyboardAvoidingView>
|
|
<View style={styles.content}>
|
|
<View style={styles.imageWrapper}>
|
|
<Image
|
|
source={require('../assets/boys.png')}
|
|
style={styles.image as ImageStyle}
|
|
accessibilityHint={t('login.a11y_image_two_boys', {
|
|
defaultValue: 'Bild på två personer som kollar i mobilen',
|
|
})}
|
|
resizeMode="contain"
|
|
accessibilityIgnoresInvertColors={false}
|
|
/>
|
|
</View>
|
|
<View style={styles.container}>
|
|
<Text
|
|
category="h1"
|
|
style={styles.header}
|
|
adjustsFontSizeToFit
|
|
numberOfLines={2}
|
|
>
|
|
Öppna skolplattformen
|
|
</Text>
|
|
<Login />
|
|
<Text category="c2" style={styles.subtitle}>
|
|
{t('auth.subtitle', {
|
|
word: randomWord(t),
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const themeStyles = StyleService.create({
|
|
container: {
|
|
...LayoutStyle.mainAxis.flexStart,
|
|
...LayoutStyle.crossAxis.flexEnd,
|
|
padding: Sizing.t6,
|
|
},
|
|
imageWrapper: {
|
|
flex: 1,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
image: {
|
|
...Sizing.aspectRatio(1.5, Sizing.Ratio['4:3']),
|
|
},
|
|
content: {
|
|
...LayoutStyle.flex.full,
|
|
},
|
|
header: {
|
|
width: '100%',
|
|
marginBottom: Sizing.t5,
|
|
fontFamily: 'Poppins-Black',
|
|
fontWeight: '900',
|
|
},
|
|
subtitle: {
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
...Typography.fontSize.xs,
|
|
marginTop: Sizing.t5,
|
|
},
|
|
language: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: Sizing.t3,
|
|
paddingLeft: Sizing.t5,
|
|
},
|
|
languageText: {
|
|
...fontSize.sm,
|
|
marginLeft: Sizing.t1,
|
|
},
|
|
settingsLink: {
|
|
alignSelf: 'flex-start',
|
|
zIndex: 1,
|
|
},
|
|
})
|