All files / components/Auth SignInCardDisplay.jsx

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

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 841x 1x 1x 1x 1x 1x 1x   1x 20x 3x 3x 3x     3x   20x   20x 4x 4x 4x     4x   20x 20x 20x 20x 20x     20x 20x 20x 20x 20x   20x 20x 20x 20x 20x 20x   20x 20x 20x         20x 20x 20x     20x 20x 20x 20x 20x 20x     20x 20x 20x         20x 20x 20x           20x  
// frontend/src/main/components/Auth/SignInCardDisplay.jsx
import { Alert, Row } from "react-bootstrap";
import { FaMicrosoft } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import SignInCard from "main/components/Auth/SignInCard";
import { useSystemInfo } from "main/utils/systemInfo";
import loginProviderSchools from "main/utils/loginProviderSchools";
 
export default function SignInCardDisplay({ alertMessage, onClick }) {
  const microsoftIcon = () => {
    return (
      <span data-testid={"SignInPage-microsoftIcon"}>
        <FaMicrosoft size={"10em"} role={"img"} />
      </span>
    );
  };
 
  const { data: systemInfo } = useSystemInfo();
 
  const googleIcon = () => {
    return (
      <span data-testid={"SignInPage-googleIcon"}>
        <FcGoogle size={"10em"} role={"img"} />
      </span>
    );
  };
 
  return (
    <>
      {alertMessage && (
        <Row className="p-3">
          <Alert variant={"danger"}>{alertMessage}</Alert>
        </Row>
      )}
      <Row
        xs={1}
        md={2}
        className={"g-5 d-flex gap-5 justify-content-center align-items-center"}
        data-testid={"SignInPage-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={onClick}
          />
        )}
        {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={onClick}
          />
        )}
      </Row>
    </>
  );
}