102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { ActivityIndicator, ScrollView, Text, TextInput, View, StyleSheet } from 'react-native';
|
|
import { Button } from 'react-native-ui-lib';
|
|
|
|
import FormErrors from 'src/components/FormErrors';
|
|
import { useAppSelector } from 'src/hooks';
|
|
import theme from 'src/theme';
|
|
|
|
import useUserDelete from './useUserDelete';
|
|
|
|
const UserDelete = () => {
|
|
const [value, onChangeText] = React.useState('');
|
|
const user = useAppSelector((state) => state.user);
|
|
const { onPress, isDeletingUser, deleteUserError } = useUserDelete();
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
const isDisabled = !isDeletingUser && value !== user.username;
|
|
|
|
return (
|
|
<ScrollView style={theme.background}>
|
|
<View style={theme.card}>
|
|
<Text style={styles.headerTitle}>Slett meg</Text>
|
|
<Text style={styles.paragraph}>
|
|
Dette sletter kontoen med brukernavn <Text style={styles.bold}>{user.username}</Text> inkludert all tilknyttet
|
|
persondata <Text style={styles.bold}>for alltid</Text>.
|
|
</Text>
|
|
<Text style={styles.paragraph}>Skriv inn brukernavnet ditt for å fortsette.</Text>
|
|
<TextInput
|
|
editable
|
|
numberOfLines={1}
|
|
maxLength={32}
|
|
autoCapitalize="none"
|
|
onChangeText={(text) => onChangeText(text)}
|
|
value={value}
|
|
style={styles.input}
|
|
/>
|
|
{deleteUserError && <FormErrors errors={deleteUserError} />}
|
|
<Button
|
|
onPress={onPress}
|
|
disabled={isDisabled}
|
|
style={!isDisabled ? styles.deleteButton : styles.deleteButtonDisabled}
|
|
>
|
|
<Text style={!isDisabled ? styles.whiteText : styles.disabledText}>Jeg forstår, slett kontoen min</Text>
|
|
</Button>
|
|
{isDeletingUser && <ActivityIndicator color={theme.colors.neufOrange} />}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
export default UserDelete;
|
|
|
|
const styles = StyleSheet.create({
|
|
paragraph: {
|
|
textAlign: 'center',
|
|
fontSize: 16,
|
|
color: theme.colors.neufBlack,
|
|
paddingBottom: 10,
|
|
lineHeight: 25,
|
|
},
|
|
bold: {
|
|
fontWeight: 'bold',
|
|
},
|
|
deleteButton: {
|
|
marginTop: 16,
|
|
marginBottom: 16,
|
|
backgroundColor: theme.colors.danger,
|
|
},
|
|
deleteButtonDisabled: {
|
|
marginTop: 16,
|
|
marginBottom: 16,
|
|
backgroundColor: theme.colors.gray1,
|
|
},
|
|
whiteText: {
|
|
color: theme.colors.neufWhite,
|
|
fontWeight: '900',
|
|
},
|
|
disabledText: {
|
|
opacity: 0.5,
|
|
},
|
|
headerTitle: {
|
|
textAlign: 'center',
|
|
fontWeight: 'bold',
|
|
fontSize: 20,
|
|
color: theme.colors.neufBlack,
|
|
paddingVertical: 10,
|
|
lineHeight: 25,
|
|
},
|
|
input: {
|
|
height: 40,
|
|
borderColor: theme.colors.neufPurple,
|
|
backgroundColor: 'white',
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
padding: 10,
|
|
textAlign: 'center',
|
|
},
|
|
});
|