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 | 1x 1x 1x 1x 4x 4x 4x 4x 4x 4x 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x | import { Button, Row, Col } from "react-bootstrap";
import SignInCard from "main/components/Auth/SignInCard";
import { FaGithubSquare } from "react-icons/fa";
export default function OnboardingGithubSignInComponent() {
const githubIcon = () => {
return (
<span data-testid={"OnboardingGithubSignInComponent-githubIcon"}>
<FaGithubSquare size={"10em"} role={"img"} />
</span>
);
};
const setRedirect = () => {
sessionStorage.setItem("redirect", "/onboarding");
};
const githubOauthLogin = "/oauth2/authorization/github";
return (
<>
<Row>
<h1>Next, you'll need to sign in with GitHub</h1>
<p>
This allows your instructor to connect your GitHub account with your
university.
</p>
<p>
Please sign in with the GitHub account you intend to use for your
classes.
</p>
</Row>
<Row
xs={1}
md={2}
className="g-5 d-flex gap-5 justify-content-center align-items-center"
>
<SignInCard
Icon={githubIcon}
title={"Sign in with Github"}
description={
"Please connect your account with a GitHub account to continue to Frontiers."
}
url={githubOauthLogin}
testid={"github"}
onClick={setRedirect}
/>
</Row>
<Row className="align-items-center justify-content-center py-3">
<Col xs="auto" className="text-center">
<p>Don't have a GitHub account?</p>
<Button
variant="outline-primary"
href="https://github.com/signup"
target="_blank"
rel="noopener noreferrer"
data-testid="OnboardingGithubSignInComponent-createAccount"
>
Create GitHub Account
</Button>
</Col>
</Row>
</>
);
}
|