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 | 1x 1x 1x 1x 1x 1x 1x 11x 2x 2x 2x 2x 11x 11x 2x 2x 2x 2x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x | import { Row } from "react-bootstrap";
import SignInCard from "main/components/Auth/SignInCard";
import { useSystemInfo } from "main/utils/systemInfo";
import loginProviderSchools from "main/utils/loginProviderSchools";
import { FaMicrosoft } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
export default function SignInProviders({ onClick }) {
const microsoftIcon = () => {
return (
<span data-testid="SignInProvider-microsoftIcon">
<FaMicrosoft size="10em" role="img" />
</span>
);
};
const { data: systemInfo } = useSystemInfo();
const googleIcon = () => {
return (
<span data-testid="SignInProvider-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="SignInProvider-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>
);
}
|