All files / components/Auth SignInOptions.jsx

100% Statements 51/51
100% Branches 3/3
100% Functions 3/3
100% Lines 51/51

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 781x 1x 1x 1x 1x 1x 1x   1x 18x   18x 3x 3x 3x     3x   18x 4x 4x 4x     4x   18x 18x 18x 18x 18x 18x   18x 18x 18x 18x 18x 18x   18x 18x 18x         18x 18x 18x     18x 18x 18x 18x 18x 18x   18x 18x 18x         18x 18x 18x         18x   1x  
import React from "react";
import { FaMicrosoft } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import { Row } from "react-bootstrap";
import SignInCard from "main/components/Auth/SignInCard";
import { useSystemInfo } from "main/utils/systemInfo";
import loginProviderSchools from "main/utils/loginProviderSchools";
 
const SignInOptions = ({ onSignIn }) => {
  const { data: systemInfo } = useSystemInfo();
 
  const microsoftIcon = () => {
    return (
      <span data-testid={"SignInOptions-microsoftIcon"}>
        <FaMicrosoft size={"10em"} role={"img"} />
      </span>
    );
  };
 
  const googleIcon = () => {
    return (
      <span data-testid={"SignInOptions-googleIcon"}>
        <FcGoogle size={"10em"} role={"img"} />
      </span>
    );
  };
 
  return (
    <Row
      xs={1}
      md={2}
      className={"g-5 d-flex gap-5 justify-content-center align-items-center"}
      data-testid={"SignInOptions-cardDisplay"}
    >
      {systemInfo.oauthLogin && (
        <SignInCard
          Icon={googleIcon}
          title={"Sign in with Google"}
          description={
            <>
              If you have credentials with these schools, sign in with Google
              <ul>
                {loginProviderSchools.google.map((school, index) => (
                  <li key={index}>{school}</li>
                ))}
              </ul>
            </>
          }
          url={systemInfo.oauthLogin}
          testid={"google"}
          onClick={onSignIn}
        />
      )}
      {systemInfo.activeDirectoryUrl && (
        <SignInCard
          Icon={microsoftIcon}
          title={"Sign in with Microsoft"}
          description={
            <>
              If you have credentials with these schools, sign in with Microsoft
              <ul>
                {loginProviderSchools.microsoft.map((school, index) => (
                  <li key={index}>{school}</li>
                ))}
              </ul>
            </>
          }
          url={systemInfo.activeDirectoryUrl}
          testid={"microsoft"}
          onClick={onSignIn}
        />
      )}
    </Row>
  );
};
 
export default SignInOptions;