()
| 7 | import { useAdapterOptional } from "@/adapters"; |
| 8 | |
| 9 | export const Login = () => { |
| 10 | const [isLoginLoading, setIsLoginLoading] = useState(false); |
| 11 | const adapter = useAdapterOptional(); |
| 12 | const [loginLoadingMessage, setLoginLoadingMessage] = useState<string>("Please continue in the opened window/tab"); |
| 13 | const [errorMessage, setErrorMessage] = useState<string>(""); |
| 14 | // toggle show endpoint settings |
| 15 | const [showEndpointSettings, setShowEndpointSettings] = useState(false); |
| 16 | |
| 17 | return ( |
| 18 | <div className="flex flex-col h-full w-full items-center justify-center bg-gray-50 dark:!bg-default-50 noselect py-12"> |
| 19 | {!showEndpointSettings && ( |
| 20 | <> |
| 21 | <Logo className="mb-4" /> |
| 22 | <div className="flex flex-col items-center justify-center"> |
| 23 | <p className="text-exo-2 text-2xl font-light mb-2">Welcome to</p> |
| 24 | <div> |
| 25 | <span className="text-exo-2 text-2xl font-light">Paper</span> |
| 26 | <span className="text-exo-2 text-2xl font-bold">Debugger</span> |
| 27 | </div> |
| 28 | </div> |
| 29 | </> |
| 30 | )} |
| 31 | {showEndpointSettings && <AdvancedSettings />} |
| 32 | <div className="flex-1"></div> |
| 33 | |
| 34 | <LoginWithGoogle |
| 35 | isLoginLoading={isLoginLoading} |
| 36 | setIsLoginLoading={setIsLoginLoading} |
| 37 | setErrorMessage={setErrorMessage} |
| 38 | setLoginLoadingMessage={setLoginLoadingMessage} |
| 39 | /> |
| 40 | |
| 41 | {/* <LoginWithApple |
| 42 | isLoginLoading={isLoginLoading} |
| 43 | setIsLoginLoading={setIsLoginLoading} |
| 44 | setErrorMessage={setErrorMessage} |
| 45 | /> */} |
| 46 | |
| 47 | {/* Hide Overleaf login for Word plugin */} |
| 48 | {adapter?.platform !== "word" && ( |
| 49 | <LoginWithOverleaf |
| 50 | isLoginLoading={isLoginLoading} |
| 51 | setIsLoginLoading={setIsLoginLoading} |
| 52 | setErrorMessage={setErrorMessage} |
| 53 | setLoginLoadingMessage={setLoginLoadingMessage} |
| 54 | /> |
| 55 | )} |
| 56 | |
| 57 | {isLoginLoading && ( |
| 58 | <div className="text-sm text-gray-400 mt-4 flex items-center gap-2"> |
| 59 | <Icon icon="tabler:loader" className="animate-spin" /> |
| 60 | {loginLoadingMessage} |
| 61 | </div> |
| 62 | )} |
| 63 | |
| 64 | {errorMessage && <div className="text-xs text-red-500 mt-2 text-center max-w-xs">{errorMessage}</div>} |
| 65 | <div className="text-xs text-gray-500 dark:text-gray-400 mt-4 text-center max-w-xs"> |
| 66 | By login-in, you agree to PaperDebugger's <br /> |
nothing calls this directly
no test coverage detected