2021-10-05 15:44:14 +00:00
|
|
|
import { useApi } from '@skolplattformen/hooks'
|
2021-02-23 08:11:27 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
ButtonGroup,
|
|
|
|
Card,
|
2021-05-25 12:17:15 +00:00
|
|
|
Divider,
|
2021-02-23 08:11:27 +00:00
|
|
|
Input,
|
2021-05-25 12:17:15 +00:00
|
|
|
List,
|
|
|
|
ListItem,
|
2021-02-23 08:11:27 +00:00
|
|
|
Modal,
|
2021-05-06 12:35:11 +00:00
|
|
|
StyleService,
|
2021-02-23 08:11:27 +00:00
|
|
|
Text,
|
2021-05-06 12:35:11 +00:00
|
|
|
useStyleSheet,
|
2021-02-23 08:11:27 +00:00
|
|
|
} from '@ui-kitten/components'
|
2021-02-15 12:33:47 +00:00
|
|
|
import Personnummer from 'personnummer'
|
2021-05-25 13:13:33 +00:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2021-02-07 16:14:45 +00:00
|
|
|
import {
|
2021-02-15 12:33:47 +00:00
|
|
|
Image,
|
|
|
|
Linking,
|
2021-02-07 16:14:45 +00:00
|
|
|
Platform,
|
2021-02-10 17:33:52 +00:00
|
|
|
TouchableWithoutFeedback,
|
2021-02-07 16:14:45 +00:00
|
|
|
View,
|
|
|
|
} from 'react-native'
|
2021-02-20 08:38:08 +00:00
|
|
|
import { schema } from '../app.json'
|
2021-09-29 15:31:47 +00:00
|
|
|
import useSettingsStorage from '../hooks/useSettingsStorage'
|
|
|
|
import { useTranslation } from '../hooks/useTranslation'
|
2021-05-15 16:15:55 +00:00
|
|
|
import { Layout } from '../styles'
|
2021-02-20 08:38:08 +00:00
|
|
|
import {
|
2021-05-25 13:09:19 +00:00
|
|
|
CheckIcon,
|
2021-02-20 08:38:08 +00:00
|
|
|
CloseOutlineIcon,
|
|
|
|
PersonIcon,
|
2021-02-23 08:11:27 +00:00
|
|
|
SelectIcon,
|
2021-02-20 08:38:08 +00:00
|
|
|
} from './icon.component'
|
2020-12-18 12:45:09 +00:00
|
|
|
|
2021-06-16 12:10:06 +00:00
|
|
|
const BankId = () => (
|
2021-05-15 16:15:55 +00:00
|
|
|
<Image
|
|
|
|
style={themedStyles.icon}
|
|
|
|
source={require('../assets/bankid_low_rgb.png')}
|
2021-06-16 12:10:06 +00:00
|
|
|
accessibilityIgnoresInvertColors
|
2021-05-15 16:15:55 +00:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
|
2021-03-26 09:34:11 +00:00
|
|
|
export const Login = () => {
|
|
|
|
const { api } = useApi()
|
|
|
|
const [cancelLoginRequest, setCancelLoginRequest] = useState<
|
|
|
|
(() => Promise<void>) | (() => null)
|
|
|
|
>(() => () => null)
|
2021-02-23 08:11:27 +00:00
|
|
|
const [visible, showModal] = useState(false)
|
2021-05-25 12:17:15 +00:00
|
|
|
const [showLoginMethod, setShowLoginMethod] = useState(false)
|
2021-03-26 09:34:11 +00:00
|
|
|
const [error, setError] = useState<string | null>(null)
|
2021-09-29 15:31:47 +00:00
|
|
|
const [personalIdNumber, setPersonalIdNumber] = useSettingsStorage(
|
|
|
|
'cachedPersonalIdentityNumber'
|
|
|
|
)
|
|
|
|
const [loginMethodIndex, setLoginMethodIndex] =
|
|
|
|
useSettingsStorage('loginMethodIndex')
|
|
|
|
const { t } = useTranslation()
|
|
|
|
|
|
|
|
const valid = Personnummer.valid(personalIdNumber)
|
2021-04-13 14:28:15 +00:00
|
|
|
|
2021-02-23 08:11:27 +00:00
|
|
|
const loginMethods = [
|
2021-09-29 15:31:47 +00:00
|
|
|
t('auth.bankid.OpenOnThisDevice'),
|
|
|
|
t('auth.bankid.OpenOnAnotherDevice'),
|
|
|
|
t('auth.loginAsTestUser'),
|
2021-02-23 08:11:27 +00:00
|
|
|
]
|
2021-06-16 12:10:06 +00:00
|
|
|
|
2021-01-15 09:17:58 +00:00
|
|
|
const loginHandler = async () => {
|
2021-01-04 10:56:20 +00:00
|
|
|
showModal(false)
|
2021-01-15 09:17:58 +00:00
|
|
|
}
|
|
|
|
|
2021-02-23 08:11:27 +00:00
|
|
|
useEffect(() => {
|
2021-02-07 16:14:45 +00:00
|
|
|
api.on('login', loginHandler)
|
2021-03-26 09:34:11 +00:00
|
|
|
return () => {
|
|
|
|
api.off('login', loginHandler)
|
|
|
|
}
|
2021-09-23 08:40:36 +00:00
|
|
|
}, [api])
|
2021-01-04 11:01:03 +00:00
|
|
|
|
2021-01-04 10:56:20 +00:00
|
|
|
/* Helpers */
|
2021-03-26 09:34:11 +00:00
|
|
|
const handleInput = (text: string) => {
|
2021-09-23 08:40:36 +00:00
|
|
|
setPersonalIdNumber(text)
|
2020-12-18 12:45:09 +00:00
|
|
|
}
|
|
|
|
|
2021-03-26 09:34:11 +00:00
|
|
|
const openBankId = (token: string) => {
|
2020-12-18 12:45:09 +00:00
|
|
|
try {
|
2021-02-23 08:11:27 +00:00
|
|
|
const redirect = loginMethodIndex === 0 ? encodeURIComponent(schema) : ''
|
2021-02-07 16:14:45 +00:00
|
|
|
const bankIdUrl =
|
|
|
|
Platform.OS === 'ios'
|
2021-03-03 19:46:21 +00:00
|
|
|
? `https://app.bankid.com/?autostarttoken=${token}&redirect=${redirect}`
|
|
|
|
: `bankid:///?autostarttoken=${token}&redirect=null`
|
2020-12-21 00:45:43 +00:00
|
|
|
Linking.openURL(bankIdUrl)
|
2020-12-27 09:37:21 +00:00
|
|
|
} catch (err) {
|
2021-09-29 15:31:47 +00:00
|
|
|
setError(t('auth.bankid.OpenManually'))
|
2020-12-21 00:45:43 +00:00
|
|
|
}
|
|
|
|
}
|
2020-12-21 15:42:41 +00:00
|
|
|
|
2021-03-26 09:34:11 +00:00
|
|
|
const startLogin = async (text: string) => {
|
2021-02-23 08:11:27 +00:00
|
|
|
if (loginMethodIndex < 2) {
|
|
|
|
showModal(true)
|
2021-04-17 15:12:11 +00:00
|
|
|
|
|
|
|
let ssn
|
|
|
|
if (loginMethodIndex === 1) {
|
|
|
|
ssn = Personnummer.parse(text).format(true)
|
2021-09-23 08:40:36 +00:00
|
|
|
setPersonalIdNumber(ssn)
|
2021-04-17 15:12:11 +00:00
|
|
|
}
|
|
|
|
|
2021-02-23 08:11:27 +00:00
|
|
|
const status = await api.login(ssn)
|
2021-03-26 06:14:29 +00:00
|
|
|
setCancelLoginRequest(() => () => status.cancel())
|
2021-02-23 08:11:27 +00:00
|
|
|
if (status.token !== 'fake' && loginMethodIndex === 0) {
|
|
|
|
openBankId(status.token)
|
|
|
|
}
|
|
|
|
status.on('PENDING', () => console.log('BankID app not yet opened'))
|
|
|
|
status.on('USER_SIGN', () => console.log('BankID app is open'))
|
2021-10-03 20:46:45 +00:00
|
|
|
status.on('CANCELLED', () => {
|
|
|
|
console.log('User pressed cancel in BankID')
|
|
|
|
showModal(false)
|
|
|
|
})
|
2021-03-26 06:14:29 +00:00
|
|
|
status.on('ERROR', () => {
|
2021-09-29 15:31:47 +00:00
|
|
|
setError(t('auth.loginFailed'))
|
2021-03-26 06:14:29 +00:00
|
|
|
showModal(false)
|
|
|
|
})
|
2021-02-23 08:11:27 +00:00
|
|
|
status.on('OK', () => console.log('BankID ok'))
|
|
|
|
} else {
|
|
|
|
await api.login('201212121212')
|
2020-12-31 00:05:06 +00:00
|
|
|
}
|
2020-12-18 12:45:09 +00:00
|
|
|
}
|
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const styles = useStyleSheet(themedStyles)
|
|
|
|
|
2020-12-16 22:07:15 +00:00
|
|
|
return (
|
2021-02-23 08:11:27 +00:00
|
|
|
<>
|
|
|
|
<View style={styles.loginForm}>
|
2021-04-17 15:12:11 +00:00
|
|
|
{loginMethodIndex === 1 && (
|
2021-02-23 08:11:27 +00:00
|
|
|
<Input
|
2021-05-11 09:08:11 +00:00
|
|
|
accessible={true}
|
2021-09-29 15:31:47 +00:00
|
|
|
label={t('general.socialSecurityNumber')}
|
2021-02-23 08:11:27 +00:00
|
|
|
autoFocus
|
2021-09-23 08:40:36 +00:00
|
|
|
value={personalIdNumber}
|
2021-02-23 08:11:27 +00:00
|
|
|
style={styles.pnrInput}
|
|
|
|
accessoryLeft={PersonIcon}
|
2021-03-26 09:34:11 +00:00
|
|
|
accessoryRight={(props) => (
|
2021-05-11 09:08:11 +00:00
|
|
|
<TouchableWithoutFeedback
|
|
|
|
accessible={true}
|
|
|
|
onPress={() => handleInput('')}
|
2021-09-29 15:31:47 +00:00
|
|
|
accessibilityHint={t(
|
2021-05-11 09:08:11 +00:00
|
|
|
'login.a11y_clear_social_security_input_field',
|
|
|
|
{
|
2021-05-12 09:16:13 +00:00
|
|
|
defaultValue: 'Rensa fältet för personnummer',
|
2021-05-11 09:08:11 +00:00
|
|
|
}
|
|
|
|
)}
|
|
|
|
>
|
2021-03-26 09:34:11 +00:00
|
|
|
<CloseOutlineIcon {...props} />
|
|
|
|
</TouchableWithoutFeedback>
|
|
|
|
)}
|
2021-02-23 08:11:27 +00:00
|
|
|
keyboardType="numeric"
|
|
|
|
onSubmitEditing={(event) => startLogin(event.nativeEvent.text)}
|
2021-03-26 09:34:11 +00:00
|
|
|
caption={error || ''}
|
2021-02-23 08:11:27 +00:00
|
|
|
onChangeText={(text) => handleInput(text)}
|
2021-09-29 15:31:47 +00:00
|
|
|
placeholder={t('auth.placeholder_SocialSecurityNumber')}
|
2021-02-23 08:11:27 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-06-16 12:10:06 +00:00
|
|
|
<ButtonGroup style={styles.loginButtonGroup} status="primary">
|
2021-02-23 08:11:27 +00:00
|
|
|
<Button
|
2021-05-11 09:08:11 +00:00
|
|
|
accessible={true}
|
2021-09-23 08:40:36 +00:00
|
|
|
onPress={() => startLogin(personalIdNumber)}
|
2021-05-06 12:35:11 +00:00
|
|
|
style={styles.loginButton}
|
2021-03-26 09:34:11 +00:00
|
|
|
appearance="ghost"
|
2021-04-17 15:12:11 +00:00
|
|
|
disabled={loginMethodIndex === 1 && !valid}
|
2021-02-23 08:11:27 +00:00
|
|
|
status="primary"
|
2021-05-15 16:15:55 +00:00
|
|
|
accessoryLeft={BankId}
|
2021-02-23 08:11:27 +00:00
|
|
|
size="medium"
|
|
|
|
>
|
2021-03-26 09:34:11 +00:00
|
|
|
{loginMethods[loginMethodIndex]}
|
2021-02-23 08:11:27 +00:00
|
|
|
</Button>
|
|
|
|
<Button
|
2021-05-11 09:08:11 +00:00
|
|
|
accessible={true}
|
2021-05-25 13:09:19 +00:00
|
|
|
onPress={() => {
|
|
|
|
setShowLoginMethod(true)
|
|
|
|
}}
|
2021-05-06 12:35:11 +00:00
|
|
|
style={styles.loginMethodButton}
|
2021-03-26 09:34:11 +00:00
|
|
|
appearance="ghost"
|
2021-02-23 08:11:27 +00:00
|
|
|
status="primary"
|
|
|
|
accessoryLeft={SelectIcon}
|
|
|
|
size="medium"
|
2021-09-29 15:31:47 +00:00
|
|
|
accessibilityHint={t('login.a11y_select_login_method', {
|
2021-05-12 09:20:14 +00:00
|
|
|
defaultValue: 'Välj inloggningsmetod',
|
2021-05-11 09:08:11 +00:00
|
|
|
})}
|
2021-02-23 08:11:27 +00:00
|
|
|
/>
|
|
|
|
</ButtonGroup>
|
|
|
|
</View>
|
2021-05-25 12:17:15 +00:00
|
|
|
<Modal
|
|
|
|
visible={showLoginMethod}
|
|
|
|
style={styles.modal}
|
|
|
|
onBackdropPress={() => setShowLoginMethod(false)}
|
|
|
|
backdropStyle={styles.backdrop}
|
|
|
|
>
|
2021-05-25 13:09:19 +00:00
|
|
|
<Card>
|
|
|
|
<Text category="h5" style={styles.bankIdLoading}>
|
2021-09-29 15:31:47 +00:00
|
|
|
{t('auth.chooseLoginMethod')}
|
2021-05-25 13:09:19 +00:00
|
|
|
</Text>
|
2021-05-25 12:17:15 +00:00
|
|
|
<List
|
|
|
|
data={loginMethods}
|
|
|
|
ItemSeparatorComponent={Divider}
|
|
|
|
renderItem={({ item, index }) => (
|
|
|
|
<ListItem
|
2021-05-25 13:09:19 +00:00
|
|
|
title={item}
|
2021-05-25 12:17:15 +00:00
|
|
|
accessible={true}
|
2021-05-25 13:09:19 +00:00
|
|
|
accessoryRight={
|
|
|
|
loginMethodIndex === index ? CheckIcon : undefined
|
|
|
|
}
|
2021-05-25 12:17:15 +00:00
|
|
|
onPress={() => {
|
|
|
|
setLoginMethodIndex(index)
|
|
|
|
setShowLoginMethod(false)
|
2021-05-25 13:09:19 +00:00
|
|
|
}}
|
|
|
|
/>
|
2021-05-25 12:17:15 +00:00
|
|
|
)}
|
|
|
|
/>
|
2021-05-25 13:09:19 +00:00
|
|
|
<Button
|
|
|
|
status="basic"
|
2021-05-25 13:20:21 +00:00
|
|
|
style={styles.cancelButtonStyle}
|
2021-05-25 13:09:19 +00:00
|
|
|
onPress={() => {
|
|
|
|
setShowLoginMethod(false)
|
2021-05-25 13:13:33 +00:00
|
|
|
}}
|
|
|
|
>
|
2021-09-29 15:31:47 +00:00
|
|
|
{t('general.cancel')}
|
2021-05-25 13:09:19 +00:00
|
|
|
</Button>
|
2021-05-25 12:17:15 +00:00
|
|
|
</Card>
|
|
|
|
</Modal>
|
2021-02-23 08:11:27 +00:00
|
|
|
<Modal
|
|
|
|
visible={visible}
|
|
|
|
style={styles.modal}
|
|
|
|
onBackdropPress={() => showModal(false)}
|
2021-05-06 12:35:11 +00:00
|
|
|
backdropStyle={styles.backdrop}
|
2021-02-23 08:11:27 +00:00
|
|
|
>
|
|
|
|
<Card disabled>
|
2021-09-29 15:31:47 +00:00
|
|
|
<Text style={styles.bankIdLoading}>{t('auth.bankid.Waiting')}</Text>
|
2021-02-23 08:11:27 +00:00
|
|
|
|
2021-03-26 06:14:29 +00:00
|
|
|
<Button
|
2021-05-06 12:35:11 +00:00
|
|
|
status="primary"
|
2021-05-11 09:08:11 +00:00
|
|
|
accessible={true}
|
2021-03-26 06:14:29 +00:00
|
|
|
onPress={() => {
|
|
|
|
cancelLoginRequest()
|
|
|
|
showModal(false)
|
|
|
|
}}
|
|
|
|
>
|
2021-09-29 15:31:47 +00:00
|
|
|
{t('general.cancel')}
|
2021-02-23 08:11:27 +00:00
|
|
|
</Button>
|
|
|
|
</Card>
|
|
|
|
</Modal>
|
|
|
|
</>
|
2020-12-21 00:45:43 +00:00
|
|
|
)
|
|
|
|
}
|
2020-12-18 12:45:09 +00:00
|
|
|
|
2021-05-06 12:35:11 +00:00
|
|
|
const themedStyles = StyleService.create({
|
|
|
|
backdrop: {
|
2021-10-03 20:46:45 +00:00
|
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
2021-05-06 12:35:11 +00:00
|
|
|
},
|
2021-02-23 08:11:27 +00:00
|
|
|
loginForm: {
|
2021-03-31 08:16:41 +00:00
|
|
|
...Layout.mainAxis.flexStart,
|
2021-02-21 15:43:24 +00:00
|
|
|
},
|
2021-02-23 08:11:27 +00:00
|
|
|
pnrInput: { minHeight: 70 },
|
|
|
|
loginButtonGroup: {
|
|
|
|
minHeight: 45,
|
2021-02-21 15:43:24 +00:00
|
|
|
},
|
2021-03-31 08:16:41 +00:00
|
|
|
loginButton: { ...Layout.flex.full },
|
2021-02-23 08:11:27 +00:00
|
|
|
loginMethodButton: { width: 45 },
|
|
|
|
modal: {
|
2021-05-25 13:09:19 +00:00
|
|
|
width: '90%',
|
2021-02-21 15:43:24 +00:00
|
|
|
},
|
2021-02-23 08:11:27 +00:00
|
|
|
bankIdLoading: { margin: 10 },
|
2021-05-25 13:20:21 +00:00
|
|
|
cancelButtonStyle: { marginTop: 15 },
|
2021-05-15 16:15:55 +00:00
|
|
|
icon: {
|
|
|
|
width: 20,
|
|
|
|
height: 20,
|
|
|
|
},
|
2020-12-27 09:37:21 +00:00
|
|
|
})
|