All files / client/src/views/login LoginView.tsx

95% Statements 19/20
47.61% Branches 10/21
100% Functions 5/5
94.11% Lines 16/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98                                    356x 101x 101x 101x 101x 101x   209x 209x 209x   101x   101x 101x 82x     19x   6x     19x                                                                                                                
import { ReactElement, useEffect } from "react";
import { useTranslation } from "react-i18next";
import {
  Link,
  useLocation,
  useNavigate,
  useNavigationType,
} from "react-router";
import { LocalLoginForm } from "client/views/login/components/LocalLoginForm";
import { useAppSelector } from "client/utils/hooks";
import { LoginProvider } from "shared/config/eventConfigTypes";
import { KompassiLoginButton } from "client/views/login/components/KompassiLoginButton";
import { navigateToPreviousOrRoot } from "client/utils/navigation";
import { usePreviousLocation } from "client/app/HistoryContext";
import { AppRoute } from "client/app/AppRoutes";
import { InfoText } from "client/components/InfoText";
import { KompassiAndLocalLogin } from "client/views/login/components/KompassiAndLocalLogin";
 
export const LoginView = (): ReactElement => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const navigationType = useNavigationType();
  const prevLocation = usePreviousLocation();
 
  const loggedIn = useAppSelector((state) => state.login.loggedIn);
  const loginProvider = useAppSelector((state) => state.admin.loginProvider);
  const appOpen = useAppSelector((state) => state.admin.appOpen);
 
  const isAdminLogin = location.pathname === "/admin/login";
 
  useEffect(() => {
    if (!loggedIn) {
      return;
    }
 
    if (prevLocation?.pathname === "/program/list") {
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      navigate(AppRoute.ROOT);
    }
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    navigateToPreviousOrRoot(navigationType, navigate);
  }, [loggedIn, navigate, navigationType, prevLocation]);
 
  return (
    <div>
      <h2>{t("pageTitle.login")}</h2>
 
      {(loginProvider === LoginProvider.LOCAL || isAdminLogin) && (
        <>
          <p>{t("loginView.oldAccountsNotWorking")}</p>
          <LocalLoginForm />
          <Link to={"/registration"}>
            <p>{t("loginView.noAccountRegister")}</p>
          </Link>
        </>
      )}
 
      {loginProvider === LoginProvider.KOMPASSI && !isAdminLogin && (
        <>
          {appOpen && (
            <>
              <p>{t("loginView.kompassiLoginHint")}</p>
              <KompassiLoginButton />
            </>
          )}
          {!appOpen && (
            <>
              <InfoText>{t("loginView.notOpenYet")}</InfoText>
              <p>{t("loginView.createKompassiAccountHint")}</p>
 
              <Link to={"https://kompassi.eu/login"}>
                <p>{t("loginView.createKompassiAccount")}</p>
              </Link>
            </>
          )}
        </>
      )}
 
      {loginProvider === LoginProvider.LOCAL_KOMPASSI && !isAdminLogin && (
        <>
          {appOpen && <KompassiAndLocalLogin />}
          {!appOpen && (
            <>
              <InfoText>{t("loginView.notOpenYet")}</InfoText>
              <p>{t("loginView.createKompassiAccountHint")}</p>
 
              <Link to={"https://kompassi.eu/login"}>
                <p>{t("loginView.createKompassiAccount")}</p>
              </Link>
            </>
          )}
        </>
      )}
    </div>
  );
};