import { useApi } from '@skolplattformen/hooks'
import {
Button,
ButtonGroup,
Card,
Divider,
Input,
List,
ListItem,
Modal,
StyleService,
Text,
useStyleSheet,
} from '@ui-kitten/components'
import Personnummer from 'personnummer'
import React, { useEffect, useState } from 'react'
import {
Image,
Linking,
Platform,
TouchableWithoutFeedback,
View,
} from 'react-native'
import { schema } from '../app.json'
import useSettingsStorage from '../hooks/useSettingsStorage'
import { useTranslation } from '../hooks/useTranslation'
import { Layout } from '../styles'
import {
CheckIcon,
CloseOutlineIcon,
PersonIcon,
SelectIcon,
} from './icon.component'
const BankId = () => (
)
export const Login = () => {
const { api } = useApi()
const [cancelLoginRequest, setCancelLoginRequest] = useState<
(() => Promise) | (() => null)
>(() => () => null)
const [visible, showModal] = useState(false)
const [showLoginMethod, setShowLoginMethod] = useState(false)
const [error, setError] = useState(null)
const [personalIdNumber, setPersonalIdNumber] = useSettingsStorage(
'cachedPersonalIdentityNumber'
)
const [loginMethodIndex, setLoginMethodIndex] =
useSettingsStorage('loginMethodIndex')
const { t } = useTranslation()
const valid = Personnummer.valid(personalIdNumber)
const loginMethods = [
t('auth.bankid.OpenOnThisDevice'),
t('auth.bankid.OpenOnAnotherDevice'),
t('auth.loginAsTestUser'),
]
const loginHandler = async () => {
showModal(false)
}
useEffect(() => {
api.on('login', loginHandler)
return () => {
api.off('login', loginHandler)
}
}, [api])
/* Helpers */
const handleInput = (text: string) => {
setPersonalIdNumber(text)
}
const openBankId = (token: string) => {
try {
const redirect = loginMethodIndex === 0 ? encodeURIComponent(schema) : ''
const bankIdUrl =
Platform.OS === 'ios'
? `https://app.bankid.com/?autostarttoken=${token}&redirect=${redirect}`
: `bankid:///?autostarttoken=${token}&redirect=null`
Linking.openURL(bankIdUrl)
} catch (err) {
setError(t('auth.bankid.OpenManually'))
}
}
const startLogin = async (text: string) => {
if (loginMethodIndex < 2) {
showModal(true)
let ssn
if (loginMethodIndex === 1) {
ssn = Personnummer.parse(text).format(true)
setPersonalIdNumber(ssn)
}
const status = await api.login(ssn)
setCancelLoginRequest(() => () => status.cancel())
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'))
status.on('CANCELLED', () => {
console.log('User pressed cancel in BankID')
showModal(false)
})
status.on('ERROR', () => {
setError(t('auth.loginFailed'))
showModal(false)
})
status.on('OK', () => console.log('BankID ok'))
} else {
await api.login('201212121212')
}
}
const styles = useStyleSheet(themedStyles)
return (
<>
{loginMethodIndex === 1 && (
(
handleInput('')}
accessibilityHint={t(
'login.a11y_clear_social_security_input_field',
{
defaultValue: 'Rensa fältet för personnummer',
}
)}
>
)}
keyboardType="numeric"
onSubmitEditing={(event) => startLogin(event.nativeEvent.text)}
caption={error || ''}
onChangeText={(text) => handleInput(text)}
placeholder={t('auth.placeholder_SocialSecurityNumber')}
/>
)}
setShowLoginMethod(false)}
backdropStyle={styles.backdrop}
>
{t('auth.chooseLoginMethod')}
(
{
setLoginMethodIndex(index)
setShowLoginMethod(false)
}}
/>
)}
/>
showModal(false)}
backdropStyle={styles.backdrop}
>
{t('auth.bankid.Waiting')}
>
)
}
const themedStyles = StyleService.create({
backdrop: {
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
loginForm: {
...Layout.mainAxis.flexStart,
},
pnrInput: { minHeight: 70 },
loginButtonGroup: {
minHeight: 45,
},
loginButton: { ...Layout.flex.full },
loginMethodButton: { width: 45 },
modal: {
width: '90%',
},
bankIdLoading: { margin: 10 },
cancelButtonStyle: { marginTop: 15 },
icon: {
width: 20,
height: 20,
},
})