153 lines
5.5 KiB
JavaScript
153 lines
5.5 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { SafeAreaView, StyleSheet, Image, Linking } from 'react-native';
|
|
import { Button, Icon, Modal, Card, Text, ImageBackground, Divider, Layout, TopNavigation, Input } from '@ui-kitten/components';
|
|
import Personnummer from 'personnummer'
|
|
import useAsyncStorage from '@rnhooks/async-storage';
|
|
|
|
const baseUrl = 'https://api.skolplattformen.org'
|
|
const funArguments = ['öppna', 'roliga', 'fungerande', 'billiga', 'snabba', 'fria', 'efterlängtade', 'coolare', 'första', 'upplysta', 'hemmagjorda', 'bättre', 'rebelliska', 'enkla', 'operfekta', 'fantastiska', 'agila'] // TODO: add moare
|
|
|
|
export const Login = ({ navigation }) => {
|
|
const [visible, setVisible] = React.useState(false);
|
|
const [valid, setValid] = React.useState(false);
|
|
const [argument, setArgument] = React.useState('öppna');
|
|
const [error, setError] = React.useState(null);
|
|
const [hasBankId, setHasBankId] = React.useState(false);
|
|
const [socialSecurityNumber, setSocialSecurityNumber, clearSocialSecurityNumber] = useAsyncStorage('@socialSecurityNumber')
|
|
const [jwt, setJwt, clearJwt] = useAsyncStorage('@jwt')
|
|
|
|
useEffect(() => {
|
|
setValid(Personnummer.valid(socialSecurityNumber))
|
|
//setHasBankId(Linking.canOpenURL('bankid://'))
|
|
}, [socialSecurityNumber])
|
|
|
|
useEffect(() => {
|
|
setArgument(funArguments[Math.floor(Math.random() * funArguments.length)])
|
|
}, [])
|
|
|
|
const navigateToChildren = (children) => {
|
|
console.log('continuing..')
|
|
navigation.navigate('Children', {children});
|
|
};
|
|
|
|
const SecureIcon = (style) => (
|
|
<Icon {...style} name='keypad-outline' />
|
|
)
|
|
const CheckIcon = (style) => (
|
|
<Icon {...style} name='checkmark-outline' />
|
|
)
|
|
const LogoutIcon = (style) => (
|
|
<Icon {...style} name='close-outline' />
|
|
)
|
|
const PersonIcon = (style) => (
|
|
<Icon {...style} name='person-outline' />
|
|
)
|
|
|
|
const handleInput = (text) => {
|
|
const isValid = Personnummer.valid(text)
|
|
setValid(isValid)
|
|
|
|
if (isValid) {
|
|
const parsedInput = Personnummer.parse(text).format(true)
|
|
setSocialSecurityNumber(parsedInput)
|
|
} else {
|
|
setSocialSecurityNumber(text)
|
|
}
|
|
}
|
|
|
|
const startLogin = async () => {
|
|
setVisible(true)
|
|
try {
|
|
console.log('requesting login for', socialSecurityNumber)
|
|
const token = await fetch(`${baseUrl}/login?socialSecurityNumber=${socialSecurityNumber}`, {method: 'POST'}).then(res => res.json())
|
|
|
|
console.log('got token', token)
|
|
try {if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)} catch(err){ setHasBankId(false)}
|
|
const jwt = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.ok ? res : Promise.reject(res.json())).then(res => res.json())
|
|
await setJwt(jwt.token || jwt)
|
|
setVisible(false)
|
|
if (jwt) return navigateToChildren([])
|
|
} catch (err) {
|
|
console.error(err)
|
|
setError(err.message || err)
|
|
}
|
|
}
|
|
|
|
const logout = async () => {
|
|
setVisible(false)
|
|
clearJwt()
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
|
|
<TopNavigation title={`Skolplattformen.org - det ${argument} alternativet`} alignment='center'/>
|
|
{jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20}}>
|
|
|
|
<Image source={require('../assets/undraw_studying_s3l7.png')} style={{height: 400, width: '100%'}}></Image>
|
|
<Text category="h3">{socialSecurityNumber}</Text>
|
|
<Button
|
|
status="success"
|
|
size="medium"
|
|
style={{marginTop: 10, width: 200}}
|
|
accessoryRight = {CheckIcon}
|
|
onPress={() => navigateToChildren()}>
|
|
Fortsätt
|
|
</Button>
|
|
<Button
|
|
onPress={() => logout()}
|
|
accessoryRight={LogoutIcon}
|
|
style={{marginTop: 10, width: 200}}
|
|
size="medium">
|
|
Logga ut
|
|
</Button>
|
|
|
|
|
|
</Layout>
|
|
: <Layout style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
|
<Image source={require('../assets/undraw_back_to_school_inwc.png')} style={{height: 400, width: '100%'}}></Image>
|
|
<Text category="h3">Vårdnadshavare</Text>
|
|
<Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
|
|
accessoryLeft = {PersonIcon}
|
|
caption={error && error.message || ''}
|
|
onChangeText = {text => handleInput(text)}
|
|
placeholder="Ditt personnr (10 eller 12 siffror)"/>
|
|
<Button onPress={startLogin} style={{marginTop: 7, width: "100%"}}
|
|
appearence='ghost'
|
|
disabled={!valid}
|
|
status='primary'
|
|
accessoryRight={SecureIcon}
|
|
size='medium'>
|
|
Öppna BankID
|
|
</Button>
|
|
</Layout>
|
|
}
|
|
<Modal
|
|
visible={visible}
|
|
style={styles.modal}
|
|
backdropStyle={styles.backdrop}
|
|
onBackdropPress={() => setVisible(false)}>
|
|
<Card disabled={true}>
|
|
{hasBankId ? <Text style={{margin: 10}}>Öppnar BankID. Växla tillbaka till denna app sen.</Text> : <Text style={{margin: 10}}>Väntar på BankID...</Text>}
|
|
|
|
<Button
|
|
visible={!jwt}
|
|
onPress={() => setVisible(false)}>
|
|
Avbryt
|
|
</Button>
|
|
</Card>
|
|
</Modal>
|
|
</SafeAreaView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
minHeight: 192,
|
|
},
|
|
modal: {
|
|
width: "80%"
|
|
},
|
|
backdrop: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
}); |