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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 15x 15x 15x 1x 15x 2x 15x 2x 15x 2x 15x 5x 2x 3x 15x 6x | import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import { Typeahead } from "react-bootstrap-typeahead";
import { schoolToProvider } from "main/utils/loginProviderSchools";
import React, { useState } from "react";
import { Row, Button, Col, ProgressBar } from "react-bootstrap";
import { useSystemInfo } from "main/utils/systemInfo";
import { FaMicrosoft } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import SignInCard from "main/components/Auth/SignInCard";
export default function OnboardingSelectSchoolComponent() {
const [selectedProvider, setSelectedProvider] = useState(null);
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>
);
};
const notSetUp = () => {
return (
<p>
We're sorry, your login provider isn't available at this time.
Please contact your instructor.
</p>
);
};
const setRedirect = () => {
sessionStorage.setItem("redirect", "/onboarding");
};
const renderProviderSignIn = () => {
switch (selectedProvider) {
case "microsoft": {
return (
<>
{systemInfo.activeDirectoryUrl ? (
<SignInCard
Icon={microsoftIcon}
title={"Sign in with Microsoft"}
description={
<>
Please sign in with your university-associated account via
Microsoft.
</>
}
url={systemInfo.activeDirectoryUrl}
testid={"microsoft"}
onClick={setRedirect}
/>
) : (
notSetUp()
)}
</>
);
}
case "google": {
return (
<>
{systemInfo.oauthLogin ? (
<SignInCard
Icon={googleIcon}
title={"Sign in with Google"}
description={
<>
Please sign in with your university-associated account via
Google.
</>
}
url={systemInfo.oauthLogin}
testid={"google"}
onClick={setRedirect}
/>
) : (
notSetUp()
)}
</>
);
}
}
};
return (
<>
<Row>
<Col>
<h1>Welcome to Frontiers!</h1>
<p>Let's get started.</p>
<p>
We need a bit of information from you. Please select the school you
have credentials with:
</p>
<Typeahead
options={schoolToProvider}
placeholder="Start typing to select a school..."
labelKey="schoolName"
inputProps={{
"aria-label": "Choose a school",
"data-testid": "SelectSchool-typeahead",
}}
onChange={(selected) => {
setSelectedProvider(selected[0]?.provider);
}}
/>
</Col>
<Col className="text-center justify-content-center align-items-center d-flex">
<>{selectedProvider && renderProviderSignIn()}</>
</Col>
</Row>
</>
);
}
|