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 | 4x 18x 18x 3x 18x 4x 18x 8x 3x | 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;
|