Home Reference Source

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,
    },
});