Untitled

unknown
typescript
a month ago
4.2 kB
Indexable
Never
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import Wrapper from '../Wrapper';
import { LoginWithBankID } from './BankID';
import NormalLogin from './Normal';
import useLoginStore, { LOGIN_METHOD } from './store/useLoginStore';
import { styled, Typography } from '@mui/material';
import MaterialSymbol from 'components/Materialsymbol';

const useStyles = makeStyles<void, 'loading'>()((theme, _params, classes) => ({
    body: {
        maxWidth: '350px',
        width: '100%',
        flexShrink: 0,
        opacity: 1,
        transition: 'opacity 2.0s ease-in-out',
        [`&.${classes.loading}`]: {
            transition: 'opacity 1.0s ease-in-out',
            opacity: 0,
        },
    },
    loading: {},
    footer: {
        'width': '100%',
        'height': '64px',
        'display': 'flex',
        'flexDirection': 'row',
        'justifyContent': 'space-between',
        'alignItems': 'center',
        'paddingLeft': theme.spacing(4),
        'paddingRight': theme.spacing(4),
        'color': theme.palette.primary[1000],
        'userSelect': 'none',
        'cursor': 'pointer',
        'transition': 'color 0.2s ease-in-out',
        '&:hover': {
            color: theme.palette.primary[800],
        },
    },
}));

const Body = styled('div')({
    maxWidth: '350px',
    width: '100%',
    flexShrink: 0,
    opacity: 1,
    transition: 'opacity 2.0s ease-in-out',
});

interface Props {
    isMobile: boolean;
    redirectedFrom: string | null;
}

export default function LoginComponent({ isMobile, redirectedFrom }: Props) {
    const [loading, setLoading] = React.useState(false);
    const [showSelector, setShowSelector] = React.useState(false);
    const [loginMethodAlreadyChosen, setLoginMethodAlreadyChosen] =
        React.useState(false); // this is only so we don't have to repeat the selection step after choosing an option
    const [method, setMethod] = useLoginStore(state => [
        state.method,
        state.setMethod,
    ]);

    const handleSetMethod = (v: LOGIN_METHOD) => {
        setLoginMethodAlreadyChosen(true);
        setMethod(v);
    };

    const renderLogin = () => {
        switch (method) {
            case LOGIN_METHOD.BANKID:
                return (
                    <LoginWithBankID
                        setLoading={setLoading}
                        redirectedFrom={redirectedFrom}
                        setMethod={handleSetMethod}
                        loginMethodAlreadyChosen={loginMethodAlreadyChosen}
                    />
                );
            default:
                return (
                    <NormalLogin
                        setLoading={setLoading}
                        redirectedFrom={redirectedFrom}
                    />
                );
        }
    };
    console.log('loading', loading);

    return (
        <Wrapper
            loading={loading}
            isMobile={isMobile}
            footer={<Footer onClick={() => setShowSelector(true)} />}>
            <Body
                sx={{
                    opacity: loading ? 0 : undefined,
                    transition: loading
                        ? 'opacity 1.0s ease-in-out'
                        : undefined,
                }}>
                {showSelector ? (
                    <div
                        onClick={() => {
                            setLoading(true);
                        }}>
                        bajs
                    </div>
                ) : (
                    renderLogin()
                )}
            </Body>
        </Wrapper>
    );
}

interface FooterProps {
    onClick: () => void;
}

const Footer = ({ onClick }: FooterProps) => {
    const { classes } = useStyles();

    return (
        <div className={classes.footer} onClick={onClick}>
            <Typography
                variant='body1'
                color='inherit'
                fontFamily='poppins'
                fontWeight={600}>
                Fler inloggningssätt
            </Typography>
            <MaterialSymbol
                symbol='arrow_right_alt'
                color='inherit'
                fontSize='semi_large'
            />
        </div>
    );
};