src/views/journal/JournalLoginView.js
import React from 'react';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import {Image, StyleSheet, Text, TextInput, View} from 'react-native';
import JournalButton from '../../components/buttons/JournalButton';
import JournalView from './JournalView';
import LabelTextInput from './components/LabelTextInput';
import NotificationText from './components/NotificationText';
import {handleLogin} from '../../utils/AuthenticationUtils';
import {ButtonLength, ButtonLightness} from '../../utils/DimensionsConstants';
import {
ColorPalette,
JournalColors,
UIColors,
} from '../../utils/ColorConstants';
import {iOSTypography} from '../../styles/Typography';
import {JournalContext} from '../../utils/Contexts';
import {NotificationType} from '../../utils/NotificationConstants';
/**
* Component displaying the login page of the journal.
* @param {Object} props - Properties
* @param {function} props.setGoToJournalLogin - If true, shows the login view of the journal.
* If false, go back to the landing view of the activity module
* @returns {Object} Login view to the journal
*/
export default function JournalLoginView(props) {
// Retrieve properties
const setGoToJournalLogin = props.setGoToJournalLogin;
// Navigation: if goToJournal is true, login is valid and can go to journal
const [goToJournal, setGoToJournal] = React.useState(false);
const [showErrorMsg, setShowErrorMsg] = React.useState(0);
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [therapistId, setTherapistId] = React.useState('');
const [isValidConnection, setIsValidConnection] = React.useState(false);
const [isLoggedOut, setIsLoggedOut] = React.useState(false);
const goBackToJournalOverview = () => setGoToJournalLogin(false);
const readPassword = password => setPassword(password);
const readUsername = username => setUsername(username);
const validateLogin = () => {
handleLogin(
username,
setUsername,
password,
setPassword,
therapistId,
setTherapistId,
setIsValidConnection,
setShowErrorMsg,
setGoToJournal,
);
};
if (goToJournal) {
return (
<JournalContext.Provider
value={{
therapistId,
isValidConnection,
setIsValidConnection,
isLoggedOut,
setIsLoggedOut,
}}>
<JournalView setGoToJournal={setGoToJournal} />
</JournalContext.Provider>
);
} else if (isLoggedOut) {
return setShowErrorMsg(7), setTherapistId(), setIsLoggedOut(false);
} else {
return (
<JournalContext.Provider
value={{
therapistId,
isValidConnection,
setIsValidConnection,
isLoggedOut,
setIsLoggedOut,
}}>
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.parentContainer}>
<View style={styles.childContainerLeft}>
<Image
source={require('../../assets/images/nurse.png')}
/>
<Text style={styles.copyrightFootnote}>
Designed by Freepik
</Text>
</View>
<View style={styles.childContainerRight}>
<View style={styles.headingContainer}>
<Text style={iOSTypography.largeTitle}>
LOGG INN
</Text>
<Text style={iOSTypography.title2}>
Helsepersonell
</Text>
</View>
<View style={styles.loginContainer}>
<View style={styles.logoutMessageContainer}>
{showErrorMsg === 7 && (
<NotificationText
value={'Du er nå logget ut'}
type={
NotificationType.CONFIRMATION
}
/>
)}
</View>
<View style={styles.fieldContainer}>
<LabelTextInput label={'Brukernavn'} />
<TextInput
style={styles.loginInputField}
placeholder="brukernavn"
autoCapitalize="none"
autoCorrect={false}
spellCheck={false}
textContentType="username"
onChangeText={readUsername}
/>
{showErrorMsg === 1 && (
<NotificationText
value={' Fyll ut brukernavn'}
type={NotificationType.ERROR}
/>
)}
{(showErrorMsg === 2 ||
showErrorMsg === 5) && (
<NotificationText
value={'Ugyldig brukernavn'}
type={NotificationType.ERROR}
/>
)}
</View>
<View style={styles.fieldContainer}>
<LabelTextInput label={'Passord'} />
<TextInput
style={styles.loginInputField}
placeholder="passord"
autoCapitalize="none"
autoCorrect={false}
spellCheck={false}
secureTextEntry={true}
textContentType="password"
onChangeText={readPassword}
/>
{showErrorMsg === 3 && (
<NotificationText
value={'Fyll ut passord'}
type={NotificationType.ERROR}
/>
)}
{(showErrorMsg === 4 ||
showErrorMsg === 6) && (
<NotificationText
value={'Ugyldig passord'}
type={NotificationType.ERROR}
/>
)}
</View>
<View style={styles.buttonContainer}>
<JournalButton
lightness={ButtonLightness.DARK}
length={ButtonLength.FULL_LENGTH}
label={'Logg inn'}
onPress={validateLogin}
/>
<JournalButton
lightness={ButtonLightness.LIGHT}
length={ButtonLength.FULL_LENGTH}
label={'Tilbake'}
onPress={goBackToJournalOverview}
/>
</View>
</View>
</View>
</View>
</SafeAreaView>
</SafeAreaProvider>
</JournalContext.Provider>
);
}
}
/**
* Local styles
*/
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: JournalColors.BACKGROUND_DARK,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
},
parentContainer: {
flex: 1,
flexDirection: 'row',
width: 900,
maxWidth: '100%',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
},
childContainerLeft: {
flex: 1,
height: 600,
backgroundColor: ColorPalette.ALMOST_WHITE,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
},
childContainerRight: {
flex: 2,
height: 600,
backgroundColor: UIColors.BACKGROUND_VIEW,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
},
headingContainer: {
flex: 1,
width: 350,
maxWidth: '80%',
minHeight: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
marginBottom: 15,
},
loginContainer: {
flex: 5,
width: 350,
maxWidth: '80%',
flexDirection: 'column',
justifyContent: 'flex-start',
alignContent: 'flex-start',
alignItems: 'flex-start',
},
logoutMessageContainer: {
maxHeight: 30,
width: '100%',
justifyContent: 'center',
marginBottom: 5,
},
fieldContainer: {
width: '100%',
minHeight: 80,
justifyContent: 'flex-start',
marginTop: 3,
marginBottom: 2,
},
buttonContainer: {
width: '100%',
minHeight: 115,
justifyContent: 'space-between',
alignContent: 'center',
alignContent: 'center',
marginTop: 20,
},
copyrightFootnote: {
fontSize: 11,
lineHeight: 13,
marginTop: 3,
color: ColorPalette.ROCKET_METALLIC,
},
loginInputField: {
width: '100%',
height: 40,
marginBottom: 5,
paddingLeft: 7,
paddingRight: 7,
backgroundColor: ColorPalette.WHITE,
},
});